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.ts

import { 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

相关推荐
飞翔的佩奇24 分钟前
基于SpringBoot+MyBatis+MySQL+VUE实现的经方药食两用服务平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·经方药食两用平台
小杨同学yx1 小时前
前端三剑客之Css---day3
前端·css
星月心城2 小时前
Promise之什么是promise?(01)
javascript
二川bro2 小时前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia2 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九3 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬3 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia4 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1894 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴4 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript