el-dialog 弹窗多层嵌套后边框不显示问题

news2026/3/28 6:42:13

一、问题描述我的项目用的 vue3element-plus 业务需要使用了多层嵌套的弹窗 el-dialog。然后就发生了上层的第二三层的弹窗在第二次弹出时会显示不了边框的问题。其实如果我们挪动底层弹窗的位置然后再打开上层二、三层弹窗也会发生显示不了边框的问题。问题效果如图所示二、解决办法网上AI搜索到解决方案很多但是不见的都有效。经测试发现为每层弹窗添加append-to-body和destroy-on-close属性可有效解决该问题。这两个设置简单实用相比其他复杂方案更直接有效。这两个设置的组合具体含义描述做简单记录如下append-to-body !-- 1. 独立渲染不受父弹窗影响 -- destroy-on-close !-- 2. 关闭时完全销毁每次都是全新 --1、append-to-body对应的问题第二层弹窗的 DOM 嵌套在第一层弹窗内部第一层弹窗的 CSS 样式overflow、z-index、border-radius会影响子元素第一层弹窗的遮罩层可能覆盖第二层弹窗2、那么用了append-to-body之后执行逻辑如下两个弹窗的 DOM 元素是平级关系不再嵌套各自独立互不影响各自的 CSS 样式不会互相干扰各自的遮罩层独立计算z-index3、 destroy-on-close对应的问题DOM 元素保留之前的样式状态也被保留第二次打开时复用同一个 DOM 元素如果第一次打开时产生了某些副作用如 CSS 计算偏移、父容器影响第二次打开时可能残留4、用了destroy-on-close之后的执行逻辑如下1第一次打开创建全新弹窗 DOM独立于 body2关闭destroy-on-close彻底销毁 DOM3第二次打开再次创建全新弹窗 DOM没有任何残留

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2440231.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！