在1個方法中調(diào)用兩次this.$notify方法，會出現(xiàn)通知框重疊的問題

methods: {checkLogin: function () {if (this.username === '') {this.$notify({title: '提示',message: '請輸入用戶名'})}if (this.password === '') {this.$notify({title: '提示',message: '請輸入用戶密碼'})}}}

網(wǎng)上查了一下，有文章指出了出現(xiàn)原因及解決辦法，原文鏈接，原因大概如下

$notify在計算通知的間距時，會取當(dāng)前元素的高度 item.$el.offsetHeight ，但是因為vue的異步更新隊列有緩沖機(jī)制，第一次方法調(diào)用時，并沒有更新dom，導(dǎo)致取到的高度為0，所有第二個通知只是上移了默認(rèn)的offset 16px，并沒有加上第一個通知的高度

文章中給出的解決辦法是利用vue提供的nextTick方法，確保DOM刷新后第二次通知能正確的計算高度。對于不定彈出數(shù)量的通知可以通過Promise的回調(diào)解決。

使用上述方式還是相對有點麻煩，由Promise的使用得到啟發(fā)，那我是不是可以直接使用異步函數(shù)的方式呢？將代碼更改如下

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異步函數(shù)，然后使用await等待執(zhí)行。解決后效果如下

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。