element-ui 对话框中嵌套对话框及其遮罩层关闭问题
说明
经常会遇到对话框中打开对话框的对话框嵌套问题,可能会出现关闭内部对话框的时候发现遮罩层还在
主要是Dialog组件在全局只维护一个遮罩层DOM节点,然后在关闭当前遮罩层的时候通过堆栈恢复上一个遮罩层位置。当我们打开第二个页签的弹窗时其实是把第一个弹窗的遮罩层给强行征用了,所以当我们切换回第一个页签时,背景就莫名的消失了。当我们关闭第二个弹窗时,堆栈恢复了上一个弹窗的位置所以我们造成了弹窗未关闭的假象。
解决
在父组件和子组件的el-dialog
组件中都加上append-to-body
这样即使是多个对话框逐层嵌套都可以。
注意的是,在子组件中千万不能输入 :modal-append-to-body="false",否则,当子组件关闭时,所有对话框的遮罩层都会被关闭,变成了没有遮罩层,如下图两层对话框关闭子对话框后,父组件的遮罩层同时也被关闭了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律