element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住

已于 2023-12-05 16:34:05 修改
阅读量1.6k 收藏
点赞数 1
文章标签： ui vue.js 前端
于 2023-09-13 15:51:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64530670/article/details/132856208
版权

element-ui框架的el-dialog弹出框被遮罩层遮挡问题_前端李十三的博客-CSDN博客可以发现el-dialog 组件显示的时候被遮罩层挡住了。https://blog.csdn.net/weixin_64530670/article/details/131173159?ydreferer=aHR0cHM6Ly9tcC5jc2RuLm5ldC9tcF9ibG9nL21hbmFnZS9hcnRpY2xlP3NwbT0xMDExLjIxMjQuMzAwMS41Mjk4

参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样.

比如在el-drawer组件里面也可以插入:

 :modal-append-to-body="false"

完美解决

多层dialog,内层dialog隐藏后遮罩挡住屏幕:

给外层dialog设置

   
  append-to-body

前端李十三
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Drawer.rar
05-03
针对Android的抽屉技术，此demo考虑了具体的用户业务逻辑和目前Android开发环境的一些注意事项，采用了AndroidX，而不是support，更加与时俱进，也是目前比较常用的抽屉模型，望采纳。
android-dialog弹出框，弹出gridview条目选中.rar
01-17
android-dialog弹出框，弹出gridview条目选中，本人亲测，可以使用，放心下载吧！！
解决vue和element UI中对话框的遮罩层消失
浮生离梦的博客
08-09 8055
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body='false' 错误分析 1）若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了posit...
vue element-ui 关于遮罩层挡住了dialog对话框的问题
weixin_44408018的博客
02-19 399
遇到遮罩层挡住对话框，调整对话框位置，一般放在最前面
Element UI 双层弹窗 背景变灰问题 （遮罩层）
最新发布
qq_57229245的博客
02-22 383
只需要在第二个Dialog上加上append-to-body属性就可以完美解决问题。第二个弹窗不会被灰色遮罩遮盖。
使用element-ui框架的el-dialog弹出框被遮罩层挡住了
zhufan2333的博客
01-26 480
Q:element-ui框架的el-dialog弹出框被遮罩层挡住了 A:在el-dialog标签里添加 append-to-body="true"（Dialog 自身是否插入至 body 元素上）
element-ui 弹窗里面嵌套弹窗，解决第二个弹窗被遮罩层掩盖无法显示的问题
锦瑟年华L的博客
08-28 3796
具体使用就是在第一个弹窗中设置 :modal-append-to-body="false" ，在第二个弹窗中设置 :append-to-body="true"我们可以把两个弹窗平级写在主页面中，并同时给2个弹窗设置 :append-to-body="true"这样就能实现我们想要的效果了。
【前端】去掉el-drawer遮罩层，不影响其他位置点击的方法，亲测可用
升级迭代
12-28 1763
抽屉控件的遮罩层，我觉得他黑漆漆的不好看，想换个颜色，可是没找到方法，又不想要遮罩层！于是乎，我更改遮罩层宽度，做了一系列调整，使得遮罩层不会影响其他地方的点击！于是乎，关闭modal（本质上，只是遮罩层颜色透明了，还是会影响页面交互）
【bug】关于el-dialog上额外多了一层遮罩层
m0_66340074的博客
12-28 4695
2.如果是el-dialog里又嵌套了一层el-dialog弹框，一定要把内层的dialog加上append-to-body="true",插入至 body 元素，保证层级的正确(elementUI的组件内有更多解释)后来听说用absolute绝对定位也会出现这样的问题，我一看自己的代码，原来是给最外面的div设定位为fixed了，无论是绝对定位还是固定定位，都会使元素脱离文档流，删掉换个布局去实现就好了。
el-dialog 组件蒙层把弹框给遮住问题处理
weixin_43837268的博客
05-15 1947
z-index的设置没有问题，但z-index值大的图层反而显示在了下面。从上面两个截图可以看出，遮罩层是插入到body元素上的，而弹框却是在层级比较深的组件中，所以考虑到是受父元素影响了。审查元素得知，在弹框的父元素中，有对z-index的设置，且值小于2042。从图中可以看出，element-ui对弹框的处理，默认把遮罩层插入至了body元素上，而dialog自身没有插入至body元素。设置modal-append-to-body为false，将遮罩层插入至dialog的父元素上，弹框显示正常。
elementUi el-dialog 对话框实现可拖拽、去掉覆盖层、并可操作底层的按钮
weixin_44379204的博客
06-24 8631
一、对话框实现可拖拽功能 实现方法：vue的指令 使用方法： 1、将下列drag.js文件放入代码库中； 2、在main.js中引入上述drag.js文件； import 'src/libs/drag.js'; 3、在el-dialog组件中加上指令 <el-dialog v-dialogDrags :visible="dialogShow" > </el-dialog> src/libs/drag.js import Vue from 'vue'; /* * 使
element中dialog遮罩层覆盖弹框问题
2201_75474092的博客
04-20 591
使用的element-UI这个库时使用 <el-dialog></el-dialog> 时对话框时发现弹窗被遮盖层覆盖 只需要为<el-dialog>加入append-to-body="true"就可以解决此问题 官方文档:
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8093
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
10-16
主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
解决vue和el-dialog的遮罩层消失
子非渔
11-04 5013
解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body=‘false’ 错误分析 1）若el-dialog弹出框设置了modal-append-to-body=‘true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级） 2）el-dialog的显示层和遮罩层都设置了position:...
element-ui框架的el-dialog弹出框被遮罩层遮挡问题
李十三的博客
06-12 1065
可以发现el-dialog 组件显示的时候被遮罩层挡住了。
Vue中使用element-ui的el-dialog对话框
05-30
要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。 1. 通过npm安装 ``` npm install element-ui --save ``` 2. 通过yarn安装 ``` yarn add element-ui ``` 安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例： ```html <template> <div> <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button> <el-dialog title="提示" :visible.sync="dialogVisible"> <span>这是一个对话框</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } } } </script> ``` 在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。 这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值