当前位置: 首页 > 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;我们可以将错误大致分为思想混乱造成的错误和将思想转化为代码时引入错误造成…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

Python环境安装与虚拟环境配置详解

本文档旨在为Python开发者提供一站式的环境安装与虚拟环境配置指南&#xff0c;适用于Windows、macOS和Linux系统。无论你是初学者还是有经验的开发者&#xff0c;都能在此找到适合自己的环境搭建方法和常见问题的解决方案。 快速开始 一分钟快速安装与虚拟环境配置 # macOS/…...

Springboot 高校报修与互助平台小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;高校报修与互助平台小程序被用户普遍使用&#xff0c;为…...

[特殊字符] Spring Boot底层原理深度解析与高级面试题精析

一、Spring Boot底层原理详解 Spring Boot的核心设计哲学是约定优于配置和自动装配&#xff0c;通过简化传统Spring应用的初始化和配置流程&#xff0c;显著提升开发效率。其底层原理可拆解为以下核心机制&#xff1a; 自动装配&#xff08;Auto-Configuration&#xff09; 核…...