vue2 elememtUI 中Notification的自定义

遇到了一个需要使用Notification， 但是Notification 内需要自定义按钮，执行各自的方法

看了elementUI的文档，Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/notification支持html和VNode

将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。设置html如下

this.$notify({
     title: '提示',
     dangerouslyUseHTMLString: true,
     position: 'top-left',
     message: `我是html测试
 带颜色的span`,
     duration: 0, // 设置0不会自动关闭
     offset: 50
})

而使用VNode，因为我内部需要用一个按钮关闭该Notification，而官方文档说

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

又是报错又是实现不了，几经波折最后搞出来了，代码如下

 

data() {
    return {
        arr: []
    }
},
methods: {
    setNotification(id) {
    const h = this.$createElement
    // 一定要写，不然报错h未定义,因为VNode是VUE的，而我们写的是JS
    var that = this
    const notification = this.$notify({
       title: '提示',
       dangerouslyUseHTMLString: true,
       position: 'bottom-right',
       message: h('p', null, [
          h('div', {
            class: 'margin-bottom-10'
          }, '提示语message'),
          h('div', {
            class: 'flex-end-center'
          }, [
            h('button', {
              on: {
                click: function() {
                  that.noDeal(id)
                }
              },
              class: 'el-button el-button--small'
            }, '暂不处理'),
            h('button', {
              on: {
                click: function() {
                  that.otherClick(id)
                }
              },
              class: 'el-button el-button--primary el-button--small'
            }, '其他点击')
          ])
        ]),
        duration: 0,
        offset: 50,
        customClass: 'reserve-notify',
        onClose: function() {
          that.deleteOneNotifications(id)
        }
      })
      this.arr.push({
        id: id,
        notification: notification // 将该vue对象存起来为了执行close方法
      })
    },
    otherClick(id) {
      this.noDeal(id) // 先关闭该弹框
      // 其他处理
    },
    noDeal(id) { // 点击不处理，关闭弹框，并且删除数组中对应的项
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr[index].notification.close()
        this.arr.splice(index, 1)
      }
    },
    deleteOneNotifications(id) { 
      // 关闭该弹框会触发的方法，只要弹框关闭就会触发，我之前写错了，进入了死循环
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr.splice(index, 1)
      }
    }
}