【Element】vue3+element-plus 去掉 el-dialog 的遮罩，并且可以操作底层区域

最新推荐文章于 2025-04-04 08:15:00 发布
最新推荐文章于 2025-04-04 08:15:00 发布
阅读量291 收藏
点赞数 1
分类专栏： Element 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAIPython/article/details/144073637
版权 
<el-dialog
    v-model="DialogVisilble"
    :width="360"
    title="示例"
    :modal="false"
    :close-on-click-modal="false"
    modal-class="dialog_class"
  >

.el-dialog {
  pointer-events: auto;
}
.dialog_class {
  pointer-events: none;
}
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
m0_38109616的博客
12-01 2190
Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭
Vue.js前端框架教程16：Element UI的el-dialog组件
Cachel Wood的博客
01-11 560
点击按钮可以打开对话框，对话框标题为 “示例对话框”，宽度为页面宽度的 30%，内容为 “这是一个简单的示例对话框”。: 在对话框关闭前调用的函数，参数为关闭前的回调函数，可用于阻止对话框关闭。: 布尔值，设置点击对话框背景时是否关闭对话框。: 布尔值，设置关闭对话框时是否销毁对话框内容。: 布尔值，设置是否在对话框显示时才渲染内容。: 布尔值，设置对话框打开时是否聚焦到对话框。通常用于嵌套对话框时避免样式冲突。: 布尔值，设置点击遮罩层时是否关闭对话框。: 布尔值，设置是否在对话框显示时锁定滚动。
element-plus ElLoading显示隐藏
weixin_44996006的博客
08-28 1036
element-plus ElLoading显示隐藏
vue3+element-plus中dialog组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
weixin_42498594的博客
06-03 837
添加两个属性去掉遮罩层。
【如何设置Element UI的Dialog弹窗允许点击背景内容】
weixin_37342647的博客
04-04 507
Element UI的Dialog组件默认会阻止用户与背景内容的交互。本文介绍一种简单方法来实现打开弹窗的同时仍能操作背景页面内容的功能。
vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
liuzaixi的博客
03-18 3608
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
ElementPlus Dialog fullscreen 设置全屏属性 屏幕下方空白的问题
weixin_44658109的博客
01-13 1833
找到Dialog控件部分后把下面的样式属性一个一个全部取消后发现是因为.el-dialog_body 这个class里面的max height：calc(90vh-111px)!important;通过全局检索找到element-ui.scss 这个文件里面的这个属性 然后修改。多次测试目前没有找到有效的解决方案（不改动源码的情况下）通过修改源码的方式解决问题。
去掉element-dialog中header部分
weixin_47194802的博客
08-26 8030
我想要去掉一个弹出层的头部，因为用不到。添加一个这个属性即可。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
1. **创建组件模板**：首先，需要创建一个新的Vue组件，包含Dialog或Drawer的基本结构，包括标题、内容区域和关闭按钮等元素。 2. **引入Element UI**：确保项目中已正确安装和引入Element UI，以便可以利用其提供...
vue3+element-plus实现el-drawer拖拽
最新发布
05-08
另外，引用[3]提到在dialog组件中去掉遮罩层后操作底层页面，可能涉及到修改组件的模态属性。虽然el-drawer和dialog不同，但可能需要类似的属性设置，比如是否显示遮罩层，或者在拖拽时允许与底层页面交互。 现在...
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 1992
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
Element Plus使用el-dialog
qq_34631220的博客
07-21 1115
【代码】Element Plus使用el-dialog。
elementPlus的dialog组件封装
outsider76557的博客
02-08 3873
公司业务可能需要进行一些组件的封装，基于第三方elementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Dialog弹出框的封装。
vue3 element-plus中关于el-dialog
m0_60522381的博客
11-30 806
场景是使用el-dropdown和el-dropdown-menu封装了一个组件，trigger为hover类型，el-dropdown-menu的内容是封装了一个组件其中包含一个设置按钮，点击设置按钮弹出一个dialog弹出框，弹出框单独封装了一个vue组件，在修改弹出框样式的时候发现只要下拉菜单收起来之后弹窗也就消失了，具体的底层问题没研究只记录一下解决方法添加了如下三个属性就解决了消失的问题。记录一下使用el-dialog遇到的问题。
【Element】element-plus中el-dialog弹窗隐藏遮罩并可以控制弹窗后的元素、点击、滚动、其他事件操作等
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
11-29 4224
但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。从 dom 元素我们知道 el-dialog 的层级为三层，外面两层是遮罩，第三层才是真正的弹窗元素，因此，我们需要做的就是把外层最外层的遮罩事件去掉，保留最里面的。el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作，比如一个弹窗打开了，我要能控制弹窗后面的滚动、点击等等一系列事件。首先我们需要隐藏弹窗遮罩。
自定义element-plus的弹框样式
i-cat的博客
08-11 3231
项目中弹框使用频繁,需要统一样式风格,此组件可以自定义弹框的头部样式和内容
vue3封装ElementUI plus Dialog弹窗
阿狸演绎的博客
05-20 1700
因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下。思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用。思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用。缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码。新建一个组件,将官网暴露的属性全部引用了。
vue3 element-plus el-dialog 二次封装，多层调用
MFWSCQ的博客
11-30 3989
el-dialog
ElementUI e-dialog 弹出框可以编辑底部输入框 去掉遮罩层
朝花夕拾的博客
07-29 2385
1、去掉e-dialog遮罩层modal="false"2、弹出modal仍然可以编辑底部输入框。
el-dialog 遮罩层
08-19
el-dialog 是 Element UI 中的一个组件，用于创建对话框。遮罩层可以通过设置 el-dialog 的属性来控制是否显示。 默认情况下，el-dialog 的遮罩层是显示的，可以通过设置 `:modal="false"` 来禁用遮罩层。例如： ```html <el-dialog :modal="false"> <!-- 对话框内容 --> </el-dialog> ``` 如果你想要自定义遮罩层的样式，可以通过设置 el-dialog 的 `custom-class` 属性来添加自定义的 CSS 类。然后在 CSS 中设置该类的样式。例如： ```html <el-dialog custom-class="my-dialog"> <!-- 对话框内容 --> </el-dialog> ``` ```css .my-dialog .el-dialog__wrapper { /* 遮罩层样式 */ } ``` 希望这些信息对你有帮助！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值