前言
在项目中,有时需要实现在不关闭对话框的情况下,正常操作其他区域的Dom;
element plus的dialog组件的modal属性可以关闭灰色遮罩层, 但仍然无法操作其他区域的Dom;
原因
因为dialog除了model以外还存在着透明的遮罩层, 导致我们无法操作其他区域的Dom;
解决
可使用css3属性: pointer-events
pointer-events: none;
元素及其后代元素将不会作为鼠标事件的对象。但是如果后代元素的pointer-events属性为其他值(如:auto)时,鼠标事件作用于这个后代元素;
pointer-events: auto;
可以响应鼠标事件;
代码
<!--
:close-on-click-modal="false":设置当点击对话框以外区域时,对话框不会关闭
:modal="false":取消灰色遮罩层,但还是会有透明的遮罩层
@open="handleOverlay":渲染对话框时回调函数,获取对话框Dom,操作穿透遮罩层
-->
<el-dialog
v-model="dialogVisible"
title="标题"
draggable
:modal="false"
:close-on-click-modal="false"
@open="handleOverlay"
>
<span>对话框内容</span>
</el-dialog>
在你的点击事件中, 修改dialogVisible值, 显示对话框
dialogVisible=true
对话框渲染出来后,执行回调函数
<script>
// 穿透遮罩层
function handleOverlay() {
//获取对话框Dom
var overlay = document.querySelector('.is-draggable');
// 设置pointerEvents='auto',使对话框可以正常操作
overlay.style.pointerEvents = 'auto';
//通过对话框Dom获取遮罩层Dom,修改其pointerEvents = 'none',使其他区域可正常操作
//第一层遮罩层
var overlayFa = overlay.parentNode;
overlayFa.style.pointerEvents = 'none';
//第二层遮罩层
var overlayGfa = overlay.parentNode.parentNode;
overlayGfa.style.pointerEvents = 'none';
}
</script>
如果对你有帮助, 就请点一个赞吧