前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決辦法
背景
總覺(jué)得element-ui dialog的遮罩層邏輯有點(diǎn)晦澀，當(dāng)一個(gè)dialog內(nèi)嵌另一個(gè)dialog時(shí)，它的遮罩層卻始終只有一個(gè)，也就是下方class="v-modal"的div。
可以看到， v-modal的層級(jí)總是比dialog低一層。
問(wèn)題
當(dāng)兩層dialog為直接父子關(guān)系時(shí)， 我們可以簡(jiǎn)單的使用其屬性append-to-body, modal-append-to-body來(lái)解決問(wèn)題：
- 如，第二層dialog內(nèi)容被遮罩層覆蓋。
<el-dialog> ... <el-dialog> </el-dialog> </el-dialog>
但是，當(dāng)兩層dialog不是直接父子關(guān)系, 你可能會(huì)碰到關(guān)閉dialog2時(shí)，回到dialog1后，遮罩層消失的問(wèn)題。
推測(cè)：
- 關(guān)閉dialog時(shí)， 隱藏遮罩層的邏輯是有延遲的，可能（幾十毫秒）。
- 關(guān)閉dialog2時(shí)，element會(huì)為dialog1動(dòng)態(tài)添加一個(gè)v-modal的遮罩層。
- 在特定情況下，上述 邏輯1 會(huì)晚于 邏輯2 .， 導(dǎo)致dialog1的遮罩層消失
<el-dialog ref="dialog1"> ... <el-tab> ... <el-dialog ref="dialog2"> </el-dialog> <el-tab> </el-dialog>
解決思路
回到dialog1時(shí)， 手動(dòng)判斷 v-modal遮罩層是否存在，沒(méi)有則添加。
// 解決dialog嵌套，從第二層返回后，遮罩層消失的問(wèn)題
addModalDivIfNotExists() {
// 獲取dialog的父級(jí)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)建一個(gè)新的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添加到父級(jí)div中
parentDiv.appendChild(newModalDiv);
}
},
題外話
使用ant design vue的modal時(shí)， 似乎沒(méi)有碰到類似問(wèn)題
總結(jié)
到此這篇關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問(wèn)題解決的文章就介紹到這了,更多相關(guān)element-ui兩層dialog嵌套遮罩層消失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過(guò)程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue打包部署到springboot的實(shí)現(xiàn)示例
項(xiàng)目開(kāi)發(fā)中,一般我們都會(huì)使用SpringBoot+Vue進(jìn)行前后端開(kāi)發(fā),本文主要介紹了vue打包部署到springboot的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼實(shí)例解析
Proxy提供了強(qiáng)大的Javascript元編程,有許多功能,包括運(yùn)算符重載,對(duì)象模擬,簡(jiǎn)潔而靈活的API創(chuàng)建,對(duì)象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動(dòng)力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
Vue組件通信入門(mén)之Provide和Inject機(jī)制
這篇文章主要給大家介紹了關(guān)于Vue組件通信入門(mén)之Provide和Inject機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue組件通信具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式
這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09