求助各位大佬！存在多个通知提示时，鼠标悬停要求不进行计时，鼠标移开显示10s，利用notification

  • Z时代
  • 2024-03-04
  • 分类：IT

求助各位大佬！存在多个通知提示时，鼠标悬停要求不进行计时，鼠标移开显示10s，利用notification

有一个需求，我利用elementui的notification，进行弹出多条消息，我利用定位将多条信息进行了重叠在一个位置上，这样点击关闭 就会展示下一条，但是现在要求鼠标悬停时候不允许关闭。这导致因为多条消息重叠的原因，导致只有在最上面的消息 鼠标悬停计时关闭，它下面的那些消息依然计时，就导致鼠标悬停超过时长后一旦关闭最上面的消息，下面的消息因为计时超过也会消失了，有什么办法可以解决吗 ，变量needReadMessage是接口循环的，我试了终止循环，但是不行，这怎么让这一个个弹出来啊

this.needReadMessage.forEach(item => {
                            this.noticeflag = false;
                            const h = this.$createElement;
                            if (item.messageType == 3) {
                                this.$notify({
                                    title: item.messageTypeWithCluture,
                                    customClass: 'shishi',
                                    message: h('p', null, [
                                        h('span', null, item.messageContent),
                                        h(
                                            'a',
                                            {
                                                style: {
                                                    display: 'block',
                                                    cursor: 'pointer',
                                                    color: 'blue',
                                                    position: 'absolute',
                                                    right: '29px',
                                                    bottom: '3px'
                                                },
                                                on: {
                                                    click: this.clickBtn
                                                }
                                            },
                                            '查看'
                                        )
                                    ]),
                                    onClick() {
                                        _this.mesClick(item); //自定义回调,message为传的参数
                                    },
                                    onClose() {
                                        _this.closeOne();
                                    },
                                    offset: 0,
                                    duration: 10000
                                });
                            } else {
                                // 没有链接的信息不显示‘查看’
                                this.$notify({
                                    title: item.messageTypeWithCluture,
                                    customClass: 'shishi',
                                    message: h('p', null, [h('span', null, item.messageContent)]),
                                    offset: 0,
                                    duration: 10000,
                                    onClose() {
                                        _this.closeOne();
                                    }
                                });
                            }                    
                    });

回答：

当前现象的不合理之处在于，底部信息没有展示就直接消失了。
原因在于，底部信息的计时是从创建DOM开始的，正确的方式应该是从信息被展示开始计时。

了解上面两个点，矛盾就很清晰了。有两种方案：

  1. 限制弹出信息的频率，用消息队列提供缓冲，避免生产速度太快导致来不及消费。生成信息时，推入队列；当顶层信息被关闭，再弹出下一层信息。
    队列可以用数组实现，关闭消息时去数组查询剩余的消息即可。
  2. 不限制弹出信息的频率，但只有当前消息被展示时才开始计时。这里需要获取【信息在顶层展示】的状态，实现上可能有些不便。

以上是 求助各位大佬！存在多个通知提示时，鼠标悬停要求不进行计时，鼠标移开显示10s，利用notification 的全部内容， 来源链接： utcz.com/p/935775.html

回到顶部