当前位置: 首页 > 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

相关文章:

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

1、官网地址&#xff1a; Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 2、显示个信息&#xff1a; Modal.info({title: This is a notification message,content: h(div, {}, [h(p, some messages...some messages...),h(p, some …...

Jgit的使用

Jgit的使用 文章目录 Jgit的使用一&#xff0c;git操作的对应代码1.1 查看操作1.1.1 打开仓库1.1.3 获取状态信息 1.2 添加操作1.2.1 初始化本地仓库1.2.2 创建一个新文件并写入内容1.2.3 添加指定&#xff08;所有&#xff09;文件到暂存区1.2.4 提交操作1.2.5 连接并推送到远…...

SQL Server—约束和主键外键详解

SQL Server—约束和主键外键详解 约束和主键外键 主键 和 外键 -- 主键: 关系型数据库中一条记录有若干个属性&#xff0c;若其中某一个属性能够位置标识这条记录&#xff0c;这个属性就可以设置为表的主键&#xff0c;主键是确定一条记录的唯一标识&#xff0c;有可能作为主键…...

信息学奥赛复赛复习14-CSP-J2021-03网络连接-字符串处理、数据类型溢出、数据结构Map、find函数、substr函数

PDF文档回复:20241007 1 P7911 [CSP-J 2021] 网络连接 [题目描述] TCP/IP 协议是网络通信领域的一项重要协议。今天你的任务&#xff0c;就是尝试利用这个协议&#xff0c;还原一个简化后的网络连接场景。 在本问题中&#xff0c;计算机分为两大类&#xff1a;服务机&#x…...

Allegro如何合并同名网络铜皮操作指导

Allegro如何合并同名网络铜皮操作指导 Allegro可以将同名网络的铜皮合并起来&#xff0c;如下图&#xff0c;需要把下面两块铜皮合并成一块铜皮 具体操作如下 选择Shape 选择merge shapes Find选择shapes 点击其中一块铜皮&#xff0c;会被亮起来 再点击另外一块铜皮 两块铜皮…...

【探测器】线阵相机中的 TDI 技术

【探测器】线阵相机中的 TDI 技术 1.背景2.TDI相机3.场景应用 1.背景 TDI 即Time Delay Integration时间延迟积分。 TDI相机是线阵相机的一种特殊类型&#xff0c;带有独特的时间延迟积分&#xff08;TDI&#xff09;技术。 换句话说&#xff0c;TDI相机是线阵相机的一个高级版…...

k8s 之安装metrics-server

作者&#xff1a;程序那点事儿 日期&#xff1a;2024/01/29 18:25 metrics-server可帮助我们查看pod的cpu和内存占用情况 kubectl top po nginx-deploy-56696fbb5-mzsgg # 报错&#xff0c;需要Metrics API 下载 Metrics 解决 wget https://github.com/kubernetes-sigs/metri…...

java学习-idea编辑器基础使用设置

首先打开电脑中的idea编辑器&#xff0c;点击头部&#xff1a;File按钮 → Settings… 打开设置界面&#xff1b; 设置idea的主题 设置idea代码注释的字体颜色 设置idea编辑器的字体和字体大小 设置idea通过提示回车自动导入包 设置idea输入忽略大小写进行提示...

PDSCH(物理下行共享信道)简介

文章目录 PDSCH&#xff08;物理下行共享信道&#xff09;简介1. Transport block CRC attachment2. LDPC base graph selection3. Code block segmentation And Code Block CRC Attachment4. Channel Coding5. Rate Matching6. Code Block Concatenation7. Scrambling8. Modul…...

hutool bug

Hutool参考文档 不用随便升级版本 版本5.8 1&#xff1a; 不要用 ReflectUtil.newInstance(cName); * 和spring 部分框架整合 &#xff0c;子类转换为父类或者接口失败&#xff0c;报转换失败的错误 https://gitee.com/dromara/hutool/issues/I18NCR?skip_mobiletrue 改成使…...

69.x的平方根 367.完全有效的平方数

题目:69. x 的平方根 - 力扣&#xff08;L69eetCode&#xff09; 经典平方根问题&#xff0c;用二分法慢慢逼近找开方值&#xff0c;注意mid*mid要用long long值&#xff0c;不然会溢出 class Solution { public:int mySqrt(int x) {int left 0; int right x;int ans -1; w…...

Android Automotive(一)

目录 什么是Android Automotive Android Automotive & Android Android Automotive 与 Android Auto 什么是Android Automotive Android Automotive 是一个基础的 Android 平台,它能够运行预装的车载信息娱乐系统(IVI)应用程序,以及可选的二方和三方 Android 应用程…...

命令设计模式

简介 命令模式&#xff08;Command Pattern&#xff09;是对命令的封装&#xff0c;每一个命令都是一个操作&#xff1a;请求方发出请求要求执行一个操作&#xff1b;接收方收到请求&#xff0c;并执行操作。命令模式解耦了请求方和接收方&#xff0c;请求方只需请求执行命令&…...

探索智能新境界:最好用的AI工具盘点

你用过最好用的AI工具有哪些&#xff1f; 在人工智能技术飞速发展的今天&#xff0c;AI工具正逐渐成为我们工作和生活中不可或缺的助手。它们不仅提高了效率&#xff0c;还为我们提供了创新的解决方案。作为一名对AI充满热情的用户&#xff0c;我有幸体验了许多优秀的AI工具。…...

【Redis】持久化(下)-- AOF

文章目录 AOF概念如何使用AOFAOF工作流程命令写入演示文件同步策略 AOF的重写机制概念触发重写机制AOF重写流程 启动时数据恢复混合持久化总结 AOF 概念 AOF持久化:以独立日志的方式记录每次的写命令,重启时再重新执行AOF文件中的命令达到恢复数据的目的.AOF的主要作用是解决…...

用Arduino单片机制作一个简单的音乐播放器

Arduino单片机上有多个数字IO针脚&#xff0c;可以输出数字信号&#xff0c;用于驱动发声器件&#xff0c;从而让它发出想要的声音。蜂鸣器是一种常见的发声器件&#xff0c;通电后可以发出声音。因此&#xff0c;单片机可以通过数字输出控制蜂鸣器发出指定的声音。另外&#x…...

软件工程相关

1.软件过程模型&#xff08;重要&#xff09; 1.1.瀑布模型 只适合需求明确的项目严格串行化&#xff0c;很长时间才能看到结果。严格区分阶段&#xff0c;每个阶段因果紧密相连&#xff0c;且要求每个阶段一次性解决该阶段的任务 1.2.原型模型&#xff08;构造简易模型确定…...

速盾:游戏加速下载可以用cdn吗?

随着互联网的快速发展&#xff0c;游戏下载已经成为许多游戏玩家的常见需求。然而&#xff0c;由于游戏文件体积庞大&#xff0c;下载速度经常成为制约因素之一。为了解决这个问题&#xff0c;许多玩家开始寻找可以加速游戏下载速度的方法。其中一种常见的方法是使用CDN&#x…...

每日新闻掌握【2024年9月25日 星期三】

2024年9月25日 星期三 农历八月廿三 大公司/大事件 央行降低存量房贷利率&#xff0c;二套房贷最低首付比例下调到15% 国务院新闻办公室9月24日上午举行新闻发布会&#xff0c;中国人民银行、金融监管总局、中国证监会主要负责人介绍了金融支持经济高质量发展有关情况。多项重…...

8. Bug 与 Error

计算机程序中的缺陷通常被称为 bug。把它们想象成偶然爬进我们工作中的小东西&#xff0c;会让程序员感觉良好。当然&#xff0c;实际上是我们自己把它们放进去的。 如果程序是思想的结晶&#xff0c;我们可以将错误大致分为思想混乱造成的错误和将思想转化为代码时引入错误造成…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

结构化文件管理实战:实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

WEB3全栈开发——面试专业技能点P8DevOps / 区块链部署

一、Hardhat / Foundry 进行合约部署 概念介绍 Hardhat 和 Foundry 都是以太坊智能合约开发的工具套件&#xff0c;支持合约的编译、测试和部署。 它们允许开发者在本地或测试网络快速开发智能合约&#xff0c;并部署到链上&#xff08;测试网或主网&#xff09;。 部署过程…...