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;前言 …

高性能计算与多模态处理的探索之旅:英伟达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…

【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;以及通过例子演示如何使用这些指令进行程序调试。 一、基础 …

【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…

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

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

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)当…

宝塔部署nginx遇到的400错误和502错误

在部署express项目的过程中&#xff0c;由于我的代码有些变化&#xff0c;于是在宝塔面板上我又重新上传了一下我的项目&#xff0c;结果阴差阳错的被nginx反向代理配置不当引起的400错误request header or cokkie is too large和自己代码逻辑问题引起的502 bad gataway给绊倒了…

源码解析SpringMVC处理请求的完整流程

1.WebMvcAutoConfiguration EnableWebMvcConfiguration自动装配类负责加载SpringMVC涉及的HandlerAdapter、HandlerMapping、ExceptionHandlerExceptionResolver等。 SpringMVC利用 DispatchServlet 处理上游Tomcat的请求时,会被HandlerMapping、HandlerAdapter的相关子类分别…

vue3中computed的用法

一、完整代码 <template><div class"about"><h1>Computed的用法</h1><h3>姓:{{ person.firstName }}</h3><input type"text" v-model"person.firstName"><h3>名:{{ person.lastName }}</h3…

深度学习中的不确定性综述

领域学者&#xff1a; http://www.gatsby.ucl.ac.uk/~balaji/ 论文标题&#xff1a; A Survey of Uncertainty in Deep Neural Networks 论文链接&#xff1a; https://arxiv.org/pdf/2107.03342.pdf 概要 在过去的十年中&#xff0c;神经网络几乎遍及所有科学领域&#x…

2021年下半年 软件设计师 上午试卷(1-28)

计算机指令系统采用多种寻址方式。立即寻址是指操作数包含在指令中&#xff0c;寄存器寻址是指操作数在寄存器中&#xff0c;直接寻址是指操作数的地址在指令中。这三种寻址方式获取操作数的速度 &#xff08;1&#xff09; 。 &#xff08;1&#xff09; A. 立即寻址最快&am…

Springcloud介绍

1.基本介绍 Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用Spring Boot的开发风格做到一键启动和部署。Spring …