ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

ant-design-vue Message 用法以及内容为 html片段情况

2026/9/16 5:24:07 拓冰建站 浏览量
ant-design-vue Message 用法以及内容为 html片段情况

全局配置:


// 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换行

import { message } from "ant-design-vue";
// 接口返回html字段根据<br>进行拆分处理
export function htmlToList() {let msgList = ['11111111111111111','22222222222222']this.$message.error({content: h('div',{ style: 'display:inline-table;text-align:left;vertical-align: top;' },msgList.map((line, index) => {return [('div',{ style: 'display:inline-table;text-align:left;vertical-align: top;' },line),index < msgList.length - 1 ? <br /> : null]}))})
}