解決vue多層彈框時存在遮擋問題

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

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

問題：　

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

解決方案：

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

正確思路：

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

　　遮擋層是必須要使用的，故此排除modal，可以通過在dialog彈框中添加modal-append-to-body或者append-to-body來測試是否能解決以上問題，如果是單層遮擋的話，使用第一個，多層遮擋的話，添加第二個，內(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多層彈框時存在遮擋應(yīng)如何解決的文章就介紹到這了,更多相關(guān)vue多層彈框遮擋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: