ant design vue 的 Message 用法
全局展示操作反馈信息
何时使用 #
- 可提供成功、警告和错误等反馈信息。
- 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。
全局配置:
// 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