关于 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: {
	doNotify1() {
	  for(let i=0; i<3; i++) {
	    this.notifyPromise = this.notifyPromise.then(() => {
	      this.$notify({
	        title: '我的通知',
	        message: '右下角弹出的消息',
	        position: 'bottom-right'
	      })
	    })
	  }
	}
}

方案二 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)
    }
  }
}

解决后效果

最后 - 示例

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

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo ➹，或者手动search群号：685486827，或者 qq 扫一扫

写在最后： 约定优于配置-------软件开发的简约原则.
-------------------------------- (完)--------------------------------------

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…