快捷導(dǎo)航

vue加載動(dòng)畫element ui V-loading屬性的踩坑記錄

更新時(shí)間：2023年06月08日 16:52:24 作者：劉大氣

這篇文章主要介紹了vue加載動(dòng)畫element ui V-loading屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue加載動(dòng)畫element ui V-loading屬性

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

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

element-ui v-loading 指令 instance.close()報(bào)錯(cuò)

解決 sentry issues 時(shí)看到一個(gè)這樣的報(bào)錯(cuò)

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

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

原因

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

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

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

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 的時(shí)候沒有創(chuàng)建實(shí)例, 而值從 undefined 變?yōu)?false 時(shí), 會(huì)觸發(fā) update, 導(dǎo)致執(zhí)行 instance.close(), 這個(gè)時(shí)候 v-loading 的 instance 沒有創(chuàng)建是一個(gè) undefined

建議

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