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) // 不能传参，否则会自动执行
            // }
          }, "做事情"),
          ])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

通知主体 根据官网写法

	this.$notify({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: hrender,
            type: 'warning',
            position: 'bottom-right',
            duration: 0,
            // showClose: false,
            onClick: () => {
              this.toApproval(approvalQuery)
            },
            onClose: () => {
              console.log(`Notify已关闭，说明异常或已查看`)
            }
          })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

禁止面板重叠

• 批量生成notify面板会重叠在一起
• 定义

data() {
      return {
        notifyPromise: Promise.resolve(),
... ...
1
2
3
4

• 使用箭头函数

this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{ // 禁止重叠
	this.$notify({
	... ...
})
1
2
3
4

关闭

关闭某个

const instance = this.$notify({
... ...
instance.close()
1
2
3

关闭全部

this.$notify.closeAll()
1