element-ui Notification重叠问题，原因及解决办法(原文有部分错误，已订正)

╰半橙微兮° 2023-06-12 13:29 16阅读 0赞

# 场景 #

在1个方法中调用两次this.$notify方法，会出现通知框重叠的问题

代码

testNotify() {
          this.$notify({
            title: "提示",
            message: '1111',
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
          this.$notify({
            title: "提示",
            message: '2222',
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
        },
    复制代码

结果：

![format_png][]

第二个通知会覆盖到第一个通知上边，并没有隔开间距

# 代码分析 #

查看了notify的源码，找到了原因

let verticalOffset = options.offset || 0;
      instances.filter(item => item.position === position).forEach(item => {
        verticalOffset += item.$el.offsetHeight + 16;
      });
      verticalOffset += 16;
      instance.verticalOffset = verticalOffset;
    复制代码

计算通知的间距时，会取当前元素的高度 item.$el.offsetHeight ，但是因为vue的异步更新队列有缓冲机制，第一次方法调用时，并没有更新dom，导致取到的高度为0，所有第二个通知只是上移了默认的offset 16px，并没有加上第一个通知的高度 [vue 异步更新队列文档][vue]

# 解决办法 #

## 有局限的解决办法 ##

最简单的解决办法就是使用vue提供的nextTick方法，将上述代码改为如下：

testNotify() {
          this.$notify({
            title: "提示",
            message: "1111",
            dangerouslyUseHTMLString: true,
            duration: 0,
            position: "bottom-right"
          });
          this.$nextTick(() => {
            this.$notify({
              title: "提示",
              message: "2222",
              dangerouslyUseHTMLString: true,
              duration: 0,
              position: "bottom-right"
            });
          });
        },
    复制代码

第一次通知调用完之后，在nextTick的回调函数中执行第二次通知的调用，保证第一次通知的dom更新之后，在执行第二次通知的代码，此时通知的高度就会计算正确 如图：

![format_png 1][]

这种解决方法有很大的局限性，实际业务场景中同时弹出的通知数量是不确定的，如果是三个、四个时该怎么写？回调函数套回调函数么？？

## 推荐解决办法 ##

由于对Promise理解的也不是很透彻，折腾了一下午算是想了个通用点的解决办法

data(){
        return {
         notifyPromise:Promise.resolve()   
        }
    },
    methods:{
           //通知，解决element-ui，同时调用notify时，通知重叠的问题
        notify(msg) {
              this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{
                this.$notify({
                  title: "提示",
                  message: msg,
                  dangerouslyUseHTMLString: true,
                  duration: 0,
                  position: "bottom-right"
                });
             })
        },
        testNotify(){
            this.notify(111);
            this.notify(222);
            this.notify(333);
            this.notify(444);
        }
    }

注意：this.$nextTick()不传回调函数时返回的是个Promise

执行testNotify方法后，1条或任意多条通知显示都正常，如图：

![format_png 2][]

如果哪位同学有更好的解决方法，请评论留言，谢谢

# tips #

本来想给element-ui提个issue，但是他们的github上要求在jsfiddle上创建重现的链接，但是我打不开jsfiddle的网站，只好作罢。。

哪位同学方便的话，请顺手提交一下issue，希望后续的版本能直接支持这种场景

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8zLzEyLzE2OTcxZWNkNmU1MDdiMDY?x-oss-process=image/format,png
[vue]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8zLzEyLzE2OTcxZmJiMzYxNmU1ZWM?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8zLzEyLzE2OTcyMTAzMzZlOGMyMzM?x-oss-process=image/format,png