博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

多层嵌套,导致蒙层失效了的解决方法

Posted on 2021-09-10 14:18  地霊殿~三無  阅读(308)  评论(0编辑  收藏  举报

一、bug情况描述

在有蒙层的弹窗中嵌套弹窗(包含使用this.$confim  、 this.$prompt自带的蒙层),

当我们点击弹出内嵌的弹窗时,外层弹窗的蒙层会被复用(此时这个蒙层层级在

外弹窗和内弹窗之间),且关闭内嵌弹窗后,蒙层不会消失(因为外层弹窗还需

要用到),但是这就造成了,外层弹窗被蒙层遮挡的情况

 

二、解决方法

 

就是在外层弹窗加上:append-to-body="true"

 

从el-elementUI的Dialog 对话框组件的默认属性中得知,modal-append-to-body初始值为true,

会把遮罩层插入到dialog的父元素中,但是append-to-body的初始值为false,表示dialog自身

都居无定所,所以嵌套之后的蒙层也只能共用了,才会出现bug情况描述里的内容。

 三、 反思

还是得多看看elementUI,不熟悉才会引发这种bug。

 

 

ps: 最近想更新的,奈何太累就只能慢慢来了。

 

Live2D