当前位置: 首页 > article >正文

vue3 antdv3/4 Modal显示一个提示,内容换行显示。

1、官网地址:

Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js

2、显示个信息:

Modal.info({
    title: 'This is a notification message',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    onOk() {
      console.log('ok');
    },
  });

3、上面是content是换行的

<template>
  <a-space wrap>
    <a-button @click="info">Info</a-button>
    <a-button @click="success">Success</a-button>
    <a-button @click="error">Error</a-button>
    <a-button @click="warning">Warning</a-button>
  </a-space>
</template>
<script lang="ts" setup>
import { Modal } from 'ant-design-vue';
import { h } from 'vue';
const info = () => {
  Modal.info({
    title: 'This is a notification message',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    onOk() {
      console.log('ok');
    },
  });
};
const success = () => {
  Modal.success({
    title: 'This is a success message',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
  });
};

const error = () => {
  Modal.error({
    title: 'This is an error message',
    content: 'some messages...some messages...',
  });
};

const warning = () => {
  Modal.warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...',
  });
};
</script>

4、vue3 h函数

https://cn.vuejs.org/api/render-function.html#h


http://www.kler.cn/news/331505.html

相关文章:

  • 通信协议的选择:UART、SPI、I2C与CAN的比较
  • Linux中的进程间通信之管道
  • 【NoSQL】portswigger NoSQL注入 labs 全解
  • 抖去推数字人---技术本地服务器技术开发步骤
  • 【STM32】TCP/IP通信协议(2)--LwIP内存管理
  • 设计模式(2)工厂模式
  • Linux:进程间通信之信号量
  • 828华为云征文|华为云Flexus云服务器X实例部署——盲盒抽奖商城系统以及编译发布小程序
  • vue框架和uniapp框架区别
  • 小程序-使用npm包
  • C++学习笔记----8、掌握类与对象(三)---- CONSTEXPR与CONSTEVAL
  • json相关知识
  • 【docker笔记8-镜像推送】
  • 超好用的element的el-pagination分页组件二次封装-附源码及讲解
  • maven安装本地jar包到本地仓库
  • iMazing只能苹果电脑吗 Win和Mac上的iMazing功能有区别吗
  • Java 每日一刊(第20期):I/O 流
  • 09.useError
  • Python | Leetcode Python题解之第455题分发饼干
  • 【EXCEL数据处理】000010 案列 EXCEL文本型和常规型转换。使用的软件是微软的Excel操作的。处理数据的目的是让数据更直观的显示出来,方便查看。