
element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
以实现下面的效果为示例
完整代码:
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博客




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:7 个月前 )
c345bb45
11 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 11 个月前
更多推荐
所有评论(0)