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

ant-design-vue 是 Ant Design 的 Vue 实现，其中的 Message 组件用于显示非阻塞的通知信息。

用法

import { Message } from 'ant-design-vue';
 
// 基本用法
Message.info('这是一条信息消息');
 
// 带标题的
Message.info({ title: '标题', content: '这是一条信息消息' });
 
// 自定义时长
Message.info({ content: '自定义时长', duration: 5 });
 
// 关闭方法
const message = Message.info({ content: 'Click me to close', key: '1' });
message.then(message => {
  message.destroy();
});

内容为 HTML 片段

由于 ant-design-vue 的 Message 组件不直接支持 HTML 内容，你需要使用 Vue 的 render 函数来实现：

import { Message } from 'ant-design-vue';
 
Message.info({
  content: h => {
    return h('div', { dangerouslySetInnerHTML: { __html: '<strong>加粗文本</strong>' } });
  }
});

或者使用 v-html 指令（注意：这种方式可能会带来安全风险，仅在可信内容上使用）：

import { Message } from 'ant-design-vue';
 
Message.info({
  content: '<div v-html="htmlContent"></div>',
  onClose() {
    this.htmlContent = null;
  },
  duration: 0,
  getContainer() {
    return this.$el;
  },
  data() {
    return {
      htmlContent: '<strong>加粗文本</strong>'
    };
  }
});

请注意，使用 v-html 时需要手动关闭消息，并且设置 duration 为 0 防止自动关闭。另外，getContainer 方法用于指定挂载 Message 的 Vue 实例。