解决element-plus的Dialog对话框的遮罩层无法全屏遮罩

于 2024-05-16 15:53:28 发布
阅读量200 收藏
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74545388/article/details/138964497
版权

最近在使用element-plus中的Dialog对话框的时候,我放在el-card中,造成了打开对话框的遮罩层无法全屏显示,在github上找很多解决方法,最后在看官方文档的时候,官方有这一个属性

append-to-bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true

这个属性加到el-dialog上即可,然后就可以实现遮罩层全屏遮罩

<el-dialog :append-to-body="true" v-model="dialogBox" width="650px" align-center

码农的救赎
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Android UI系列-----Dialog对话框示例
08-31
本篇文章主要介绍了Android UI系列-----Dialog对话框示例，在界面上弹出一个Dialog对话框使我们经常需要做的，有需要的可以了解一下。
element-ui dialog 对话框局部显示（不全屏遮罩）
A_lexzanda的博客
03-22 5373
问题一：遮罩覆盖住了对话框 设置 modal-append-to-body 或者 append-to-body 属性为false <el-dialog title="新增对话框" width="80%" :modal-append-to-body='false' :append-to-body="false" :center="true" > </e
解决element-ui对话框组件el-dialog遮罩层小问题
qq_42357338的博客
01-05 1993
问题场景： 在使用对话框组件时，点击弹出后，遮罩层始终显示在最前面，导致整个页面无法操作。 出现原因 出现这种情况是因为遮罩层的dom元素插入进了body标签底下，标签如下所示： 解决办法 在el-dialog标签里添加一个属性，:modal-append-to-body:false, 让遮罩层插入至dialog的父元素上就OK啦，官方文档如下 ...
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
weixin_50478033的博客
04-25 1325
vue3中Element-plus全局配置Dialog遮罩层点击不关闭
关于el-dialog上额外多了一层遮罩层
weixin_47175934的博客
11-09 1096
关于el-dialog上额外多了一层遮罩层
ElementPlus Dialog fullscreen 设置全屏属性 屏幕下方空白的问题
weixin_44658109的博客
01-13 877
找到Dialog控件部分后把下面的样式属性一个一个全部取消后发现是因为.el-dialog_body 这个class里面的max height：calc(90vh-111px)!important;通过全局检索找到element-ui.scss 这个文件里面的这个属性 然后修改。多次测试目前没有找到有效的解决方案（不改动源码的情况下）通过修改源码的方式解决问题。
ElementPlus使用多级弹窗（Dialog）出现蒙版遮罩问题
最新发布
qq_33225414的博客
01-18 824
ElementPlus使用多级弹窗遮罩
element-plus设置全局遮罩层
周金鱼啊
06-16 1825
新建loading.ts文件 import { ElLoading } from 'element-plus'; let loadingCount = 0; let loading; const startLoading = () => { loading = ElLoading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.6)' });
vue-element-dialog-drag:支持ElementUI对话框拖动
04-28
Vue元素对话框拖动支持ElementUI对话框拖动用法npm install vue - element - dialog - draggable -- saveimport DlgDraggable from "vue-element-dialog-draggable"Vue . use ( DlgDraggable , { containment : true...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue开发中对话框被遮罩层挡住的问题
01-19
在Vue的开发中，一旦我们用到对话框，经常出现的问题是对话框被遮罩层挡住，无论是Element-UI dialog还是bootstrap的Modal，如下图所示： 造成这个问题的原因是对话框组件的父元素的position有fixed或者relative...
element-plus实现改变遮罩层loading的样式和文本内容，包含监听上传文件取消上传事件的监听
weixin_64141611的博客
04-18 2020
element-plus实现改变遮罩层loading的样式和文本内容，包含监听上传文件取消上传事件的监听 import { ElLoading } from 'element-plus' 第二步，创建实例
vue3中element-plus弹窗el-dialog的样式覆盖
qq_35073135的博客
07-19 2053
element-plus;vue3;el-dialog;样式覆盖
VUE3+element plus在el-tabs内部有多个el-dialog时，遮罩会叠加
nopyramid的博客
11-25 886
有问题的效果，遮罩层是黑色的，需要多次点击才能关闭dialog。
vue项目elements Plus 中el-dialog弹窗中日期选择器遮罩层问题
rikimiao的博客
06-14 2362
elemments ui中el-dialog弹窗框遮罩层问题
v-loading在可变高度元素上使用(超出父级元素时，loading遮罩未完全覆盖)
weixin_42646650的博客
08-18 613
父级元素设置overflow:auto;子级元素高度超过父级元素时，子级元素滚动到上方，调用loading,此时loading遮罩未完全覆盖。v-loading 参数。
elementplus dialog对话框遮罩不挡住导航
niyooooo的博客
04-25 1552
刚开始解决方式如下 ::v-deep .el-overlay { position: absolute; } 这样确实左侧导航和上方标签不会被遮罩遮挡，但是点击无效果 于是查看弹出框的z-index为2013 导航和标签的z-index只有1000左右，更改导航和标签的z-index大于对话框的就行啦，这样打开对话框后导航和标签也可以点击了。 ...
element-ui Dialog 遮罩层相互影响
08-26
你好！关于Element UI Dialog遮罩层相互影响的问题，我可以给你一些解决方案。首先，Element UI Dialog组件默认会创建一个遮罩层来阻止用户与页面上其他元素进行交互。如果同时打开多个Dialog组件，它们之间确实可能会出现遮罩层相互影响的问题。 一种解决方法是手动控制Dialog组件的遮罩层。你可以使用`append-to-body`属性将Dialog组件的遮罩层添加到body元素上，而不是父级元素。这样做可以确保每个Dialog组件有自己独立的遮罩层，互相之间不会产生影响。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" append-to-body> <!-- 对话框内容 --> </el-dialog> ``` 另一种解决方法是使用`z-index`属性手动设置每个遮罩层的层级。你可以为每个Dialog组件设置不同的`z-index`值，确保它们在层级上互不重叠。示例代码如下： ```html <el-dialog :visible.sync="dialogVisible" :z-index="100"> <!-- 对话框内容 --> </el-dialog> ``` 你可以根据具体情况选择适合的解决方案来解决Element UI Dialog遮罩层相互影响的问题。希望对你有所帮助！如果你有任何其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值