解决vue多层弹框时存在遮挡问题
更新时间：2022年03月25日 15:11:02 作者：青小记
本文给大家介绍vue多层弹框时存在遮挡问题，解决思路首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误，下面给大家带来一种正确的思路，一起看看吧
问题：
如上图所示，当存在多层弹框时，点击黄色弹框中红色内容，弹出蓝色弹框时，出现上述情况，即表现出顶层弹框被遮挡的现象，当我们点击蓝色弹框时又会出现遮挡消失的情况，下面将对这一问题提出相应的解决办法。
解决方案：
本人解决思路，首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，从而解决不同弹框遮挡层在页面的z-index的不同，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误
正确思路：
查看组件中不同属性的作用，我使用的蓝色弹框是使用的element组件中的dialog组件，故此，通过查找该组件中的属性，发现以下三个属性跟遮挡层有关
遮挡层是必须要使用的，故此排除modal，可以通过在dialog弹框中添加modal-append-to-body或者append-to-body来测试是否能解决以上问题，如果是单层遮挡的话，使用第一个，多层遮挡的话，添加第二个，内部原因还未了解清楚，如有人了解相关问题，欢迎指导。
<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多层弹框时存在遮挡应如何解决的文章就介绍到这了,更多相关vue多层弹框遮挡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Vue2.0 事件派发与接收,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了详解Vue 如何监听Array的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了深度剖析Vue3在浏览器的运行原理，文章通过围绕主题展开相关详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
idea竟然有一个神功能很多朋友都不是特别清楚，下面小编给大家带来了在IDEA中Debug调试VUE项目的详细步骤，感兴趣的朋友一起看看吧2021-10-10
文章介绍了如何在Vue.js中获取URL参数、定义和暴露公共方法、在main.js中引入并注册到Vue实例原型,以及页面中调用这些方法,作者分享了个人经验,希望对大家有所帮助2024-12-12
这篇文章主要为大家详细介绍了vue实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
websocket实现的全双工通信,真真太香了,下面这篇文章主要给大家介绍了关于前端之vue3使用WebSocket的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue Router修改query参数url参数没有变化问题及解决
这篇文章主要介绍了Vue Router修改query参数url参数没有变化问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue3.x如何设置浏览器动态Title方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍一下vue实现在页面上添加水印的实例,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧2023-12-12
最新评论