element-ui this.$notify使用html作为内容 包括事件 禁止面板重叠 关闭面板
·
效果

通知内容
- 先把notify面板要显示的内容组织好 语法很容易看懂
const h = this.$createElement
const hrender = h('p', null, [
h('div', [
h('div',title), // 传变量
h('div',content),
h('div',author),
h('div',time),
], null),
h('button', {
class: '样式',
// 点击事件
// on:{
// click:this.doSth(parameters) // 不能传参,否则会自动执行
// }
}, "做事情"),
])
通知主体 根据官网写法
this.$notify({
title: '提示',
dangerouslyUseHTMLString: true,
message: hrender,
type: 'warning',
position: 'bottom-right',
duration: 0,
// showClose: false,
onClick: () => {
this.toApproval(approvalQuery)
},
onClose: () => {
console.log(`Notify已关闭,说明异常或已查看`)
}
})
禁止面板重叠
- 批量生成notify面板会重叠在一起
- 定义
data() {
return {
notifyPromise: Promise.resolve(),
... ...
- 使用箭头函数
this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{ // 禁止重叠
this.$notify({
... ...
})
关闭
关闭某个
const instance = this.$notify({
... ...
instance.close()
关闭全部
this.$notify.closeAll()
更多推荐

所有评论(0)