element-plus el-dialog 弹窗隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作等

news/2024/4/17 15:56:37

场景

el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作,比如一个弹窗打开了,我要能控制弹窗后面的滚动、点击等等一系列事件。

修改方法

首先我们需要隐藏弹窗遮罩 :modal="false",并且给 el-dialog 弹窗添加一个 id(后面用于获取 dom 元素,当然你也可以给外层套个div,找第一个子元素就行)。

    v-model="modelDialogVisible"append-to-bodydraggable:modal="false"id="modelDialogRef"ref="modelDialogRef":close-on-click-modal="false"align-center:before-close="handleClose"class="model-dialog"

在这里插入图片描述
从 dom 元素我们知道 el-dialog 的层级为三层,外面两层是遮罩,第三层才是真正的弹窗元素,因此,我们需要做的就是把外层最外层的遮罩事件去掉,保留最里面的。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。
auto:与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同
none:元素永远不会成为鼠标事件的target (en-US)。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

给弹窗内容添加自定义样式 pointer-events: auto;

.model-dialog {pointer-events: auto;
}

在打开弹窗的时候,执行下面的代码,目的是将最外层的遮罩 pointer-events 修改。

 nextTick(() => {// 把弹窗父亲的父亲 dom 元素添加 pointer-events: none; 防止穿透const elDialog = document.getElementById('modelDialogRef');// @ts-ignoreelDialog?.parentNode?.parentNode?.setAttribute('style', 'pointer-events: none;');});

https://www.xjx100.cn/news/3119014.html

相关文章

SpringBoot_第八章(读写分离_ShardingSphere实现)

目录 1:ShardingSphere实现Spring的读写分离分库分表 2:什么是ShardingSphere 3:ShardingJDBC实现代码案例 3.1:pom准备 3.2:读写分离 3.3:垂直分库分表 3.4:水平单表不分库分片 3.5&…

功能全面又强大的同步备份软件,你找到了吗?

随着企业规模的不断扩大,许多企业都会拥有自己的数据中心。因此每日员工都需要在服务器与服务中心之间调取文件,同时还需要对每日新增的业务数据进行实时同步。如果量比较小,一般问题不大;一旦数据比较大,量也比较大&a…

大语言模型有那些能力和应用

目录 能力 应用 能力 理解语义的能力:LLM 具有强大的语义理解能力,能够理解大部分文本,包括不同语言(人类语言或计算机语言)和表达水平的文本,即使是多语言混杂、语法用词错误,也在多数情况下…

k8s有状态部署mysql主从(local pv持久化)

1、修改自己对应的命名空间 2、local pv的方式必须先创建好目录在给权限 3、sts部署文件密码都要修改好在部署 yaml资源文件如下: #配置mysql的root密码再部署,如果部署了在修改root密码就会失败,必须在初始化就把root密码修改好 #部署采…

高级IO—poll,epoll,reactor

高级IO—poll,epoll,reactor 文章目录 高级IO—poll,epoll,reactorpoll函数poll函数接口poll服务器 epollepoll的系统调用epoll_createepoll_ctlepoll_wait epoll的工作原理epoll的工作方式水平触发边缘触发 epoll服务器 reactor poll函数 poll函数是一个用于多路复用的系统调…

【JavaEE初阶】死锁问题

目录 一、死锁的三种典型场景 1、一个线程,一把锁 2、两个线程,两把锁 3、N个线程,M把锁 死锁,是多线程代码中的一类经典问题。我们知道加锁是能解决线程安全问题的,但是如果加锁的方式不当,就可能产生死…

视图层、模板(补充)

视图层 响应对象 响应---》本质都是 HttpResponse HttpResponse---》字符串render----》放个模板---》模板渲染是在后端完成 js代码是在客户端浏览器里执行的模板语法是在后端执行的redirect----》重定向 字符串参数不是是空的状态码是 3开头JsonResponse---》json格式数据 …

ffmpeg在centos系统下的源文件下载脚本及编译脚本

下载脚本: #只做下载的动作,之后可以移动到其它环境下编译 #from https://trac.ffmpeg.org/wiki/CompilationGuide/Centos #yum install autoconf automake bzip2 bzip2-devel cmake freetype-devel gcc gcc-c git libtool make pkgconfig zlib-devel m…