elementui notification队列中删除指定位置通知实例

发现问题

最近开发electron项目时,需要使用一个通知队列来显示通知,并且能够根据下标位置关闭对应位置的通知。同时,我们要删除指定位置下存在的通知实例以减少内存占用。

分析问题

  • 根据elementui官网所示调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 close 方法。
  • 根据此网站描述,我们必须根据通知的ID来关闭通知。

由以上两个条件可知,我们需要能够访问通知队列的某一个通知,同时能够删除它,使他不占用内存,仅仅是对象是不够的,因此,我采用的是数组和对象结合的方法。

解决问题

  1. 创建两个数组,notificationIdListnotificationList分别用来保存通知的Id和通知实例
  2. 假设我们要指定删除通知的位置是3,即i = 3
  3. 添加通知实例:首先创建一个通知实例,定义一个临时对象n,对临时对象赋值:n[notify.id] = notify,将这个临时对象n添加到notificationList数组中,将notify.id添加到notificationIdList数组中
  4. 删除通知实例:首先根据i,从notificationIdList找到对应位置的notify.id,并将其临时保存到notifyId变量中,其次再通过i,从notificationList中找到对应位置的通知实例(item),通过item['notifyId'].close()的方式关闭该位置下的通知
  5. 最后根据i,使用数组的splice方法进行删除,达到目的。

代码展示

			// 删除通知
			deleteNotification(){

                let i = 3
                let m = 0
                let notifyId = ''
                this.notificationIdList.forEach(item => {
                    if(i === m){
                        // 找到对应项的通知id
                        notifyId = item
                    }
                    m ++
                })
                this.notificationIdList.splice(i, 1)
                let j = 0
                this.notificationList.forEach(item => {
                    if( i === j){
                        item[notifyId].close()
                    }
                    j ++
                })
                this.notificationList.splice(i, 1)
                console.log(this.notificationList)
            },
            // 添加通知
            addNotification(){

                let notify = this.$notify.info({
                    title: '远程消息',
                    message: '111',
                    duration: 0
                })
                let n = {}
                n[notify.id] = notify
                this.notificationList.push(n)
                this.notificationIdList.push(notify.id)
                console.log(this.notificationList)
            },

效果图展示

添加通知后
添加后
删除通知后

删除后

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值