前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法
更新時間：2024年08月30日 10:13:41 作者：道著無為法自然
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法,需要的朋友可以參考下
背景
總覺得element-ui dialog的遮罩層邏輯有點晦澀，當(dāng)一個dialog內(nèi)嵌另一個dialog時，它的遮罩層卻始終只有一個，也就是下方class="v-modal"的div。
可以看到， v-modal的層級總是比dialog低一層。
問題
當(dāng)兩層dialog為直接父子關(guān)系時， 我們可以簡單的使用其屬性append-to-body, modal-append-to-body來解決問題：
- 如，第二層dialog內(nèi)容被遮罩層覆蓋。
<el-dialog> ... <el-dialog> </el-dialog> </el-dialog>
但是，當(dāng)兩層dialog不是直接父子關(guān)系, 你可能會碰到關(guān)閉dialog2時，回到dialog1后，遮罩層消失的問題。
推測：
- 關(guān)閉dialog時， 隱藏遮罩層的邏輯是有延遲的，可能（幾十毫秒）。
- 關(guān)閉dialog2時，element會為dialog1動態(tài)添加一個v-modal的遮罩層。
- 在特定情況下，上述 邏輯1 會晚于 邏輯2 .， 導(dǎo)致dialog1的遮罩層消失
<el-dialog ref="dialog1"> ... <el-tab> ... <el-dialog ref="dialog2"> </el-dialog> <el-tab> </el-dialog>
解決思路
回到dialog1時， 手動判斷 v-modal遮罩層是否存在，沒有則添加。
// 解決dialog嵌套，從第二層返回后，遮罩層消失的問題
addModalDivIfNotExists() {
// 獲取dialog的父級div
const parentDiv = this.$refs.parentDiv;
// 獲取dialog
const dialog = this.$refs.dialog
// 檢查是否已存在class為"v-modal"的div
const existingModalDiv = parentDiv.querySelector('.v-modal');
if (!existingModalDiv) {
// 如果不存在，則創(chuàng)建一個新的div
const newModalDiv = document.createElement('div');
newModalDiv.classList.add('v-modal');
// 設(shè)置z-index
const parentZIndex = dialog.$el.style.zIndex
newModalDiv.style.zIndex = Number(parentZIndex) - 1
// 將新的div添加到父級div中
parentDiv.appendChild(newModalDiv);
}
},
題外話
使用ant design vue的modal時， 似乎沒有碰到類似問題
總結(jié)
到此這篇關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問題解決的文章就介紹到這了,更多相關(guān)element-ui兩層dialog嵌套遮罩層消失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了Vue監(jiān)測數(shù)據(jù)的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2021-10-10
這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue-cropper組件實現(xiàn)圖片切割上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
Vue項目之ES6裝飾器在項目實戰(zhàn)中的應(yīng)用
作為一個曾經(jīng)的Java?coder,當(dāng)?shù)谝淮慰吹絡(luò)s里面的裝飾器Decorator,就馬上想到了Java中的注解,當(dāng)然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項目之ES6裝飾器在項目實戰(zhàn)中應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了Vue3?中有場景是?reactive?能做而?ref?做不了的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
基于Vue2x實現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧,非常不錯，具有一定的參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04