全局配置:
// 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;" },"通知内容"),});
3. 自定义html换行
// 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>");message.error({content: h("span",{ style: "display: inline-table;text-align: left;" },lines.map((line, index) => {return [("span", null, line),index < lines.length - 1 ? <br /> : null,];})),});
}