vant 1 6X 版本 Toast 單例問題

在專案中使用 toast 發現不是 vant 官方所說的預設單例模式

1、操作

在 created 中多次呼叫 toast.loading() 發現生成了多個 toast 元素

使用 toast.clear() 只能關掉乙個

toast.loading 以及 toast.clear 封裝

vue.prototype.$loading = msg => )

}vue.prototype.$close = () => 

created() ,

methods: catch (e) finally }}

瀏覽器頁面建立了多個 toast 元素

1.1 根據註冊**，可以看出，toast.loading 實際還是呼叫了 toast 本身

var createmethod = function createmethod(type) , parseoptions(options)));

};};// 註冊 loading 方法
['loading', 'success', 'fail'].foreach(function (method) );

可以看到主要是以 createinstance 來實現建立 toast

function toast(options)

這裡使用!queue.length || multiple || !isindocument(queue[0].$el)作為判斷條件來實現 單例模式

!queue.length 若建立的 toast 列表中，長度為 0，則可進入建立邏輯

multiple 若支援建立多個 toast ，則可進入建立邏輯
!isindocument(queue[0].$el) 若在頁面 body 中，檢測不到 toast 元素，則可進入建立邏輯

// vant 1.6.16

// vant/es/toast/index.js
function createinstance() ;
}if (!queue.length || multiple || !isindocument(queue[0].$el)) );
queue.push(toast);
}return queue[queue.length - 1];
} // transform toast options to popup props
// vant/es/utils/index.js
export function isindocument(element) 

根據輸出條件，判定是!isindocument(queue[0] && queue[0].$el)為 true 造成邏輯命中，進入了建立邏輯

該語句表示若在頁面 body 中不存在 toast 元素，則為 true

說明判斷是不存在 toast ，但是前面確實已經建立了乙個 toast

1.4 那麼為什麼呢？

在條件語句下面 加入 debugger 語句，進行斷點除錯:

1、執行建立一次 toast 之後，第二次進入建立邏輯，在 console 控制台 列印 queue
2、此時 queue 中只有乙個元素，是 vue 元件物件，開啟 裡面的 $el 發現不是乙個 dom 物件
且此時頁面空白，說明還未掛載
3、這時候執行 document.body.contains(element) 肯定會返回 false
因為我們在 created 中呼叫 toast.loading , 此時元件還沒被掛載， toast 元素還沒有插入到 dom 中，問題出在這裡
toast.clear 的時候若傳入引數為 true，則關閉所有的 toast
若不支援建立多個，則關閉 toast 列表中的第乙個 toast
toast.clear = function (all) );

queue = ;
} else if (!multiple) else 
}};
知道問題是因為元件未掛載造成條件判斷問題，因而建立了多個 toast 例項

那麼相應的解決方法有兩個
1、不在 created 中進行 loading 操作，或者不多於一次 loading 操作

2、toast.clear() 方法，加入 true 引數： toast.clear(true)，關閉所有的 toast 例項
因為歷史原因，專案使用的是 vant 1.6x 的版本

發現 vant 有 bug 還想去提個 pr 或者 issue
但是檢視了 vant 2.x 版本已經修復了這個問題
其實就是去掉了上面那個 isindocument 方法判斷
// vant 2.2.16

function createinstance() ;
}// 此處去掉了 1.6x 版本中 isindocument 導致的問題
if (!queue.length || multiple) );
toast.$on('input', function (value) );
queue.push(toast);
}return queue[queue.length - 1];
} // transform toast options to popup props
 
Django 1 x版本與2 x版本 區別
匯入的模組是 from django.conf.urls import url urlpatterns中url對應的是正規表示式，如下 from django.conf.urls import url,include from django.contrib import admin urlpatte...
VMWare簡介（15 x版本）
這是一款執行在windows系統上的虛擬機器軟體，可以虛擬出一台計算機硬體，方便安裝各類作業系統。如windows macos linux unix等等 可以在一台windows電腦上虛擬出x86電腦硬體，用來安裝各種作業系統，整個流程和真實電腦一樣。vmtools則類似各種硬體驅動，安裝後可以極大...
Tomcat8 x版本優化
作業系統版本 tomcat版本 iprhel 7.x 8.x172.21.3.220 首先要執行之前配置的tomcat執行緒池 catalina opts dfile.encoding utf 8 server xms2048m xmx2048m xmn1024m xx permsize 256m ...