vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决
作者：DamonREN
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
场景
结果列表按钮对应了一个结果列表弹窗，页面中每条结果后又有下载和查看结果按钮，查看结果按钮很明显由对应一个弹窗页面。
因此这属于多级弹窗（使用的是Dialog）
当出现第一级弹窗时，可以正常关闭开启；
当出现第二级弹窗后，第二级弹窗打开后就无法关闭，很明显是出现了蒙版遮罩问题。
效果演示
（图二完全置灰，无法点击任何按钮）
解决方案
出现蒙版遮罩和层级肯定是有关，但是尝试设置z-index没有任何效果。
查看https://element.eleme.io/#/zh-CN/component/dialog官网Dialog对话框参数中有：
这两个属性是关于遮罩层问题的
添加 :append-to-body="true" 后，就解决了遮罩层的问题，可以参照下属性说明来理解下。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。