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

news2024/12/22 19:52:12

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.coloradmin.cn/o/2182284.html

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

相关文章

基于解压缩模块的JPEG同步重压缩检测论文学习

一、论文基本信息&#xff1a; 论文题目&#xff1a;基于解压缩模块的JPEG同步重压缩检测 作者&#xff1a;王金伟1 &#xff0c;胡冰涛1 &#xff0c;张家伟1 &#xff0c;马 宾2 &#xff0c;罗向阳3 &#xff08;1.南京信息工程大学计算机学院、网络空间安全学院&#xf…

Linux-L11-查看本机ip地址

linux查看ip地址 查看自己的IP地址使用 ip 命令&#xff1a;使用 ifconfig 命令使用 hostname 命令&#xff1a;使用 nmcli 命令 查看某个特定接口的IP查看公网IP地址 在Linux系统中&#xff0c;查看自己的IP地址可以通过多种方式实现&#xff0c;这里提供几种常用的方法&#…

Stable Diffusion绘画 | LCM模型:实现秒出图

在过往&#xff0c;不管使用 SD 还是 MJ&#xff0c;生成一张图片起码要等上10秒。 而现在&#xff0c;有了 LCM 技术的加持&#xff0c;已经能做到秒出图&#xff0c;甚至是实时出图。 LCM(潜空间一致性模型) 是由 清华大学信息科学技术研究院 研发的大模型&#xff0c;它最…

鸿蒙 如何退出 APP

terminateSelf() 停止Ability自身 在EntryAbility中这么使用 this.context.terminateSelf()在Pages页面中这么使用 import { common } from kit.AbilityKit (getContext(this) as common.UIAbilityContext)?.terminateSelf() 也可以直接封装&#xff1a; import common f…

【GreenHills】GHS的Run-Time检查功能

【更多软件使用问题请点击亿道电子官方网站】 一、文档背景 在编写代码时&#xff0c;内存检查的重要性不容忽视。内存是程序运行的核心资源之一&#xff0c;负责存储程序运行所需的数据。由于内存资源的有限性和操作的复杂性&#xff0c;内存错误常常会直接导致程序崩溃、性…

华为开源自研AI框架昇思MindSpore应用案例:基于MindSpore框架的Swin Transformer

如果你对MindSpore感兴趣&#xff0c;可以关注昇思MindSpore社区 模型简介 模型背景 Swin Transfromer在2021年首次发表于论文《Swin Transformer: Hierarchical Vision Transformer using Shifted Windows》&#xff0c;目前已用于图像分割、分类等计算机视觉领域的各项任务…

如何搭建医疗陪诊平台?基于互联网医院系统源码的开发技术详解

本篇文章&#xff0c;小编将深入探讨医疗陪诊平台的搭建过程&#xff0c;尤其是基于互联网医院系统源码的开发技术&#xff0c;以期为有志于此领域的开发者提供参考。 一、选择合适的互联网医院系统源码 在搭建医疗陪诊平台时&#xff0c;选择合适的互联网医院系统源码至关重…

【前端开发入门】前端开发环境配置

目录 引言一、Vscode编辑器安装1. 软件下载2. 软件安装3. 插件安装 二、Nodejs环境安装及版本控制1. 安装内容2. 使用nvm安装2.1 软件下载并安装2.2 nvm基本指令2.3 nvm下载过慢导致超时解决 三、git安装及配置1. 软件下载2. 软件安装3. 基础配置 四、总结 引言 本系列教程旨在…

SRC漏洞挖掘 | 针对Spring-Boot 框架漏洞的初探

&#x1f497;想加内部圈子&#xff0c;请联系我&#xff01; &#x1f497;文章交流&#xff0c;请联系我&#xff01;&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 一个想当文人的黑客 &#xff0c;很高兴认识大家~ ✨主…

fmt:C++ 格式化库

fmt 是一个现代化、快速且安全的 C 格式化库&#xff0c;专注于高效地格式化文本。它提供了类似 Python 的 format 功能&#xff0c;但具有更高的性能和类型安全特性。fmt 库在处理字符串格式化、日志输出以及构建用户友好的输出时尤为强大。自从 C20 标准引入 std::format 后&…

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《故障扰动下的风火储送端系统频率动态特性与储能容量优化配置》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

婚前协议模版(琴生生物机械科技工业研究所)

婚前协议示例 本协议由甲方&#xff08;全名&#xff09;&#xff0c;身份证号码&#xff08; _________ &#xff09;&#xff0c;与乙方&#xff08;全名&#xff09;&#xff0c;身份证号码&#xff08; _________ &#xff09;&#xff0c;在平等、自愿、相互尊重及充分沟…

DataEase v2 开源代码 Windows 从0到1环境搭建

一、环境准备 功能名称 描述 其它 操作系统 Windows 数据库 Mysql8.0 开发环境 JDK17以上 本项基于的21版本开发 Maven 3.9版本 开发工具 idea2024.2版本 前端 VSCode TIPS&#xff1a;如果你本地有jdk8版本&#xff0c;需要切换21版本&#xff0c;请看…

[python] 基于PyOD库实现数据异常检测

PyOD是一个全面且易于使用的Python库&#xff0c;专门用于检测多变量数据中的异常点或离群点。异常点是指那些与大多数数据点显著不同的数据&#xff0c;它们可能表示错误、噪声或潜在的有趣现象。无论是处理小规模项目还是大型数据集&#xff0c;PyOD提供了50多种算法以满足用…

解决银河麒麟fcitx进程资源占用高的问题

解决银河麒麟fcitx进程资源占用高的问题 1、问题描述2、解决方法 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 1、问题描述 银河麒麟桌面系统中&#xff0c;fcitx进程占用CPU和内存过高&#xff0c;导致系统卡顿。 2、解决方法 卸载并清…

OPENCV判断图像中目标物位置及多目标物聚类

文章目录 在最近的项目中&#xff0c;又碰到一个有意思的问题需要通过图像算法来解决。就是显微拍摄的到的医疗图像中&#xff0c;有时候目标物比较偏&#xff0c;也就是在图像的比较偏的位置&#xff0c;需要通过移动样本&#xff0c;将目标物置于视野正中央&#xff0c;然后再…

IP协议讲解

IP协议 IP协议的本质&#xff1a;提供一种能力&#xff0c;将数据跨网络从A主机传输到B主机 4位版本号(version): 指定IP协议的版本, 对于IPv4来说, 就是4. 4位头部长度(header length): IP头部的长度是多少个32bit, 也就是 length * 4 的字节数. 4bit表示最大 的数字是15, 因…

Linux(三)文件管理、复杂操作与实用工具详解

Linux学习笔记&#xff08;三&#xff09;文件管理、复杂操作与实用工具详解 Linux 学习笔记&#xff08;二&#xff09;&#xff1a;深入理解用户管理、运行级别与命令行操作 1.文件操作的基本操作 1.1 创建 创建目录 mkdir&#xff1a;创建目录 mkdir /home/dog # 创建单级…

【顺序表使用练习】发牌游戏

【顺序表使用练习】发牌游戏 1. 介绍游戏2. 实现52张牌3. 实现洗牌4. 实现发牌5. 效果展示 1. 介绍游戏 首先先为大家介绍一下设计要求 实现52张牌&#xff08;这里排除大小王&#xff09;洗牌——打乱牌的顺序发牌——3个人&#xff0c;1人5张牌 2. 实现52张牌 创建Code对象创…

NVIDIA G-Assist 项目:您的游戏和应用程序AI助手

NVIDIA G-Assist 是一个革命性的人工智能助手项目&#xff0c;旨在通过先进的AI技术提升玩家的游戏体验和系统性能。这个项目在2024年Computex上首次亮相&#xff0c;展示了其在游戏和应用程序中的潜在应用。 喜好儿网 G-Assist 的核心功能是提供上下文感知的帮助。它能够接收…