在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等待執行。解決后效果如下

成功解決，并且代碼簡化很多

總結

以上是生活随笔為你收集整理的element-ui Notification重叠问题，原因及解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。