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

问题场景

使用 ElementUI 时，当你在一次触发事件中，调用了两次或更多的 相同位置 的 $notify 时，这时候，弹出的通知框会重叠。 比如：

doNotify() {
 this.$notify({
 title: '我的通知',
 message: '右下角弹出的消息',
 position: 'bottom-right'
 })
 this.$notify({
 title: '我的通知',
 message: '右上角弹出的消息',
 position: 'bottom-right'
 })
},
复制代码

或者

doNotify() {
 for(let i=0; i<3; i++) {
 this.$notify({
 title: '我的通知呀',
 message: '右下角弹出的消息',
 position: 'bottom-right'
 })
 }
}
复制代码

触发这个 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: {
\tdoNotify1() {
\t for(let i=0; i<3; i++) {
\t this.notifyPromise = this.notifyPromise.then(() => {
\t this.$notify({ 

\t title: '我的通知',
\t message: '右下角弹出的消息',
\t position: 'bottom-right'
\t })
\t })
\t }
\t}
}
复制代码

方案二 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)
 }
 }
}
复制代码

解决后效果

最后 - 示例

关于这个问题的 复现 以及 解决的示例提供了一个 在线访问，大家可以操作一波。

写在最后

群号：806704729