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

本篇內(nèi)容介紹了“vue多層彈框時(shí)存在遮擋怎么解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

問(wè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ì)這一問(wèn)題提出相應(yīng)的解決辦法。

解決方案：

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

正確思路：

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

　　遮擋層是必須要使用的，故此排除modal，可以通過(guò)在dialog彈框中添加modal-append-to-body或者append-to-body來(lái)測(cè)試是否能解決以上問(wèn)題，如果是單層遮擋的話，使用第一個(gè)，多層遮擋的話，添加第二個(gè)，內(nèi)部原因還未了解清楚，如有人了解相關(guān)問(wè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>

“vue多層彈框時(shí)存在遮擋怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！