vue加載動畫element ui V-loading屬性

根據(jù)需求，由預(yù)覽按鈕打開彈窗，且彈窗需要渲染的數(shù)據(jù)較多，渲染的速度比較慢，所以要加一個加載中的效果，element ui的 v-loading屬性就正好可以解決這一需求，但是當(dāng)加入這一屬性之后發(fā)現(xiàn)，是實現(xiàn)了加載功能，但是加載并不能自己判斷何時停下，又不像其他頁面需要頁面刷新的時候出現(xiàn)加載動畫效果，所以給diglog彈窗一個加載動畫，但如何判斷他何時停下呢

 想了好幾種辦法最后想通了，在點擊彈窗的時候先給一個加載屬性為true，讓他加載，然后等請求接口賦值以后，再給他一個屬性為false關(guān)掉加載，就可以了

element-ui v-loading 指令 instance.close()報錯

解決 sentry issues 時看到一個這樣的報錯

TypeError: Cannot read properties of undefined (reading ‘close’)

報錯的代碼來自 element-plus 的 v-loading 指令, 在值變?yōu)?false 執(zhí)行 close 函數(shù)時, 示例 instance 為空導(dǎo)致的問題

原因

頁面是列表頁, 每個列表項有一個展開加載數(shù)據(jù)的 v-loading, 代碼給 v-loading 初始值傳入了 undefined, 請求數(shù)據(jù)之前給 loading 做了個初始化, 將 loading 值初始為 false

v-loading="expendStepData[item.productOrderId]?.loading"

數(shù)據(jù)從 undefined 變成 false 觸發(fā)了 v-loading 的 update, 因為值為 false, 所以 v-loading 執(zhí)行了 close 操作, 因為 loading 的值從來沒有是 true, 所以沒有創(chuàng)建實例, 導(dǎo)致 instance 為 undefined, 所以執(zhí)行 instance.close() 自然就報錯了

element-plus loading 代碼

const vLoading = {
? mounted(el, binding) {
? ? if (!!binding.value) {
? ? ? createInstance(el, binding);
? ? }
? },
? updated(el, binding) {
? ? const instance = el.instance;
? ? if (binding.oldValue !== binding.value) {
? ? ? if (binding.value) {
? ? ? ? createInstance(el, binding);
? ? ? } else {
? ? ? ? instance.close();
? ? ? }
? ? }
? },
? unmounted(el) {
? ? var _a;
? ? (_a = el == null ? void 0 : el.instance) == null ? void 0 : _a.close();
? }
};

初始值為 undefined 導(dǎo)致 mounted 的時候沒有創(chuàng)建實例, 而值從 undefined 變?yōu)?false 時, 會觸發(fā) update, 導(dǎo)致執(zhí)行 instance.close(), 這個時候 v-loading 的 instance 沒有創(chuàng)建是一個 undefined

建議

v-loading 嚴(yán)格傳入 boolean 值, 雖然大多數(shù)情況不會有問題, 即使像我這樣的情況, 其實也不影響使用, 如果不是 sentry, 估計頁沒有發(fā)現(xiàn)這個問題, 但是能避免的問題還是要避免; 我的 element-plus 時候 2.x 版本的, 不知道 3.x 是否還有這個問題 

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論