vue点击关闭遮罩层,

　　本文介绍了vue多层弹盒的遮挡问题。解决这个问题的第一个思路是找到对应遮挡层的css标签，然后修改z-index值。但这种思路只能解决第一个问题，再次打开时同样的问题依然会存在，所以这种思路是错误的。让我们一起来看看吧。

问题：

　　如上图所示，当有多个弹框时，点击黄色弹框中的红色内容，弹出蓝色弹框，表示最上面的弹框被屏蔽。当我们单击蓝色的子弹框时，阻挡再次消失。在这里，我们将针对这个问题提出相应的解决方案。

　　我的解决方法，首先是找到对应屏蔽层的css标签，然后修改z-index值，从而解决页面上不同弹性框架屏蔽层的z-index的差异。但这种思路只能解决第一个问题，再次打开时同样的问题依然会存在，所以这种思路是错误的。

　　再看组件中不同属性的功能，我用的蓝色子弹框就是我用的元素组件中的对话框组件。所以通过查找这个组件中的属性，我发现以下三个属性与遮挡层有关。

　　必须使用层，所以可以排除模态。可以通过在对话框中添加modal-append-to-body或append-to-body来测试是否可以解决上述问题。如果是单层底纹，就用第一种。如果是多层底纹，加第二层。内部原因尚不清楚。如果有人知道相关问题，请给我们你的指导。

　　el对话

　　Title=提示

　　附加到正文

　　:visible.sync=dialogVisible

　　宽度=30%

　　:before-close=handleClose

　　这是一条信息

　　span slot=页脚 class=对话框-页脚

　　El-button @ click= dialog visible=false 取消/el-button

　　El-button type= primary @ click= dialog visible=false OK/El-button

　　/span

　　/el-dialog

　　关于如何解决vue多层弹框遮挡的这篇文章到此为止。有关vue多层项目符号帧遮挡的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。