项目中遇到的解决抽屉遮罩层设置为false 下方的按钮仍不可点击的问题

最新推荐文章于 2025-02-27 16:01:21 发布
原创 最新推荐文章于 2025-02-27 16:01:21 发布 · 626 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了如何通过修改CSS样式解决ECharts抽屉组件遮罩层关闭后，下方按钮无法点击的问题，具体是设置`.el-drawer__wrapper`的`pointer-events`属性并嵌套调整`.el-drawer__body`的样式。

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

通过更改css样式来解决

//解决抽屉遮罩层false后下方按钮不可点击
.el-drawer__wrapper {
  pointer-events: none;
  ::v-deep .el-drawer__body{
    pointer-events: auto;
  }
}
el-drawer抽屉组件弹窗遮挡问题解决
宁波阿成的博客
12-01 1709
el-drawer抽屉组件弹窗遮挡问题解决
element-plus dialog对话框去掉覆盖层、并可操作底层的按钮
weixin_44442674的博客
03-26 1359
加载cesium时，地球出现后不能操作，刚开始以为cesium引用出现问题，控制台也没报错，最后发现时引用的element-plus抽屉组件存在遮罩层的原因。由于抽屉组件存在遮罩层，虽然设置:modal="false"不显示遮罩层，但是遮罩层只是变为透明，但是仍然存在，点击事件失效。查看元素，遮罩层没有类名，添加自定义类名 modal-class="drawer"，网上找的css样式应用后不起作用。最后发现是因为局部样式造成的样式不起作用，使用样式穿透，问题解决。
【已解决】el-drawer外不可点击
程序边界
04-27 4063
文章目录问题场景 问题场景 使用el-draw做一个面板（el-draw衍生于el-dialog），可是面板外不可点，那这一定是样式的问题了。 F12查看源码，果然在外面还有两个外套 直接修改样式： /deep/ .el-drawer__wrapper { width: 400px; .el-drawer__container { width: 400px; over 有问题欢迎留言 ...
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 3880
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
element弹窗遮罩层false后下方内容还是不可点击解决方案
weixin_49993560的博客
12-09 1245
弹框遮罩层下方内容点击
CSS_遮罩层下面按钮无法点击解决
小歪博客
09-16 1442
pointer-events 当它的被设置为 none 的时候，能让元素实体虚化，虽然存在这个元素，但是该元素不会触发鼠标事件 pointer-events: none; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <tit
手机端 弹出遮罩层 并且不可滑动
zeromike
08-17 2191
        最近用phonegap在安卓手机中使用Html5+css3做页面，         需求：在页脚导航按钮上，点击【同意】弹出一个页面，页面中是动态生成的单选按钮。         代码：          &lt;div id="show"&gt; &lt;div data-role="controlgroup" id="btnGroups" data-typ...
Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭
weixin_51341210的博客
12-02 4415
项目需求问题Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭 Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭 在使用element-ui组件的时，根据项目需求，需要修改组件默认的属性值。 今天根据需求需要组织点击遮罩层关闭组件el-dialog或者el-drawer <el-dialog :title="title" :visible.sync="open" width="500p
elementplus如何实现dialog遮罩层外的元素可以被操作点击
Curry_On的博客
06-21 2631
element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一，它的效果是弹出一个对话框，外面默认会有一个蒙层。现在我碰到的需求是，弹窗要正常显示，但是蒙层下面的元素内容又是可以点击的，如何实现呢？以下是我的解决代码（vue）首先是 HTML 部分 然后是 css 代码 来解释一下：要实现蒙层外面的内容可以点击被操作，核心是用到了 这个属性用于控制元素是否能成为鼠标事件的目标。 常见的两个值 auto：这是默认值。元素可以响应鼠标事件。 none：元素不会成为鼠标事件的目标。即鼠标事
7 - 可视化控件基类QWidget
LoneJade_的博客
02-15 1647
7 - QWidget QWidget VS QObject QObject不是可视化控件，是所有QT对象的基类。 Qwidget则是所有可视化控件的基类。 （一）描述 所有的可视控件的基类（仅有全部可视控件的共性，比如是个方块，可调整大小，移动位置等等）； 是一个最简单的空白控件； 控件是用户界面的最小元素； 功能：接收各种事件（鼠标、键盘…），绘制在桌面上，展示给用户看。 每个控件都是矩形的，它们按Z轴顺序排序（Z轴面向人，后面的会被前面的遮挡，后面的是父控件）； 控件由其父控件和
e-drawer 和 el-dialog 全局配置默认点击遮照不关闭
qq_44741577的博客
03-27 1246
【代码】e-rawer 和 el-dialog 全局配置默认点击遮照不关闭。
element-plus中dialog对话框组件去掉遮罩层后无法正常操作底层页面
m0_74029904的博客
01-26 1477
element-plus中dialog对话框组件去掉遮罩层后无法正常操作底层页面
vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。
qq_36571836的博客
05-18 6374
2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现 出现该蒙层。
封装el-drawer时遇到的问题,及解决方案
weixin_49035434的博客
08-22 3557
方法1: 父组件 <template> <div id="app"> <el-button type="success" @click="success">成功按钮</el-button> <drawer :isDrawer.sync='isDrawer' /> </div> </template> isDrawer: false, success() { this..
日常工作记录 el-drawer弹窗遮罩问题
caiweim的博客
11-03 2511
将modal置为false就行，这样其实也解决了，貌似没什么问题，就是少了遮罩层。然后我就发现了append-to-body这个属性，将自身插入body元素上，嵌套的必须为true，将append-to-body置为true，然后发现问题解决了。问题出现了，因为我引入的那个界面原本就有一层弹窗了，导致打开el-drawer弹窗的时候整个界面都被这层遮罩挡住了。在开发的时候有个需求，在一个地方增加一个页面的入口，这很简单，加个按钮，将页面引入，增加一个弹窗就行。东西很简单，日常记录一下。
关于element抽屉el-drawer被遮罩层覆盖的解决方法
qlin_11的博客
02-27 419
1.直接取消遮罩层，弹窗全屏。2.设置z-index。
重写Element-ui el-drawer样式
Tian丶Yuting
08-09 1431
【代码】重写Element-ui el-drawer样式。
【前端】去掉el-drawer遮罩层，不影响其他位置点击的方法，亲测可用
升级迭代
12-28 4983
抽屉控件的遮罩层，我觉得他黑漆漆的不好看，想换个颜色，可是没找到方法，又不想要遮罩层！于是乎，我更改遮罩层宽度，做了一系列调整，使得遮罩层不会影响其他地方的点击！于是乎，关闭modal（本质上，只是遮罩层颜色透明了，还是会影响页面交互）
element抽屉el-drawer被其他内容覆盖的解决方法
qq_44472859的博客
02-01 5364
element抽屉el-drawer被其他内容覆盖的解决方法 遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性，把抽屉插入至 body 元素上，把遮罩插入至抽屉的父元素上，具体代码： <el-drawer :append-to-body="true" :modal-append-to-body="false" ></el-drawer> element官方的说明：
vue3 抽屉组件禁止点击遮罩层关闭
最新发布
07-17
<think>我们正在讨论Vue3中的抽屉组件，特别是如何禁止通过点击遮罩层关闭抽屉。 根据Element Plus（Vue3版本的Element UI）的文档，抽屉组件有一个`modal`属性（或称为遮罩层）以及一个`close-on-click-modal`属性来控制点击遮罩层是否关闭抽屉。 但是，根据用户的需求，我们需要禁止点击遮罩层关闭抽屉。因此，我们应该设置`close-on-click-modal`为`false`。 在Element Plus中，抽屉组件的使用方式如下： 1. 引入Drawer组件。 2. 在模板中使用`el-drawer`，并设置`close-on-click-modal`属性为false。 示例代码： ```vue <template> <el-drawer v-model="drawerVisible" title="抽屉标题" :close-on-click-modal="false" > <span>抽屉内容</span> </el-drawer> </template> <script setup> import { ref } from 'vue'; const drawerVisible = ref(true); </script> ``` 注意：`v-model`绑定一个布尔值来控制抽屉的显示和隐藏。设置`:close-on-click-modal="false"`即可禁止点击遮罩层关闭抽屉。 另外，如果用户使用的是其他UI库，比如Ant Design Vue，那么属性可能不同。但是根据问题中提到的Element Plus，我们按照上述方式处理。 如果用户没有使用UI库，而是自己实现抽屉组件，那么就需要在遮罩层的点击事件上做处理，不触发关闭。但根据问题，我们假设用户使用的是Element Plus。 因此，答案就是设置`close-on-click-modal`属性为`false`。 生成相关问题： 1. 在Vue3中，如何控制抽屉组件的显示和隐藏？ 2. Element Plus抽屉组件有哪些常用属性？ 3. 如何自定义抽屉组件的样式？</think>在 Vue3 中实现抽屉组件时禁止点击遮罩层关闭，可以通过以下步骤实现（以 Element Plus 的 Drawer 组件为例）： ### 解决方案 ```vue <template> <el-drawer v-model="drawerVisible" title="抽屉标题" :close-on-click-modal="false" // 关键属性 :close-on-press-escape="false" // 可选：同时禁止ESC键关闭 > <span>抽屉内容</span> </el-drawer> </template> <script setup> import { ref } from 'vue'; const drawerVisible = ref(true); </script> ``` ### 关键属性说明 1. **`close-on-click-modal`** - 类型：`Boolean` - 功能：控制点击遮罩层是否关闭抽屉 - 禁用方式：设为 `false` 即可禁止点击关闭 2. **`close-on-press-escape`**（可选） - 类型：`Boolean` - 功能：控制按 ESC 键是否关闭抽屉 - 禁用方式：设为 `false` 可禁止ESC键关闭 ### 自定义抽屉实现 如果使用自定义组件，可在遮罩层事件中阻止关闭行为： ```vue <template> <div class="mask" @click.self="handleMaskClick"> <div class="drawer-content"> <!-- 抽屉内容 --> </div> </div> </template> <script setup> const handleMaskClick = (e) => { e.stopPropagation(); // 阻止事件冒泡 // 不执行关闭逻辑 }; </script> ``` ### 注意事项 - 该解决方案适用于 **Element Plus v2.x** 及以上版本 - 不同UI库的属性名可能不同： - Ant Design Vue：使用 `:maskClosable="false"` - Naive UI：使用 `:mask-closable="false"`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值