element plus的dialog组件如何实现不关闭窗口时正常操作其他区域Dom

解决ElementPlusDialog组件阻止背景DOM操作问题

原创已于 2023-07-02 02:01:06 修改 · 2.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #elementui #css3 #css

于 2023-07-02 01:52:29 首次发布

文章介绍了在使用ElementPlus的Dialog组件时，如何在不关闭对话框的情况下操作背景DOM。通过设置`pointer-events`属性，使得对话框内部可操作，而透明遮罩层变为不可操作，从而实现这一功能。解决方案包括修改Dialog的CSS样式以及在打开对话框时的回调函数中处理遮罩层的鼠标事件。

前言

在项目中，有时需要实现在不关闭对话框的情况下，正常操作其他区域的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>

如果对你有帮助, 就请点一个赞吧