关于 ElementUI 通知组件 notification 重叠问题的解决方案

转载链接：https://blog.csdn.net/csdn_yudong/article/details/101271214

ElementUI 通知组件（notification） 多个时会重叠问题的解决方案
问题场景
问题分析
解决方案
方案一 Promise
方案二 setTimeout
解决后效果
最后 - 示例
问题场景
使用 ElementUI 时，当你在一次触发事件中，调用了两次或更多的 相同位置 的 $notify 时，这时候，弹出的通知框会重叠。
比如：

doNotify() {
this.$notify({
title: '我的通知',
message: '右下角弹出的消息',
position: 'bottom-right'
})
this.$notify({
title: '我的通知',
message: '右上角弹出的消息',
position: 'bottom-right'
})
},
1
2
3
4
5
6
7
8
9
10
11
12
或者

doNotify() {
for(let i=0; i<3; i++) {
this.$notify({
title: '我的通知呀',
message: '右下角弹出的消息',
position: 'bottom-right'
})
}
}
1
2
3
4
5
6
7
8
9
触发这个 doNotify 方法，看到的弹窗是重叠的：

问题分析
每一个通知组件在显示之前需要计算它应该显示的位置，他需要知道它前面的 通知实例 有多少个，然后进一步计算它自己应该显示的位置。（它需要计算前一个通知组件的高度，然后再加上每个通知组件之间的间距 16px）

但是就像 Vue 官网里面 所说的：Vue 在更新 DOM 时是 异步 执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

所以，在一个事件中，它不是立马生效的，它会本次事件队列完成后生效。

解决方案
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

You can use promise and setTimeout to solution

方案一 Promise
data() {
return {
notifyPromise: Promise.resolve()
}
},
methods: {
doNotify1() {
for(let i=0; i<3; i++) {
this.notifyPromise = this.notifyPromise.then(() => {
this.$notify({
title: '我的通知',
message: '右下角弹出的消息',
position: 'bottom-right'
})
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方案二 setTimeout
data() {
return {
timer: null
}
},
methods: {
doNotify2() {
for(let i=0; i<3; i++) {
this.timer = window.setTimeout(() => {
this.$notify({
title: '你的弹窗',
message: '右下角弹出的消息',
position: 'bottom-right'
})
}, 0)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18