Notification 分不同实例关闭

随笔写2024-08-24 17:39

vue3使用 element-plus中的Notification 实现一个消息通知的功能。需求：，每当 socket 通知到位，系统右下角就会自动弹出一个 notification 弹框通知。对应弹框点击后，做对应推送数据的处理且关闭具体某个消息通知。（多个消息通知，到底如何处理呢！）

typescript 复制代码

// socket 接受消息后处理回调
wsWrn.addCb('C_WRN', (data: ISocketMsg) => {
    const messageObj = data.data
    if (data.type === 'warning') {
      const notifyItem: any = ElNotification({
        dangerouslyUseHTMLString: true,
        icon: 'WarningFilled',  // 图标可 自定义， 也可自带组件库icon
        message: `内容`,
        position: 'bottom-right',
        duration: 60000,
        customClass: 'notifyStyleYj', // 给定特定class  修改弹框通知样式
        onClick: async () => {
          // 点击该通知回调 
        },
        onClose: () => {
        // 关闭后 需删除对应Notification实例
          delete earlyWarningMsgStore.notifyMap[messageObj.id]
        },
      })

      if (messageObj.id) {
      // 这里的操作是 接到消息通知后，存储到缓存中 使用messageId作为弹窗的key，用来获取弹窗的实例，以对对应弹窗进行操作。
        earlyWarningMsgStore.notifyMap[messageObj.id] = notifyItem
      }
    }
  })
  // 注意：  每条数据id 是 每个不同的Notification实例。  等外部 或者其它操作处理完该 socket 通知，一定要记得关闭该实例通知.close()方法   及删除该存储实例。

还有个关键性问题就是根据需求，点击某个通知后需el-dialog 弹框中处理内容。此时消息弹框层级比 el-dialog 高，这样就造成了无限点击出现多个弹框问题。

css 复制代码

.notifyStyleYj {
  // 组件库弹框最小z-index为2000 为显示在dialog下层级设置
  z-index: 1999 !important;
  }

问题解决，就到此结束啦！