Notification 分不同实例关闭

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;
  }

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

相关推荐
吴鹰飞侠3 分钟前
AJAX的学习
前端·学习·ajax
JNU freshman9 分钟前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼13 分钟前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js
落一落,掉一掉16 分钟前
第十二周 waf绕过和前端加密绕过
前端
Asort17 分钟前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
Coffeeee25 分钟前
Labubu很难买?那是因为还没有用Compose来画一个
前端·kotlin·android jetpack
我是日安26 分钟前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼28 分钟前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript
LRH28 分钟前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
用户34216749055230 分钟前
Java高手速成--吃透源码+手写组件+定制开发教程
前端·深度学习