vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
更新時間：2024年02月29日 09:47:55 作者：DamonREN
這篇文章主要介紹了vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
場景
結(jié)果列表按鈕對應(yīng)了一個結(jié)果列表彈窗，頁面中每條結(jié)果后又有下載和查看結(jié)果按鈕，查看結(jié)果按鈕很明顯由對應(yīng)一個彈窗頁面。
因此這屬于多級彈窗（使用的是Dialog）
當(dāng)出現(xiàn)第一級彈窗時，可以正常關(guān)閉開啟；
當(dāng)出現(xiàn)第二級彈窗后，第二級彈窗打開后就無法關(guān)閉，很明顯是出現(xiàn)了蒙版遮罩問題。
效果演示
（圖二完全置灰，無法點擊任何按鈕）
解決方案
出現(xiàn)蒙版遮罩和層級肯定是有關(guān)，但是嘗試設(shè)置z-index沒有任何效果。
查看https://element.eleme.io/#/zh-CN/component/dialog官網(wǎng)Dialog對話框參數(shù)中有：
這兩個屬性是關(guān)于遮罩層問題的
添加 :append-to-body="true" 后，就解決了遮罩層的問題，可以參照下屬性說明來理解下。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用Google地圖的實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果的示例
這篇文章主要介紹了vue實現(xiàn)錄音功能js-audio-recorder帶波浪圖效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。這篇文章主要介紹了Vue表單實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
最近找到幾個好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要給大家介紹了關(guān)于vue三種模糊查詢方式的相關(guān)資料,在vue中模糊搜索主要是用computed屬性實現(xiàn),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Element-UI 使用el-row 分欄布局的教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
element帶輸入建議el-autocomplete的使用
本文主要介紹了element帶輸入建議el-autocomplete的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了vue阻止重復(fù)請求實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個非常重要的插件,它允許我們實現(xiàn)頁面間的導(dǎo)航,然而,僅僅實現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進(jìn)行各種操作,本文將結(jié)合實際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下2024-12-12