element-plus dialog v-loading不生效問題及解決
更新時(shí)間：2023年03月30日 14:48:15 作者：K歌、之王
這篇文章主要介紹了element-plus dialog v-loading不生效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element-plus dialog v-loading不生效
使用版本
“element-plus”: “1.3.0-beta.4”
問題
el-dialog的v-loading 這樣使用沒反應(yīng)。
解決
定義ref 并使用 ElLoading.service
setup定義
const me = ref(null)
ElLoading.service({ target: me.value.dialogRef })補(bǔ)充
今天我試了下最新版本 “element-plus”: “^2.1.6”, 然后 me.value.dialogRef 獲取不到了。。。
element-plus el-dialog使用v-loading指令失效
目前解決方法是使用實(shí)例，效果是整個(gè)dialog模塊存在loading，包括header，footer，內(nèi)容和右上關(guān)閉按鈕
// html
<el-dialog v-model="dialogVisible" custom-class="demo" @opened="initDialog">1111</el-dialog>
?
// ts
const initDialog = () => {
? // 用服務(wù)生成一個(gè)el-loading實(shí)例，包括了自定義svg的指令如何在服務(wù)中使用
? let demo = ElLoading.service({ target: '.demo', text: '加載中...', background: 'rgba(122, 122, 122, 0.1)', svg: svg, 'svgViewBox': '-10, -10, 50, 50' })
? setTimeout(() => {
? ? // 延時(shí)執(zhí)行關(guān)閉，對應(yīng)dom清除，如要再使用loading，需重新生成新實(shí)例
? ? demo.close()
? }, 5000)
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue路由組件路徑如何用變量形式動(dòng)態(tài)引入
這篇文章主要介紹了vue路由組件路徑如何用變量形式動(dòng)態(tài)引入問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue中 this.$set的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue v-for直接循環(huán)數(shù)字實(shí)例
今天小編就為大家分享一篇vue v-for直接循環(huán)數(shù)字實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3 ts組合式API異常onMounted is called when&
這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue用戶長時(shí)間不操作退出到登錄頁的兩種實(shí)現(xiàn)方式
出于安全考慮，用戶長時(shí)間不操作，就回到登錄頁面，讓用戶重新登錄，本文就記錄一下實(shí)現(xiàn)這種效果的兩種方式，具有一定的參考價(jià)值，感興趣的可以了解一下2021-09-09
Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue3實(shí)現(xiàn)多層級列表的項(xiàng)目實(shí)踐
本文主要介紹了vue3實(shí)現(xiàn)多層級列表的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue $set 給數(shù)據(jù)賦值的實(shí)例
今天小編就為大家分享一篇vue $set 給數(shù)據(jù)賦值的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11