全局展示操作反馈信息
全局配置:
- // 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;" },"通知内容"
- ),
- });
我这边项目传过来的数据可能参杂
,所以我封装了个公共方法:
- // 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("
"); - 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