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" 后，就解決了遮罩層的問題，可以參照下屬性說明來理解下。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動加載jquery的方法，本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等）
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等），解決方法是使用this.$forceUpdate()強制刷新，文章給大家分享了代碼案例，需要的朋友參考下吧2018-07-07
一步步教你利用webpack如何搭一個vue腳手架（超詳細講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關資料，文中有超詳細講解和注釋，對大家學習或者使用webpack具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-04-04
這篇文章主要給大家介紹了關于element中一個單選框radio時的選中和取消的相關資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue組件化通訊的實例代碼的相關資料,需要的朋友可以參考下2017-06-06
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧2018-04-04
這篇文章主要給大家介紹了關于Vue3父子組件相互調用方法的相關資料,vue中我們常常用到組件,那么組件中互相調用也是經常遇到的,需要的朋友可以參考下2023-08-08
vue中element-ui表格縮略圖懸浮放大功能的實例代碼
element-ui界面非常簡潔和美觀，提供的組件可以滿足絕大多數(shù)的應用場景，當表格中顯示了圖片的縮略圖時，想要鼠標浮動在縮略圖上時放大圖片的效果，該如何實現(xiàn)呢？下面小編通過實例代碼給大家介紹vue中element-ui表格縮略圖懸浮放大功能，一起看看吧2018-06-06