快捷導(dǎo)航

解決vue多層彈框時(shí)存在遮擋問題

更新時(shí)間：2022年03月25日 15:11:02 作者：青小記

本文給大家介紹vue多層彈框時(shí)存在遮擋問題，解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽，然后修改z-index值，但是本思路只能解決首次問題，再次打開還會(huì)存在相同的問題，故該思路錯(cuò)誤，下面給大家?guī)硪环N正確的思路，一起看看吧

問題：　

如上圖所示，當(dāng)存在多層彈框時(shí)，點(diǎn)擊黃色彈框中紅色內(nèi)容，彈出藍(lán)色彈框時(shí)，出現(xiàn)上述情況，即表現(xiàn)出頂層彈框被遮擋的現(xiàn)象，當(dāng)我們點(diǎn)擊藍(lán)色彈框時(shí)又會(huì)出現(xiàn)遮擋消失的情況，下面將對(duì)這一問題提出相應(yīng)的解決辦法。

解決方案：

本人解決思路，首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽，然后修改z-index值，從而解決不同彈框遮擋層在頁面的z-index的不同，但是本思路只能解決首次問題，再次打開還會(huì)存在相同的問題，故該思路錯(cuò)誤

正確思路：

查看組件中不同屬性的作用，我使用的藍(lán)色彈框是使用的element組件中的dialog組件，故此，通過查找該組件中的屬性，發(fā)現(xiàn)以下三個(gè)屬性跟遮擋層有關(guān)

　　遮擋層是必須要使用的，故此排除modal，可以通過在dialog彈框中添加modal-append-to-body或者append-to-body來測(cè)試是否能解決以上問題，如果是單層遮擋的話，使用第一個(gè)，多層遮擋的話，添加第二個(gè)，內(nèi)部原因還未了解清楚，如有人了解相關(guān)問題，歡迎指導(dǎo)。

<el-dialog
  title="提示"
  append-to-body  
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>這是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

到此這篇關(guān)于vue多層彈框時(shí)存在遮擋應(yīng)如何解決的文章就介紹到這了,更多相關(guān)vue多層彈框遮擋內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解Vue2.0 事件派發(fā)與接收
這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
詳解Vue 如何監(jiān)聽Array的變化
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
深度剖析?Vue3?在瀏覽器的運(yùn)行原理
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運(yùn)行原理，文章通過圍繞主題展開相關(guān)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
idea竟然有一個(gè)神功能很多朋友都不是特別清楚，下面小編給大家?guī)砹嗽贗DEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟，感興趣的朋友一起看看吧
2021-10-10
vue如何獲取參數(shù)方法的封裝
文章介紹了如何在Vue.js中獲取URL參數(shù)、定義和暴露公共方法、在main.js中引入并注冊(cè)到Vue實(shí)例原型,以及頁面中調(diào)用這些方法,作者分享了個(gè)人經(jīng)驗(yàn),希望對(duì)大家有所幫助
2024-12-12
vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
前端之vue3使用WebSocket的詳細(xì)步驟
websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決
這篇文章主要介紹了Vue?Router修改query參數(shù)url參數(shù)沒有變化問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3.x如何設(shè)置瀏覽器動(dòng)態(tài)Title方法
這篇文章主要介紹了Vue3.x如何設(shè)置瀏覽器動(dòng)態(tài)Title方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實(shí)現(xiàn)在頁面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來看看吧
2023-12-12