elementui弹出框被遮罩层挡住的问题

本文介绍了在使用VueElementUI中的el-dialog时遇到的遮罩问题,提出两种解决方案:一是将dialog放置在组件最外层div中,二是调整modal-append-to-body属性以控制遮罩范围。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

偶然发现有个页面会出现这种问题,有两个解决方法。

1,el-dialog直接放在组件最外层div中,就不会出现遮罩问题。

2,:modal-append-to-body='false'或者:append-to-body='true',改变他的这个属性就好。但是遮罩层的范围会变

Element UI 的抽屉组件 (Drawer) 无法点击到下层内容的问题通常是由于 z-index 样式属性引起的。z-index 属性用于设置元素的堆叠顺序,值越大表示越靠上显示。 如果你遇到 Drawer 组件挡住背景页面并且导致背景不可点击的情况,可以尝试以下几种解决方案: ### 解决方案一:调整 z-index 你可以通过自定义样式增加 `body` 或者其他遮罩层外容器的 z-index 来解决这个问题: ```css .el-drawer__wrapper { /* 确保遮罩层足够高 */ } /* 让除以外的内容可用 */ .v-modal { pointer-events: none; // 关键点在于此,使得模态背后依然能接收到鼠标事件 } /* 如果你想让整个modal区域都可以穿透则需要再添加下面这一行 */ /*.el-dialog{pointer-events:none;}*/ ``` 请注意上述 CSS 可能在某些版本中有所不同,具体取决于你使用的 ElementUI 版本号以及是否有额外的主题覆盖等特殊配置因素影响。 ### 解决方案二:修改默认 modal 设置 部分场景下可通过关闭 Modal 蒙版的方式来直接解决问题,在打开 drawer 时将 `append-to-body` 和 `modal` 参数设为 false 即可避免其自动创建蒙版而阻断交互操作。 示例代码如下: ```vue <template> <el-drawer :visible.sync="drawerVisible" append-to-body=false modal=false size='50%'> <!-- 抽屉内部 --> </el-drawer> </template> <script> export default{ data() { return { drawerVisible:false, } }, }; </script> ``` 这两种办法都能有效缓解因为 Drawer 出之后造成的底层元素失去响应能力的现象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值