elementui 弹窗 显示详细信息_关于 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”中