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: '请输入用户密码'})}}}