Notification 分不同实例关闭

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

// 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 高,这样就造成了无限点击 出现多个弹框问题。

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

问题解决,就到此结束啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值