vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
更新時(shí)間：2024年02月29日 09:47:55 作者：DamonREN
這篇文章主要介紹了vue使用多級彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
場景
結(jié)果列表按鈕對應(yīng)了一個(gè)結(jié)果列表彈窗，頁面中每條結(jié)果后又有下載和查看結(jié)果按鈕，查看結(jié)果按鈕很明顯由對應(yīng)一個(gè)彈窗頁面。
因此這屬于多級彈窗（使用的是Dialog）
當(dāng)出現(xiàn)第一級彈窗時(shí)，可以正常關(guān)閉開啟；
當(dāng)出現(xiàn)第二級彈窗后，第二級彈窗打開后就無法關(guān)閉，很明顯是出現(xiàn)了蒙版遮罩問題。
效果演示
（圖二完全置灰，無法點(diǎn)擊任何按鈕）
解決方案
出現(xiàn)蒙版遮罩和層級肯定是有關(guān)，但是嘗試設(shè)置z-index沒有任何效果。
查看https://element.eleme.io/#/zh-CN/component/dialog官網(wǎng)Dialog對話框參數(shù)中有：
這兩個(gè)屬性是關(guān)于遮罩層問題的
添加 :append-to-body="true" 后，就解決了遮罩層的問題，可以參照下屬性說明來理解下。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何使用ztree,包括配置package.json，自動加載jquery的方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等）
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁面刷新問題（v-for循環(huán)值刷新等），解決方法是使用this.$forceUpdate()強(qiáng)制刷新，文章給大家分享了代碼案例，需要的朋友參考下吧2018-07-07
一步步教你利用webpack如何搭一個(gè)vue腳手架（超詳細(xì)講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個(gè)vue腳手架的相關(guān)資料，文中有超詳細(xì)講解和注釋，對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3新特性之在Composition API中使用CSS Modules
這篇文章主要介紹了Vue3新特性之在Composition API中使用CSS Modules,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue組件通信傳遞數(shù)據(jù)的三種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
element中一個(gè)單選框radio時(shí)的選中和取消代碼詳解
這篇文章主要給大家介紹了關(guān)于element中一個(gè)單選框radio時(shí)的選中和取消的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧2018-04-04
這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下2023-08-08
vue中element-ui表格縮略圖懸浮放大功能的實(shí)例代碼
element-ui界面非常簡潔和美觀，提供的組件可以滿足絕大多數(shù)的應(yīng)用場景，當(dāng)表格中顯示了圖片的縮略圖時(shí)，想要鼠標(biāo)浮動在縮略圖上時(shí)放大圖片的效果，該如何實(shí)現(xiàn)呢？下面小編通過實(shí)例代碼給大家介紹vue中element-ui表格縮略圖懸浮放大功能，一起看看吧2018-06-06