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.rhkb.cn/news/164977.html

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

相关文章

nvm管理不同版本nodejs

文章目录 nvm下载卸载本地node安装nvm安装nodejsnvm查看已安装版本nvm切换nodejs版本nvm删除nodejs版本 nvm下载 nvm github下载链接 nvm 1.1.7-setup.zip&#xff1a;安装版&#xff0c;推荐使用 卸载本地node 打开cmd where node 找到上面找到的路径&#xff0c;将node.…

【广州华锐互动】利用AR进行野外地质调查学习,培养学生实践能力

在科技发展的驱动下&#xff0c;AR&#xff08;增强现实&#xff09;技术已经在许多领域中找到了应用&#xff0c;包括医疗、教育、建筑和娱乐等。然而&#xff0c;有一个领域尚未充分利用AR技术的潜力&#xff0c;那就是野外地质调查。通过将AR技术引入到这个传统上需要大量人…

基于nodejs+vue中学信息技术线上学习系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

如何使用visual studio 2010构建SQLite3.lib文件

sqlite3官网只提供了dll&#xff0c;并没有lib文件。需要自己生成sqlite3.lib。因项目升级到x64&#xff0c;以前并没有生成64位的链接库&#xff0c;需要自己创建。本人电脑操作系统windows 10, 开发环境为visual studio 2010。下面是详细生成过程。 1. 从源下载源&#xff08…

低代码助力软件开发

低代码开发工具正在日益变得强大&#xff0c;它正不断弥合着前后端开发之间的差距。对于后端来说&#xff0c;基于低代码平台开发应用时&#xff0c;完全不用担心前端的打包、部署等问题&#xff0c;也不用学习各种框架&#xff08;Vue、React、Angular等等&#xff09;&#x…

深入探究音视频开源库 WebRTC 中 NetEQ 音频抗网络延时与抗丢包的实现机制

目录 1、引言 2、什么是NetEQ&#xff1f; 3、NetEQ技术详解 3.1、NetEQ概述 3.2、抖动消除技术 3.3、丢包补偿技术 3.4、NetEQ概要设计 3.5、NetEQ的命令机制 3.6、NetEQ的播放机制 3.7、MCU的控制机制 3.8、DSP的算法处理 3.9、DSP算法的模拟测试 4、NetEQ源文件…

PHP 基础/练习

练习 成绩定级 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>成绩定级脚本</title> </…

三网话费余额查询的API系统 基于thinkphp6.0框架

本套系统是用thinkphp6.0框架开发的&#xff0c;PHP需大于8.2&#xff0c;系统支持用户中心在线查询和通过API接口对接发起查询&#xff0c;用户余额充值是对接usdt接口&#xff0c;源码全开源&#xff0c;支持懂技术的人二次开发~搭建教程1、源码上传后&#xff0c;吧运行目录…

Linux性能优化--补充

14.1. 性能工具的位置 本书描述的性能工具来源于Internet上许多不同的位置。幸运的是&#xff0c;大多数主要发行版都把它们放在一起&#xff0c;包含在了其发行版的当前版本中。表A-1描述了全部工具&#xff0c;提供了指向其原始源位置的地址&#xff0c;并注明它们是否包含在…

MIKE水动力笔记18_如何将dfsu流场模拟结果的数据导出成txt文件

本文目录 前言Step 1 前置工作Step 2 导出相应数据 前言 MIKE的模拟结果dfsu文件的数据是可以导出的&#xff0c;导出格式为xyz&#xff0c;我们也可以将其改后缀改为txt文本格式&#xff0c;其中包含了某一时刻下所有网格坐标点的数据。 Step 1 前置工作 首先&#xff0c;在…

墨水屏技术在贴片厂的创新应用探索

墨水屏技术在贴片厂的创新应用探索 随着科技的不断发展&#xff0c;墨水屏标签在各个领域的应用越来越广泛。在贴片厂&#xff0c;墨水屏标签的应用也日益增多&#xff0c;它不仅提高了生产效率&#xff0c;还降低了成本&#xff0c;提高了产品质量。本文将详细介绍墨水屏标签…

Vant和ElementPlus在vue的hash模式的路由下路由离开拦截使用Dialog和MessageBox失效

问题复现 ElementPlus&#xff1a;当点击返回或者地址栏回退时&#xff0c;MessageBox无效 <template><div>Element Plus Dialog 路由离开拦截测试</div><el-button type"primary" click"$router.back()">返回</el-button>…

【Java 进阶篇】深入了解 Bootstrap 栅格系统

在网页开发中&#xff0c;创建响应式的布局是至关重要的&#xff0c;因为不同设备和屏幕尺寸需要不同的布局来呈现内容。Bootstrap 提供了一个强大的栅格系统&#xff0c;使开发者能够轻松创建适应不同屏幕的网页布局。本文将深入介绍 Bootstrap 栅格系统&#xff0c;面向初学者…

教育课堂小程序,三分钟打造专属小程序 带完整搭建教程

大家好哇&#xff0c;今天来给大家分享一款教育课堂小程序。现如今&#xff0c;线上教育已经普及&#xff0c;在大学课堂里&#xff0c;老师尝尝是使用各种各样的学习APP进行点名&#xff0c;签到&#xff0c;答题&#xff0c;考试等等&#xff0c;相较于传统的APP来说&#xf…

搞一个生成modbus报文的CRC校验码的可视化工具

用python搞个可视化界面&#xff1a; # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QLabel, QLineEdit, QPushButton, QMessageBox# 生成 Modbus 格式的 CRC 校验码 def crc16_modbus(data):crc 0xFFFFfor byte in data:crc …

Day3 Qt

作业 1. 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中 如果账号和密码不…

WPF中在MVVM模式下实现导航功能

WPF中在MVVM模式下实现导航功能 一、利用TabControl 使用场景&#xff1a;项目小&#xff0c;不用考虑内存开销的问题。 实现方式1-手动指定ViewModel 分别定义3个UserControl作为View用于演示 <UserControl...><Grid><StackPanel Orientation"Vertic…

【JAVA】日志打印java.util.logging.*函数自定义格式,并且显示调用时行号

1、JAVA自带的这样&#xff1a; 代码如下&#xff1a; import java.util.logging.*; Logger logger Logger.getLogger(MyLogger.class.toString()); logger.info("123");显示效果&#xff1a; 这样的格式&#xff0c;看起来不太好看&#xff0c;比如&#xff1a;会…

Java项目-网页聊天程序

目录 项目介绍 项目功能简介 项目创建 用户管理模块 1.数据库设计及代码实现 2.前后端交互接口的设计 3.服务器代码开发 好友管理模块 数据库设计 好友表设计的两个重要问题 设计前后端交互接口 服务器代码 会话管理模块 会话的数据库设计 获取会话信息 约定前后…

开启Linux之旅:用VMware安装CentOS7

最近我的阿里云服务器到期了&#xff0c;不想续费&#xff0c;所以就深入研究了一下虚拟机搭建Linux系统&#xff0c;感觉还不错&#xff0c;所以在这篇博客中分享一下。下面我将带领大家开启全新的Linux之旅&#xff0c;用VMware安装CentOS 7&#xff0c;具体操作步骤如下所示…