el-dialog 嵌套出现遮罩层bug解决办法

最新推荐文章于 2024-07-12 09:47:02 发布
最新推荐文章于 2024-07-12 09:47:02 发布
阅读量1.7k 收藏 1
点赞数 2
分类专栏： element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josiecici/article/details/114091633
版权

效果
在这里插入图片描述
解决办法：在父与子dialog都添加上这个属性

:append-to-body="true"
星良辰寻
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
**My Coding Family**
04-02 2万+
记录:element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决?【亲测有效】
Vue3+Element Plus中dialog层级显示出错
weixin_44079946的博客
04-04 1998
dialog层级错乱
解决el-dialog双层遮罩层问题
wang457777271的博客
07-12 215
点击添加 出现了遮罩层。
【UI】element-ui的el-dialog的遮罩层在模态框的前面bug
amoureux555的博客
04-22 629
element-ui的el-dialog的遮罩层在模态框的前面bug，遮罩层置顶了
解决 el-dialog 偶现遮罩层问题
多多踩坑
12-30 1413
项目：element + vue 测试浏览器：IE 下图为测试发来的截图，使用 IE 浏览器会偶现打开 dialog 后弹出全局遮罩层，导致表单无法操作 解决：给 dialog 加属性 ---:modal-append-to-body = "false"
element-ui的el-dialog的遮罩层在模态框的前面bug
Jkssns的博客
12-01 1399
本来吧，俺是不屑于发这种解决小bug的博客，但一想，俺可是把知识洒向人间的天使，我管他有用没用呢。是一坨屎俺也要塞进别人的脑袋里。 原因： 是因为遮罩层插入进了body标签下，z-index高于当前父元素。 解决：在el-dialog标签里加上:modal-append-to-body="false"就可以了。 ...
Element UI中el-dialog双层嵌套bug，遮罩显示灰色（2024最新）
我们好像在哪见过~
05-29 602
Element UI中el-dialog双层嵌套问题，遮罩显示灰色并且无法操作
el-dialog遮罩层遮挡问题
changyana的博客
03-11 883
由于我是el-dialog里边又嵌套了一个el-dialog，所以当出现两个el-dialog时，都会被遮罩层遮挡。
element-ui 使用dialog嵌套出现层级覆盖问题解决
lifangfang0607的博客
12-18 6804
使用 append-to-body 属性，可以解决
el-dialog遮罩层样式修改问题
Deck_的博客
11-17 2149
el-dialog遮罩层样式调整问题
对话框中使用el-input和el-tree做树形组件表单元素，解决点击其他区域树形组件无法自动收回的bug
qq_27470647的博客
04-01 3229
对话框中表单某一项以树的形式展示，点击el-input弹出el-tree树形组件后如果不继续点击选择树节点而是点击其他地方（或者直接关闭对话框），树形组件收不回去了（不能像下拉框表单一样自动隐藏收回去），这个是有解决办法的，通过给body绑定click事件，然后判断鼠标点击的dom(event.target)是不是点击弹出树形组件的那个input或者树形组件本身，如果不是，就让树形组件隐藏，如果是...
element-ui+vue使用时遇到的坑
tendernessxy的博客
10-27 3393
element-ui+vue使用时遇到的坑
VueTreeselect 嵌套进 element-ui中会出现不显示下拉框的问题
qq_38062875的博客
07-18 1781
VueTreeselect 嵌套进 element-ui中会出现不显示下拉框的问题 原因:因为 element ui 的样式 overflow:hidden; 解决方案：重写它的样式=> /deep/ .el-table{ overflow: visible !important; } /deep/ .el-table .cell{ overflow: visible !important; } /deep/ .el-table__body-wrapper{ overflow: vis
element-ui框架的el-dialog弹出框被遮罩层挡住
l1002670137的博客
09-03 1710
element-ui中弹出框被遮罩层挡住
【bug】关于el-dialog上额外多了一层遮罩层
m0_66340074的博客
12-28 4900
2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8495
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
使用el-dialog里面嵌套子组件，点击el-table里的按钮并利用$refs为子组件某个属性赋于row这个值，出现关闭子组件后再点开row多了某个属性
lx1921593177的博客
09-11 286
利用深拷贝，将row完完全全复制到另一个对象并传给子组件
el-dialog中嵌套el-tabs,点击关闭按钮时页面卡死的问题
weixin_45496202的博客
06-21 737
el-dialog中嵌套el-tabs,点击关闭按钮时页面卡死的问题 在el-dialog中嵌套el-tabs时,点击关闭按钮导致页面卡死问题,是element组件的bug,把el-dialog的destroy-on-close属性去掉就好了
el-dialog取消页面遮罩层
最新发布
07-25
在Element UI库中，`el-dialog`用于创建可滑动的、模态的窗口，它通常包含一个对话框以及一个可以关闭它的按钮。有时我们希望在用户与对话框交互时保持整个页面可见，并允许背景操作，这就需要取消 `el-dialog` 的页面遮罩层。 取消 `el-dialog` 的页面遮罩层可以通过给 `el-dialog` 组件添加一些属性来实现： ### 使用 `modal-append-to-body` 默认情况下，当打开 `el-dialog` 时，会自动将遮罩层附着到浏览器的身体元素上（`body`），并阻止事件冒泡至顶层。通过在 `el-dialog` 中设置 `append-to-body="true"` 属性，你可以直接将遮罩层附加到 body 元素之外的位置，避免影响页面其余部分的操作。 ```html <el-dialog append-to-body modal-append-to-body> <!-- 内容 --> </el-dialog> ``` ### 自定义遮罩层 如果你想完全自定义遮罩层的行为或样式，如完全禁用遮罩层，可以考虑使用外部的遮罩层组件，而不仅仅是依赖于 `el-dialog` 内置的机制。这可能涉及到使用更底层的 DOM 操作或第三方插件。 ### 监听事件 如果你选择保留 `el-dialog` 的标准行为，但仍然想要取消某些特定情况下的遮罩层效果（例如，在对话框关闭时），你可以通过监听特定事件并在事件处理器中移除遮罩层。 #### 示例代码： 假设已经有一个全局的遮罩层控制函数： ```javascript function removeMask() { // 移除遮罩层代码，比如从 DOM 中移除遮罩元素 } // 监听 dialog 关闭事件 new Vue({ el: '#app', methods: { closeDialog() { this.$refs.dialog.close(); // 关闭对话框 removeMask(); // 手动移除遮罩层 } }, components: { 'el-dialog': ElDialog, }, data() { return { dialog: { visible: false, }, }; }, mounted() { // 初始化对话框引用 this.$nextTick(() => { this.dialog.$mount('.dialog-wrapper'); }); }, }); ``` 在这个例子中，`closeDialog` 函数会在关闭对话框之后调用 `removeMask()` 函数来移除遮罩层。这种方法提供了一种灵活的方式来控制何时显示和隐藏遮罩层。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值