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

傷城~ 2022-12-26 09:12 344阅读 0赞

### 文章目录 ###

*   *   *  效果
         *  通知内容
         *  通知主体 根据官网写法
         *  禁止面板重叠
         *  关闭
         *   *  关闭某个
             *  关闭全部

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjMDA3Y2MwMDk_size_16_color_FFFFFF_t_70]

### 通知内容 ###

*  先把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()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjMDA3Y2MwMDk_size_16_color_FFFFFF_t_70]: /images/20221120/28f79551dbf5450a9f789bee335f6212.png