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.mzph.cn/bicheng/55310.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

828华为云征文|部署音乐流媒体服务器 mStream

828华为云征文&#xff5c;部署音乐流媒体服务器 mStream 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 mStream3.1 mStream 介绍3.2 mStream 部署3.3 mStream 使用 四、…

centos一些常用命令

文章目录 查看磁盘信息使用 df 命令使用 du 命令 查看磁盘信息 使用 df 命令 df&#xff08;disk free&#xff09;命令用于显示文件系统的磁盘空间占用情况。 查看所有挂载点的磁盘使用情况&#xff1a; df -h选项说明&#xff1a; -h 参数表示以人类可读的格式&#xff0…

【学习笔记】手写 Tomcat 七

目录 一、优化 Dao 1. 设置 UserDaoImpl 为单例模式 2. 创建 Dao 工厂 3. 在 Service 层获取 UserDao 的实例 二、优化 Service 1. 设置 UserServiceImpl 为单例模式 2. 创建 Service 工厂 3. 在 Servlet 层获取 Service 实现类的对象 三、优化 Servlet 1. 使用配置…

Leetcode面试经典150题-322.零钱兑换

给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1 。 你可以认为每种硬币的数量是无限的。 示…

【无人机设计与控制】Multi-UAV|多无人机多场景路径规划算法MATLAB

摘要 本研究探讨了多无人机路径规划问题&#xff0c;提出了三种不同算法的对比分析&#xff0c;包括粒子群优化&#xff08;PSO&#xff09;、灰狼优化&#xff08;GWO&#xff09;和鲸鱼优化算法&#xff08;WOA&#xff09;。利用MATLAB实现了多场景仿真实验&#xff0c;验证…

C++那些事之内存优化

C那些事之内存优化 通常程序运行时内存是一个比较大的问题&#xff0c;如何减少内存占用和提升访问速度是至关重要。为了解决这些问题&#xff0c;C20 引入了 no_unique_address 特性&#xff0c;并结合空基类优化&#xff08;EBO, Empty Base Optimization&#xff09;&#x…

组合优化与凸优化 学习笔记5 对偶拉格朗日函数

有的时候约束条件有点难搞&#xff0c;我们可以把它放到目标函数里面。 记得之前凸函数的时候的结论吗&#xff1f;一大堆函数&#xff0c;每一段都取最大的&#xff0c;最后会得到一个凸函数。同理&#xff0c;每一段都取最小的&#xff0c;得到的是一个凹函数。就这样&#x…

【Golang】Go语言字符串处理库--strings

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

数通 1

通信&#xff1a;需要介质才能通信电话离信号塔&#xff08;基站&#xff09;越远&#xff0c;信号越弱。信号在基站之间传递。你离路由器越远&#xff0c;信号越差。一个意思 比如想传一张图片&#xff0c;这张图片就是数据载荷 网关&#xff0c;分割两个网络。路由器可以是网…

宠物医院微信小程序源码

文章目录 前言研究背景研究内容一、主要技术&#xff1f;二、项目内容1.整体介绍&#xff08;示范&#xff09;2.系统分析3.数据表信息4.运行截图5.部分代码介绍 总结 前言 随着当代社会科技的迅速发展&#xff0c;计算机网络时代正式拉来帷幕&#xff0c;它颠覆性的影响着社会…

新版pycharm如何导入自定义环境

我们新的版本的pycharm的ui更改了&#xff0c;但是我不会导入新的环境了 我们先点击右上角的add interpreter 然后点击添加本地编译器 先导入这个bat文件 再点击load 我们就可以选择我们需要的环境了

SpringBoot3脚手架

MySpringBootAPI SpringBoot3脚手架&#xff0c;基于SpringBoot3DruidPgSQLMyBatisPlus13FastJSON2Lombok&#xff0c;启动web容器为Undertow(非默认tomcat)&#xff0c;其他的请自行添加和配置。 <java.version>17</java.version> <springboot.version>3.3…

android SELinux权限适配

抓log方法&#xff0c; setenforce 0, 如果不先将selinux设置为permission mode&#xff0c;会导致一个问题。 程序运行的时候遇到权限策略限制&#xff08;假设 sepolicy 1&#xff09;&#xff0c;程序运行失败。添加权限&#xff08;sepolicy 1&#xff09;&#xff0c;然后…

Mysql 删除表的所有数据

在 MySQL 中&#xff0c;如果你想要删除一个表中的所有数据&#xff0c;可以使用 TRUNCATE TABLE 命令或者 DELETE 语句。下面是两种方法的对比以及如何使用它们&#xff1a; 使用 TRUNCATE TABLE TRUNCATE TABLE 是一个非常快速的方法来删除表中的所有记录&#xff0c;并且它…

工作日志:el-table在无数据情况下,出现横向滚动条。

1、遇到一个警告。 原因&#xff1a;中的组件不能呈现动画的非元素根节点。 也就是说&#xff0c;Transition包裹的必须是一个单根的组件。 2、el-table在无数据情况下&#xff0c;出现横向滚动条&#xff0c;大概跟边框的设置有关系。 开始排查。 给.el-scrollbar加了一个…

电影《749局》酷燃首映 苗苗神秘感大片释出氛围感拉满

2024 年 9 月 30 日&#xff0c;电影《749 局》在北京举办首映礼&#xff0c;导演陆川携主创王俊凯、苗苗、郑恺、任敏、李晨、杨皓宇出席&#xff0c;演员苗苗在片中饰演 749 局成员夏婳&#xff0c;这个角色天赋异禀&#xff0c;拥有特殊异能&#xff0c;为影片增添一抹神秘色…

如何微信多开

目录 1.找到微信在文件夹的位置 2.建文本&#xff0c;放代码 3.保存文本&#xff0c;更改后缀 4.使用 1.找到微信在文件夹的位置 1.首先找到你微信所在的文件夹&#xff0c;有桌面图标的点击右键属性&#xff0c;找到微信快捷启动exe程序。 2.建文本&#xff0c;放代码 2.…

WebAssembly 为什么能提升性能,怎么使用它 ?

文章目录 简介&#xff1a;起源&#xff1a;前端性能提升历史JIT&#xff08;Just-In-Time&#xff09;编译器(即时编译) 为什么需要WebAssembly&#xff1a;WebAssembly能做什么&#xff1a;经常说WASM的性能高&#xff0c;为什么高&#xff1f;&#xff1f;使用方法:Emscript…

使用AOP处理参数

说明&#xff1a;在一些时候&#xff0c;我们需要在接口介绍到参数前处理参数&#xff0c;像参数校验、参数转换等&#xff0c;本文介绍如何使用AOP来实现此需求。 场景 需求&#xff1a;有一批开放给第三方调用的接口&#xff0c;之前传递的都是用户表的ID&#xff0c;现在需…

“改善就医感受 提升患者体验”经验交流首场活动在呼市顺利举行

2024年9月26日至27日&#xff0c;以“医疗机构高质量发展 促进医改全面深化”为主题的“改善就医感受 提升患者体验”经验交流系列活动&#xff08;以下简称&#xff1a;系列活动&#xff09;首场活动在内蒙古呼和浩特顺利举行。 活动现场 患者体验&#xff0c;并不等同于患者…