vue多层弹框时存在遮挡代码解决方法

本篇文章小编给大家分享一下vue多层弹框时存在遮挡代码解决方法，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

问题：　

如上图所示，当存在多层弹框时，点击黄色弹框中红色内容，弹出蓝色弹框时，出现上述情况，即表现出顶层弹框被遮挡的现象，当我们点击蓝色弹框时又会出现遮挡消失的情况，下面将对这一问题提出相应的解决办法。

解决方案：

解决思路，首先想到的是找到对应的遮挡层的css标签，然后修改z-index值，从而解决不同弹框遮挡层在页面的z-index的不同，但是本思路只能解决首次问题，再次打开还会存在相同的问题，故该思路错误

正确思路：

查看组件中不同属性的作用，我使用的蓝色弹框是使用的element组件中的dialog组件，故此，通过查找该组件中的属性，发现以下三个属性跟遮挡层有关

遮挡层是必须要使用的，故此排除modal，可以通过在dialog弹框中添加modal-append-to-body或者append-to-body来测试是否能解决以上问题，如果是单层遮挡的话，使用第一个，多层遮挡的话，添加第二个，内部原因还未了解清楚。

  这是一段信息
  
    取 消
    确 定