element-ui Notification重叠问题，原因及解决办法

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

  methods: {
    checkLogin: function () {
      if (this.username === '') {
        this.$notify({
          title: '提示',
          message: '请输入用户名'
        })
      }
      if (this.password === '') {
        this.$notify({
          title: '提示',
          message: '请输入用户密码'
        })
      }
    }
  }

网上查了一下，有文章指出了出现原因及解决办法，原文链接，原因大概如下

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

文章中给出的解决办法是利用vue提供的nextTick方法，确保DOM刷新后第二次通知能正确的计算高度。对于不定弹出数量的通知可以通过Promise的回调解决。

使用上述方式还是相对有点麻烦，由Promise的使用得到启发，那我是不是可以直接使用异步函数的方式呢？将代码更改如下

  methods: {
    checkLogin: async function () {
      if (this.username === '') {
        await this.$notify({
          type: 'error',
          title: '错误',
          message: '请输入用户名'
        })
      }
      if (this.password === '') {
        await this.$notify({
          type: 'error',
          title: '错误',
          message: '请输入用户密码'
        })
      }
    }
  }

解决办法

将方法定义为async异步函数，然后使用await等待执行。解决后效果如下

成功解决，并且代码简化很多