el-dialog鼠标在遮罩层松开会意外关闭，教程图文并茂

报错效果如下

在遮罩层处松开鼠标会导致模态框意外关闭，体验感极差

解决方法

工作流程

1. 点击遮罩层：

   • 用户在对话框遮罩层上点击

2. 触发 before-close 事件：

   • 由于 closeOnClickModal 默认为 true，Element UI 检测到点击遮罩层的行为
   • 在实际关闭对话框前，Element UI 调用 before-close 钩子（在本例中是 beforeDialogClose 方法）

3. 收集鼠标行为信息：

   • 在整个过程中，通过绑定在最外层 div 的 mousedown 和 mouseup 事件收集用户鼠标行为
   • 这些事件记录了用户按下和抬起鼠标时所在元素的 classList
   • 这些信息将被用于在 beforeDialogClose 中做出决策

4. 拦截器模式：

   • before-close 确实就像一个拦截器，类似于 Vue Router 的导航守卫中的 next() 函数
   • 它给开发者提供了一个决定点，可以自定义规则来决定是否继续关闭操作
   • 在这个例子中，只有当鼠标按下和抬起都在同一个元素（遮罩层或关闭按钮）上时，才调用 done() 放行关闭
   • 如果不调用 done()，对话框将保持打开状态

这种实现方式非常巧妙，它增强了用户体验，防止了因为用户在对话框内开始点击然后拖到外部释放鼠标等误操作导致的意外关闭。这是对 Element UI 原有功能的一种优雅扩展。

代码实现

1.图

2.文

@mousedown.stop="dialogMousedown"
@mouseup.stop="dialogMouseup"

 :before-close="beforeDialogClose"

  mousedownCls: [],
    mouseupCls: [],

    dialogMousedown(e) {
    this.mousedownCls = [...e.target.classList]
    console.log('鼠标按下的元素类名:', this.mousedownCls)
  },
  dialogMouseup(e) {
    this.mouseupCls = [...e.target.classList]
    console.log('鼠标抬起的元素类名:', this.mouseupCls)
  },
  beforeDialogClose(done) {
    const isWrapper =
      this.mousedownCls.includes('el-dialog__wrapper') && this.mouseupCls.includes('el-dialog__wrapper')
    const isClose = this.mousedownCls.includes('el-dialog__close') && this.mouseupCls.includes('el-dialog__close')
    if (isWrapper || isClose) {
      done()
    }
  },

效果展示