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

报错效果如下

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

解决方法

工作流程

  1. 点击遮罩层

    • 用户在对话框遮罩层上点击
  2. 触发 before-close 事件

    • 由于 closeOnClickModal 默认为 true,Element UI 检测到点击遮罩层的行为
    • 在实际关闭对话框前,Element UI 调用 before-close 钩子(在本例中是 beforeDialogClose 方法)
  3. 收集鼠标行为信息

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

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

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

代码实现

1.图

2.文

js 复制代码
@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()
    }
  },

效果展示

相关推荐
怪只怪满眼尽是人间烟火2 分钟前
Linux端口监控脚本
运维·javascript
阿金要当大魔王~~14 分钟前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
hey_ner19 分钟前
页面PDF文件格式预览(不使用pdf.js)
前端·javascript
over69740 分钟前
JavaScript恋爱物语:当代码学会送花,对象字面量也能当红娘!
javascript
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
三小河1 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort1 小时前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式