ant design vue Notification 内容为 html

ant design vue 的 Notification 用法

notification 是用来 全局展示通知提醒信息，项目中经常用到，目前在项目中有三种用法，

1. 包括 正常文字显示，
2. 部分文字添加样式，
3. 后台返回html数据显示在notification中

实例代码如下

1.正常文字信息

openNotification() {
      this.$notification.success({
      message: '消息',
      description:
        '消息提示',
    });
    },

2.文字添加样式

this.$notification.success({
      message: '消息',
      description:
        (<span>消息 <span style="color:red">文字样式</span></span>)
    });

3.后台返回带样式的html

后台返回格式

@GetMapping ("getnotice")
    public Result getnotice() {
        ArrayList<String> strings = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            strings.add("<span>消息提示<<span style=\"color:red\">第" + i + "</span>>个通知信息!</br>课题</span>");
        }
        return new Result().success().setData(strings);
    }

前端代码

notices(){
      const h = this.$createElement;
      getnotice().then(res=>{
        console.log('res'+res)

       
        res.forEach((item) => {
          this.$notification.warn({
            title: '信息提示',
            message:
              h("div", null, [
                h("p", { domProps: { innerHTML: item } }, null),
              ])
            ,
          })
        })
      })
    },

 三种方法就是这样。

Notification类型和其他

类型：

 其他

可以看一下api,Notification 的message属性 要求的类型是String,vueNode,function

 所以其他组件的属性也是这集中类型，上边的三种方法也是可以的，比如 Message 全局提示

 写法和Notification 类似

notices(){
      const h = this.$createElement;
      getnotice().then(res=>{
        console.log('res'+res)


        res.forEach((item) => {
          this.$message.warn({

            content:
              h("div", null, [
                h("p", { domProps: { innerHTML: item } }, null),
              ])
            ,
          })
        })
      })
    },

 

以上就是 ant design vue 消息提示组件用法问题