以实现下面的效果为示例
完整代码:
let msgList = ["数据1被引用", "数据2被引用"];
// 使用html的换行标签拼接信息,默认行距太小,此处用两个<br/><br/>
let message = `以下数据不能删除,原因是:<br/><br/>${msgList.join(
"<br/><br/>"
)}`;
this.$message({
type: "warning",
message: message,
// 将 message 就会被当作 HTML 片段处理
dangerouslyUseHTMLString: true,
duration:1200,
});
一、延长提示消息在页面停留时间,使用 duration:1200(1200是想延迟的时间,自己定义)
二、提示消息换行
核心代码为:
- 将 this.$message 的 dangerouslyUseHTMLString 属性设置为 true ,
message
就会被当作 HTML 片段处理。 - 消息的换行,通过
<br/>
实现,默认行距太小,推荐使用两个换行标签,即<br/><br/>
部分内容借鉴:element UI 中多行消息提示的实现(this.$message的换行)_el-message换行_朝阳39的博客-CSDN博客