element-ui 对话框中嵌套对话框及其遮罩层关闭问题

发布时间 2023-06-08 10:34:12作者: 天宁哦

说明

经常会遇到对话框中打开对话框的对话框嵌套问题,可能会出现关闭内部对话框的时候发现遮罩层还在
主要是Dialog组件在全局只维护一个遮罩层DOM节点,然后在关闭当前遮罩层的时候通过堆栈恢复上一个遮罩层位置。当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了,所以当我们切换回第一个页签时,背景就莫名的消失了。当我们关闭第二个弹窗时,堆栈恢复了上一个弹窗的位置所以我们造成了弹窗未关闭的假象。

解决

在父组件和子组件的el-dialog组件中都加上append-to-body

这样即使是多个对话框逐层嵌套都可以。

注意的是,在子组件中千万不能输入 :modal-append-to-body="false",否则,当子组件关闭时,所有对话框的遮罩层都会被关闭,变成了没有遮罩层,如下图两层对话框关闭子对话框后,父组件的遮罩层同时也被关闭了