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

devtools/2024/12/31 2:01:18/

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.ppmy.cn/devtools/122293.html

相关文章

强缓存和协商缓存的区别

强缓存和协商缓存是Web开发中用于优化页面加载性能的两种主要缓存机制&#xff0c;它们之间存在显著的区别。以下是对这两种缓存机制的详细比较&#xff1a; 一、定义与工作原理 强缓存 定义&#xff1a;强缓存是指在浏览器发送请求前&#xff0c;先检查本地缓存中是否存在可用…

使用VBA快速生成Excel工作表非连续列图片快照

Excel中示例数据如下图所示。 现在需要拷贝A2:A15,D2:D15,J2:J15,L2:L15,R2:R15为图片&#xff0c;然后粘贴到A18单元格&#xff0c;如下图所示。 大家都知道VBA中Range对象有CopyPicture方法可以拷贝为图片&#xff0c;但是如果Range对象为非连续区域&#xff0c;那么将产生10…

快速玩转 Mixtral 8x7B MOE大模型!阿里云机器学习 PAI 推出最佳实践

作者&#xff1a;熊兮、贺弘、临在 Mixtral 8x7B大模型是Mixtral AI推出的基于decoder-only架构的稀疏专家混合网络&#xff08;Mixture-Of-Experts&#xff0c;MOE&#xff09;开源大语言模型。这一模型具有46.7B的总参数量&#xff0c;对于每个token&#xff0c;路由器网络选…

【d59】【Java】【力扣】146.LRU缓存

思路 代码 class LRUCache {//初始化节点&#xff1a;keyvalueprenextclass Node {int key;int value;Node next;Node prev;public Node(int key, int value) {this.key key;this.value value;}}//设置链表需要的属性//最大容量int capacity0;//当前长度int size0;//头节点No…

Vue3 指令详解

一、构建指令 1. 生命周期 created&#xff1a;在指令被绑定到元素之前调用。这个钩子很少使用&#xff0c;因为指令通常在元素存在时才需要进行操作。 beforeMount&#xff1a;在指令绑定的元素被插入到 DOM 之前调用。 mounted&#xff1a;在指令绑定的元素被插入到 DOM 后调…

Watchdog Timers(WDT)

文章目录 1. 介绍2. Feature List3. 概述3.1. Safety Watchdog3.2. CPU Watchdog 4. 看门狗定时器功能5. Endinit Functions5.1 Password Access to WDTxCON05.1.1 Static Password5.1.2 Automatic Password Sequencing 5.2 Check Access to WDTxCON05.3 Modify Access to WDTx…

Vue.js组件开发详解

Vue.js组件开发详解 Vue.js 是一个用于构建用户界面的渐进式框架&#xff0c;其核心思想是通过数据驱动视图的变化&#xff0c;同时提供了一系列强大的工具来帮助开发者高效地开发复杂的单页应用。在 Vue.js 中&#xff0c;组件是构建复杂应用的基本单元&#xff0c;通过组件化…

ansible学习

ansible学习 介绍 Ansible是一个基于Python开发的自动化运维工具&#xff0c;它集合了众多运维工具&#xff08;如puppet、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。 前置环境准备&#xff1a; …