本文主要是介绍element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
以实现下面的效果为示例
完整代码:
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博客
这篇关于element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!