Notification 分不同实例关闭

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

// socket 接受消息后处理回调
wsWrn.addCb('C_WRN', (data: ISocketMsg) => {const messageObj = data.dataif (data.type === 'warning') {const notifyItem: any = ElNotification({dangerouslyUseHTMLString: true,icon: 'WarningFilled',  // 图标可 自定义， 也可自带组件库iconmessage: `内容`,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 高，这样就造成了无限点击 出现多个弹框问题。

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

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