需求描述

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

問題描述

在檢查文件格式是否正確之后，需要手動調(diào)用相關(guān)函數(shù)，把Notification去掉。根據(jù)官方文檔，使用this.$notify.close()并沒有起作用，并且控制臺沒有報錯。

問題分析

在控制臺打印this.$notify之后，可以進入Notification的相關(guān)函數(shù)如圖：

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

問題解決

對于本項目來說，直接調(diào)用this.$notify.closeAll()就行了。

問題拓展

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

現(xiàn)在問題來了，我調(diào)用close()函數(shù)，并且傳入兩個貌似應(yīng)該正確的參數(shù)，發(fā)現(xiàn)沒起作用：

為了防止我對id的理解有誤，我在瀏覽器中進行調(diào)試，發(fā)現(xiàn)instance（Notification的實例）里面的id確實就是我分析的那個id：

于是我再結(jié)合開發(fā)者工具中的調(diào)試工具，一步步查看notify.js里面的close()函數(shù)的代碼的執(zhí)行步驟，我發(fā)現(xiàn)，代碼都沒有問題，邏輯上也沒有問題，最后instances也通過splice函數(shù)把對應(yīng)id的Notification給剔除了，但是頁面上的Notification就是堅挺在那里沒有消失（矩形框里面是主要函數(shù)）。

以上是個人嘗試的一些分析，當(dāng)然，由于能力有限，最后也沒有解決。感興趣的大佬可以研究一下。

到此這篇關(guān)于ElementUI的this.$notify.close()調(diào)用不起作用的解決的文章就介紹到這了,更多相關(guān)Element this.$notify.close()調(diào)用=內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論