ant design vue Message 用法以及内容为 html片段情况

ant design vue 的 Message 用法

全局展示操作反馈信息

何时使用 #

  1. 可提供成功、警告和错误等反馈信息。
  2. 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

全局配置:

// main.ts// 进行全局配置
message.config({top: `0.7rem`,//高度位置duration: 2,//提示持续时间maxCount: 1,//最大页面同时展示几条
});

项目中最常用的用法:
1、字符串

message.success("导入成功");

2、html片段

message.error({content: h("span",{ style: "display: inline-table;text-align: left;" },"通知内容"),});

我这边项目传过来的数据可能参杂<br>,所以我封装了个公共方法:

// utils.tsimport { h } from "vue";
import { message } from "ant-design-vue";
// 接口返回html字段根据<br>进行拆分处理
export function htmlToList(msg: string, type?: string) {const lines = msg.split("<br>");if (type && type == "warning") {message.warning({content: h("span",{ style: "display: inline-table;text-align: left;" },lines.map((line, index) => {return [h("span", null, line),index < lines.length - 1 ? h("br") : null,];})),});} else {message.error({content: h("span",{ style: "display: inline-table;text-align: left;" },lines.map((line, index) => {return [h("span", null, line),index < lines.length - 1 ? h("br") : null,];})),});}
}

因为ant design vue中message并不像element-plus中存在

属性,而是

所以需要借助vue3中的h函数( createVNode)去创造虚拟dom

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117102.shtml

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

相关文章

05 MIT线性代数-转置,置换,向量空间Transposes, permutations, spaces

1. Permutations P: execute row exchanges becomes PA LU for any invertible A Permutations P identity matrix with reordered rows mn (n-1) ... (3) (2) (1) counts recordings, counts all nxn permuations 对于nxn矩阵存在着n!个置换矩阵 , 2. Transpose: 2.…

【数据结构】常见复杂度习题详解 ------ 习题篇

文章目录 &#x1f4cb;前言一. ⛳️前篇回顾二. ⛳️常见时间复杂度计算举例1️⃣实例一2️⃣实例二3️⃣实例三4️⃣实例四5️⃣实例五6️⃣实例六7️⃣实例七8️⃣实例八 三. ⛳️常见空间复杂度计算举例1️⃣实例一2️⃣实例二3️⃣实例三 四. ⛳️总结 &#x1f4cb;前言 …

Spring boot 处理复杂json接收,同种类型、不同场景处理

场景&#xff1a; json大体格式一致&#xff0c;但是 ext_info 扩展字段对象&#xff0c;场景不同字段不同根据某字段类型,不同值&#xff0c;对应不同实现的 Component&#xff0c;处理不同场景这里根据 event&#xff0c;来做不同处理 {"data": {"event"…

高性能计算与多模态处理的探索之旅:英伟达GH200性能优化与GPT-4V的算力加速未来

★多模态大模型&#xff1b;GPU算力&#xff1b;LLMS&#xff1b;LLM&#xff1b;LMM&#xff1b;GPT-4V&#xff1b;GH200&#xff1b;图像识别&#xff1b;目标定位&#xff1b;图像描述&#xff1b;视觉问答&#xff1b;视觉对话&#xff1b;英伟达&#xff1b;Nvidia&#…

交换机控制在同一个网段内的终端,用hybrid接口实现不同的IP通和不通。

实验效果&#xff1a;pc1和pc2不能通&#xff0c;但pc1和pc2分别可以和pc3通。 通过这个实验可以彻底掌握数据包在交换机上的进去的类型状态。 sw1配置&#xff1a; [sw1]dis current-configuration sysname sw1 vlan batch 10 20 100 interface GigabitEthernet0/0/1 port h…

5.js关闭当前页面(窗口)的几种方式

1. 不带任何提示关闭窗口的js代码 <a href"javascript:window.openernull;window.open(,_self);window.close();">关闭</a> 2.自定义提示关闭 <script language"javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function custom_clo…

【Redis安装】Ubuntu和Centos

此处安装的是 Redis5 在 Ubuntu 系统上 切换到 root 用户下&#xff0c;su 命令切换使用 apt 可以搜索 redis 相关软件包 apt search redis使用 apt 命令安装 redis apt install redis手动修改配置文件 redis.conf cd /etc/redis/ vim redis.conf修改以下两处 重启服务器 …

chatGPT结构及商业级相似模型应用调研

GPT前言 说明 ChatGPT这项技术的历史可以追溯到2018年&#xff0c;当时由Facebook实验室的团队开发出该技术&#xff0c;以开发聊天机器人为目的。随后&#xff0c;ChatGPT在2019年由来自谷歌的DeepMind团队在国际会议ICLR上发表了论文&#xff0c;其中提出了ChatGPT的技术框架…

计算机视觉实战项目3(图像分类+目标检测+目标跟踪+姿态识别+车道线识别+车牌识别+无人机检测+A*路径规划+单目测距与测速+行人车辆计数等)

车辆跟踪及测距 该项目一个基于深度学习和目标跟踪算法的项目&#xff0c;主要用于实现视频中的目标检测和跟踪。该项目使用了 YOLOv5目标检测算法和 DeepSORT 目标跟踪算法&#xff0c;以及一些辅助工具和库&#xff0c;可以帮助用户快速地在本地或者云端上实现视频目标检测和…

GDB常用指令与调试汇总

文章目录 前言一、基础二、例子三、用gdb调试多线程程序 前言 GDB&#xff08;GNU Debugger&#xff09;是一个强大的调试工具&#xff0c;用于调试C、C等编程语言的程序。本文将介绍一些常用的GDB指令&#xff0c;以及通过例子演示如何使用这些指令进行程序调试。 一、基础 …

高流量大并发Linux TCP性能调优

最近在使用jmeter做压测&#xff0c;当jmeter的并发量高的时候发现jmeter服务器一直报错Cannot assign requested address&#xff0c; 查看了一下发现系统中存在大量处于TIME_WAIT状态的tcp端口 netstat -n | awk ‘/^tcp/ {S[$NF]} END {for(a in S) print a, S[a]}’ TIME_W…

【Web】| CSS Float (浮动)的使用方法

Float&#xff08;浮动&#xff09;概念 CSS的Float&#xff08;浮动&#xff09;&#xff0c;会使得元素向左或者向右移动&#xff0c;其它周围元素也会重新排列。 Float浮动&#xff0c;往往是用于图像&#xff0c;但它的布局一样非常有效。 元素如何浮动 元素的水平方向…

小白必看,手把手教你安装Python

目录 一&#xff0c;Python介绍 二&#xff0c;安装 Python 三&#xff0c;各种疑难杂症&#xff1a; 一&#xff0c;Python介绍 Python 是这两年来比较流行的一门编程语言&#xff0c;主要卖点是其相对简单的语法以及丰富的第三方库&#xff0c;下面我来带大家安装、配置 P…

python免杀初探

文章目录 loader基础知识loader参数介绍 evilhiding项目地址免杀方式修改加载器花指令混淆loader源码修改签名加壳远程条件触发修改ico的md5加密 loader基础知识 loader import ctypes #&#xff08;kali生成payload存放位置&#xff09; shellcode bytearray(b"shellc…

Another app is currently holding the yum lock; waiting for it to exit

Another app is currently holding the yum lock; waiting for it to exit… 报错详情&#xff1a; [rootlocalhost debug]# sudo yum makecache Loaded plugins: fastestmirror Existing lock /var/run/yum.pid: another copy is running as pid 87965. Another app is curr…

什么是1024程序员节

一年一度专属于程序员的节日“1024程序员节”要到来了&#xff0c;相信有很多的小伙伴跟我一样&#xff0c;对这个节日非常的熟悉&#xff0c;但也有一下小伙伴对这个节日非常陌生&#xff0c;没事&#xff0c;下面由我来讲解一下1024程序员节。 目录 节日背景 节日由来 社…

外网nat+nat server,内网做路由过滤,以及ppp CHAR认证 企业网搭建

作业 网络拓扑图如下所示&#xff1a; 要求&#xff1a;做适当的截图&#xff0c;表示完成相应的操作。 按照网络拓扑要求搭建网络结构&#xff0c;按照个人学号配置每个节点的IP地址&#xff0c;其中X为班级号&#xff0c;Y为学号末尾2位&#xff1b;Y1为学号末尾2位1&#…

vim程序编辑器

最近读书读完感觉没有读一样&#xff0c;所以决定写笔记记录下 vi的使用包括三种模式 一般模式 编辑模式 a&#xff0c;i&#xff0c;o&#xff0c;r&#xff0c;A,I,O,R 用来插入或者替换内容 命令行模式 &#xff1a;wq保存退出&#xff1a;wq!强制保存退出&#xf…

KekeBlog项目实战后台模块(二)(已完结)

十一、后台模块-菜单列表 菜单指的是权限菜单&#xff0c;也就是一堆权限字符串 1. 查询菜单 1.1 接口分析 需要展示菜单列表&#xff0c;不需要分页。可以针对菜单名进行模糊查询。也可以针对菜单的状态进行查询。菜单要按照父菜单id和orderNum进行排序 请求方式 请求路径…

【JAVA学习笔记】39 - final关键字

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter10/src/com/yinhai/final_ 一、final关键字基本介绍 final可以修饰类、属性、方法和局部变量&#xff0c; 在某些情况下&#xff0c;程序员可能有以下需求&#xff0c;就会使用到final 1)当…