element-plus dialog v-loading不生效問題及解決
更新時間：2023年03月30日 14:48:15 作者：K歌、之王
這篇文章主要介紹了element-plus dialog v-loading不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-plus dialog v-loading不生效
使用版本
“element-plus”: “1.3.0-beta.4”
問題
el-dialog的v-loading 這樣使用沒反應。
解決
定義ref 并使用 ElLoading.service
setup定義
const me = ref(null)
ElLoading.service({ target: me.value.dialogRef })補充
今天我試了下最新版本 “element-plus”: “^2.1.6”, 然后 me.value.dialogRef 獲取不到了。。。
element-plus el-dialog使用v-loading指令失效
目前解決方法是使用實例，效果是整個dialog模塊存在loading，包括header，footer，內容和右上關閉按鈕
// html
<el-dialog v-model="dialogVisible" custom-class="demo" @opened="initDialog">1111</el-dialog>
?
// ts
const initDialog = () => {
? // 用服務生成一個el-loading實例，包括了自定義svg的指令如何在服務中使用
? let demo = ElLoading.service({ target: '.demo', text: '加載中...', background: 'rgba(122, 122, 122, 0.1)', svg: svg, 'svgViewBox': '-10, -10, 50, 50' })
? setTimeout(() => {
? ? // 延時執(zhí)行關閉，對應dom清除，如要再使用loading，需重新生成新實例
? ? demo.close()
? }, 5000)
}總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
wangEditor是一個輕量級web富文本編輯器,配置方便,使用簡單,下面這篇文章主要給大家介紹了關于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
vue是一套用于構建用戶界面的漸進式框架。接下來通過本文給大家分享Vue.js下載方式及基本概念，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了vue中axios實現數據交互與跨域問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
vue在響應頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應頭response中獲取自定義headers操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue element后臺鑒權流程分析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了vue-antd?form組件封裝全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家介紹了vue3動態(tài)綁定背景圖片實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
elementui+vue+axios實現文件上傳本地服務器
這篇文章主要為大家詳細介紹了elementui+vue+axios實現文件上傳本地服務器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
在Vue頁面中,可以使用多種方法來監(jiān)聽鍵盤按鍵,這篇文章主要為大家整理了五種常用的方法,文中的示例代碼講解詳細,需要的小伙伴可以參考下2023-10-10