需求描述

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

問題描述

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

問題分析

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

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

問題解決

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

問題拓展

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

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

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

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

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

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

最新評論