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

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.lryc.cn/news/455606.html

相关文章:

  • Jgit的使用
  • SQL Server—约束和主键外键详解
  • 信息学奥赛复赛复习14-CSP-J2021-03网络连接-字符串处理、数据类型溢出、数据结构Map、find函数、substr函数
  • Allegro如何合并同名网络铜皮操作指导
  • 【探测器】线阵相机中的 TDI 技术
  • k8s 之安装metrics-server
  • java学习-idea编辑器基础使用设置
  • PDSCH(物理下行共享信道)简介
  • hutool bug
  • 69.x的平方根 367.完全有效的平方数
  • Android Automotive(一)
  • 命令设计模式
  • 探索智能新境界:最好用的AI工具盘点
  • 【Redis】持久化(下)-- AOF
  • 用Arduino单片机制作一个简单的音乐播放器
  • 软件工程相关
  • 速盾:游戏加速下载可以用cdn吗?
  • 每日新闻掌握【2024年9月25日 星期三】
  • 8. Bug 与 Error
  • 论文 | Model-tuning Via Prompts Makes NLP Models Adversarially Robust
  • 828华为云征文|华为云Flexus云服务器X实例部署 即时通讯IM聊天交友软件——高性能服务器实现120W并发连接
  • 超好用的element的el-pagination分页组件二次封装-附源码及讲解
  • 【AIGC】通过OpenAi Canvas修改论文(附40条论文优化指令)
  • Kubernetes Pod详解
  • Vue2电商项目(七)、订单与支付
  • 你知道U盘怎么加密吗?
  • 【软件教程OBS下载使用】一篇文章教会你如何下载安装使用OBS-Studio
  • 鸿蒙next开发第一课03.ArkTs语法介绍-案例
  • HTML网页制作——设计系学生静态HTML网页设计作品
  • 智能翻译新纪元:4款英汉互译在线工具解析