解决ElementUi 2.16.x版本 notifycation通知框 onClose事件无法区分自动关闭还是手动关闭问题。

解决ElementUi 2.16.x版本 notifycation通知框 onClose事件无法区分自动关闭还是手动关闭问题。

项目场景：平台中要求做一个日程提醒功能，最初的构思是通过webSocket推送通知，页面弹出一个通知框，若用户忽略，即弹框自动小时候，在后台任务运行期间，每过一段时间会再次提醒。
但如果用户手动关闭了该窗口，则询问用户是否关闭此条日程的提醒任务。

---

问题描述

代码开发过程中突然发现，2.16.13版本的notification通知框，不在支持区分框体自动消失和用户手动关闭的场景。

---

解决方案：

不在采用notification自带的自动消失策略

1、关闭$notify的自动消失功能

this.$notify({
        title: '您有一条' + data.title,
        dangerouslyUseHTMLString: true,
        message:
          ' 日程开始时间：' + data.startDate + '<br/>' +
          ' 日程开始时间：' + data.endDate + '<br/>' +
          ' 日程内容：' + data.contentText,
        duration: 0 // 关闭自动消失功能
      });

2、声明onClose函数

this.notification = this.$notify({ // 将当前通知框复制给当前组件的属性，即在data中声明一个属性用来接收
        title: '您有一条' + data.title,
        dangerouslyUseHTMLString: true,
        message:
          ' 日程开始时间：' + data.startDate + '<br/>' +
          ' 日程开始时间：' + data.endDate + '<br/>' +
          ' 日程内容：' + data.contentText,
        duration: 0,
        onClose: () => {
          console.log("触发onClose")
        }
      });

此时，当前通知框只能通过手动点击通知框右上角的 ‘x’ 关闭，且会触发onClose函数。

3、声明关闭通知框函数（通过定时任务触发）

	// 关闭日程提醒函数
    notificationClose() {
      let that = this; // 此处必须将vue的this赋值给对象，因为在setTimeout中，this指向window
      setTimeout(function () {
        if (that.notification) {
          that.notification.close();
        }
      }, 5000)
    },

此时，当前通知框5秒后会自动关闭，但是请注意，此时通知框关闭后还是会触发onClose函数，所以需要我们在onClose函数中判断。

	// 首先在data中声明一个函数
	data() {
	    return {
	      isManual: true
	    }
	},
	methods: {
		// 关闭日程提醒函数
	    notificationClose() {
	      let that = this; // 此处必须将vue的this赋值给对象，因为在setTimeout中，this指向window
	      setTimeout(function () {
	        if (that.notification) {
	          that.isManual = false; // 自动关闭时，将属性值改为false
	          that.notification.close();
	        }
	      }, 5000)
	    },
	    // 创建日期提醒函数
	    scheduleRemind(data) {
	      this.notification = this.$notify({
	        title: '您有一条' + data.title,
	        dangerouslyUseHTMLString: true,
	        message:
	          ' 日程开始时间：' + data.startDate + '<br/>' +
	          ' 日程开始时间：' + data.endDate + '<br/>' +
	          ' 日程内容：' + data.contentText,
	        duration: 0,
	        onClose: () => {
	          // 此处判断 声明的属性状态
	          if (this.isManual) {
	            // 手动关闭则询问是否还需要提醒，如果不需要提醒则关闭定时任务
	            this.notification = this.$confirm('您还希望系统继续提醒您此日程吗？', '提示', {
	              distinguishCancelAndClose: true,
	              confirmButtonText: '关闭提示',
	              cancelButtonText: '继续提示'
	            })
	              .then(() => {
	                // 关闭提示后的逻辑代码
	              })
	          }
	        }
	      });
	      this.notificationClose();
	    },
    }

完美解决~~~~~~~~~~~~~~~~~~~~~~~~~~~~

附上完整代码：

// 日程提醒函数
scheduleRemind(data) {
      this.notification = this.$notify({
        title: '您有一条' + data.title,
        dangerouslyUseHTMLString: true,
        message:
          ' 日程开始时间：' + data.startDate + '<br/>' +
          ' 日程开始时间：' + data.endDate + '<br/>' +
          ' 日程内容：' + data.contentText,
        duration: 0,
        onClose: (reason) => {
          console.log(reason)
          if (this.isManual) {
            // 手动关闭则询问是否还需要提醒，如果不需要提醒则关闭定时任务
            this.notification = this.$confirm('你还希望系统继续提醒您此日程吗？', '提示', {
              distinguishCancelAndClose: true,
              confirmButtonText: '关闭提示',
              cancelButtonText: '继续提示'
            })
              .then(() => {
                let values = JSON.parse(data.taskId);
                // 关闭提示
                request({
                  url: `/api/scheduletask/${values.taskId}/Actions/Stop`,
                  method: 'put'
                })
              })
              .catch(action => {
                // 继续提示
              });
          }
        }
      });
      this.notificationClose();
    },
    // 关闭日程提醒函数
    notificationClose() {
      let that = this;
      setTimeout(function () {
        if (that.notification) {
          that.isManual = false;
          that.notification.close();
        }
      }, 5000)
    },