在使用Vue和ElementUI开发PC管理平台时，遇到el-dialog嵌套导致的遮罩层覆盖问题。当打开嵌套dialog时，蒙层会盖住整个页面。解决方案包括：1) 设置嵌套dialog的`append-to-body`为`true`，使内容区域插入到body下，避免因定位问题被遮挡；2) 设置嵌套dialog的`modal-append-to-body`为`false`，使蒙层在当前元素下，防止被父元素遮挡。尽量避免嵌套dialog的写法，以减少此类问题。
前言
最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。
el-dialog嵌套
我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮
如下图
但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。
然后我去查看文档，查看页面dom结构就知道大致原因了。
这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区域的z-index也是动态生成，默认是2001，它们的定位都是fixed,但是内容区域的z-index会比蒙层的大1，导致内容区域可以高亮。
然后你嵌套的dialog显示后，它的蒙层也是替换第一个dialog的蒙层，同样插入到body，然后它的z-index会递增，是2002ÿ
最低0.47元/天 解锁文章
扫一扫
3869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
