建独立网站软文写作公司

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