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