Notification、this.$message如何设置内容为html

image.png

后端同学的接口返回HTML格式时，要求显示出来，Notification、this.$message都可以

一、Notification（显示在界面右上角） dangerouslyUseHTMLString开启支持HTML格式

const errorMsg = error.response.data.message // 获取接口返回的错误信息
Notification.error({
        dangerouslyUseHTMLString: true,
        title: '错误消息',
        message: errorMsg,
        duration: 5000
})

• 企业微信截图_17095389816726.png

二、this.$message（显示在界面上方）：在element ui 的message消息提示的组件里面有个属性dangerouslyUseHTMLString（将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。）

this.$message({
     dangerouslyUseHTMLString: true,
     message: err,
     type: 'error',
});

• image.png

注意事项:

-如果后端返回的错误信息没有换行标签<br >，要自己处理数据

let msgList = ["客户a被引用", "客户b被引用"];
// 使用html的换行标签拼接信息，默认行距太小，此处用两个<br/><br/>
let message = `${msgList.length}客户不能删除，因为<br/><br/>${msgList.join( "<br/><br/>")}`;
this.$message({
   type: "warning",
   message: message,
   // 将 message 就会被当作 HTML 片段处理
   dangerouslyUseHTMLString: true
});