ElementUI的this.$notify.close()調用不起作用的解決

需求描述

項目首先要用戶選擇某個問題，選擇之後使用ElementUI的Notification組件提示用戶正在對文件格式進行檢查（需要先提交給後端，交給後端檢查，再返回結果給前端）。如果格式檢查無誤，則關閉Notification，彈出一個MessageBox（也是ElementUI的組件），告知用戶上傳文件之後不可撤銷。

問題描述

在檢查文件格式是否正確之後，需要手動調用相關函數，把Notification去掉。根據官方文檔，使用this.$notify.close()並沒有起作用，並且控制臺沒有報錯。

問題分析

在控制臺打印this.$notify之後，可以進入Notification的相關函數如圖：

在代碼中，我們可以看到Notification內部封裝瞭哪些函數，其中就包含close()函數，該函數需要兩個參數，id和userOnClose。查看代碼不難看出，id就是Notification的id，比如存在多個Notification的時候，可以選擇性的關閉；userOnClose可以傳入一個函數，有一點兒像回調函數。因此，想要使用close()這個函數，必須知道想要關閉的那個Notification的id，文末再簡單探討。
往下看代碼，可以看到有一個closeAll()函數，該函數不需要傳入任何參數，並且通過遍歷將所有Notification都關閉，適用於本項目的情景（隻有一個Notification需要關閉）。

問題解決

對於本項目來說，直接調用this.$notify.closeAll()就行瞭。

問題拓展

主要就是對於有多個Notification，想要關閉其中一個怎麼辦？我嘗試去理解notify.js，發現id基本上是notification_seed這樣的模式，即notification_字符串加上一個數字組成的字符串。查看源碼，發現初始seed為1，也就是第一個實例化的Notification的id就應該是notification_1。如圖：

現在問題來瞭，我調用close()函數，並且傳入兩個貌似應該正確的參數，發現沒起作用：

為瞭防止我對id的理解有誤，我在瀏覽器中進行調試，發現instance（Notification的實例）裡面的id確實就是我分析的那個id：

於是我再結合開發者工具中的調試工具，一步步查看notify.js裡面的close()函數的代碼的執行步驟，我發現，代碼都沒有問題，邏輯上也沒有問題，最後instances也通過splice函數把對應id的Notification給剔除瞭，但是頁面上的Notification就是堅挺在那裡沒有消失（矩形框裡面是主要函數）。

以上是個人嘗試的一些分析，當然，由於能力有限，最後也沒有解決。感興趣的大佬可以研究一下。

到此這篇關於ElementUI的this.$notify.close()調用不起作用的解決的文章就介紹到這瞭,更多相關Element this.$notify.close()調用=內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

• 淺談element的$notify註意點
• Vue之vue.$set()方法源碼案例詳解
• 利用vue3仿蘋果系統側邊消息提示效果實例
• Vue前端整合Element Ui的教程詳解
• JS刪除數組中某個元素的四種方式總結