使用 vue 开发，自定义 element 中 Notification 通知

项目中有一个弹窗需求，需要有按钮能够进行分别操作。如下：

查阅 elementUi 文档后，没有拿来就用的组件。直接贴代码

代码如下：

data() {
    return {
        messageArr: []
    }
},
methods: {
    setNotification(id) {
    	// id 绑定当前push通知对象，方便点击按钮时定位到索引
	    let that = this
	    const h = this.$createElement
	    const notification = this.$notify({
	       title: '提示',
	       dangerouslyUseHTMLString: true,
	       position: 'bottom-right',
	       message: h('p', null, [
	                    h(
	                        'div',
	                        {
	                            class: 'none-style'  // class 可以在style中写样式控制
	                        },
	                        [
	                            h('i', {
	                                class: 'el-icon-warning icon-error'
	                            }),
	                            h('span', '【请及时处理】案件已超时二小时')
	                        ]
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'margin-bottom-5'
	                        },
	                        [
	                            h(
	                                'span',
	                                {
	                                    class: 'margin-right-20'
	                                },
	                                '险种：'
	                            ),
	                            h('span', '这是什么东西')
	                        ]
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'margin-bottom-5'
	                        },
	                        '成立时间：' + '2023-06-20 19:00:00'
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'margin-bottom-5'
	                        },
	                        '下班时间：' + '2023-06-20 19:00:00'
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'margin-bottom-5'
	                        },
	                        '下班地点：' + '2023-06-20 19:00:00'
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'margin-bottom-5'
	                        },
	                        '私人电话：' + '17712322212'
	                    ),
	                    h(
	                        'div',
	                        {
	                            class: 'btn-right'
	                        },
	                        [
	                            h(
	                                'button',
	                                {
	                                    on: {
	                                        click: function () {
	                                            that.noDeal(id)
	                                        }
	                                    },
	                                    class: 'el-button el-button--primary el-button--small'
	                                },
	                                '处理'
	                            ),
	                            h(
	                                'button',
	                                {
	                                    on: {
	                                        click: function () {
	                                            that.otherClick(id)
	                                        }
	                                    },
	                                    class: 'el-button el-button--success el-button--small'
	                                },
	                                '查看'
	                            )
	                        ]
	                    )
	                ]),
	        duration: 0,
	        offset: 50,
	        customClass: 'reserve-notify',
	        onClose: function() {
	          that.deleteOneNotifications(id)
	        }
	      })
	      this.messageArr.push({
	        id: id,
	        notification: notification // 将该vue对象存起来为了执行close方法
	      })
    },
    otherClick(id) {
      // 查看按钮 todo
      this.noDeal(id) // 关闭该弹框
    },
    noDeal(id) { 
      // 点击处理按钮，关闭弹框，并且删除数组中对应的值
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.messageArr[index].notification.close()
        this.messageArr.splice(index, 1)
      }
    },
    deleteOneNotifications(id) { 
      // 关闭该弹框会触发的方法，只要弹框关闭就会触发
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.messageArr.splice(index, 1)
      }
    }
}

样式：

.margin-right-20 {
    margin-right: 28px;
}
.margin-bottom-5 {
    margin-bottom: 7px;
    padding-left: 8px;
}
.margin-bottom-5:first-child {
    margin-top: 8px;
}
.btn-right {
    text-align: right;
    position: relative;
    right: -80px;
}
.none-style {
    margin-left: -13px;
    margin-bottom: 10px;
    font-weight: bold;
}
.icon-error {
    color: red;
    font-size: 18px;
}