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()
    }
  },

效果展示

相关推荐
用户38022585982413 分钟前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag16 分钟前
报错 400 和405解决方案
vue.js·spring boot
Web小助手21 分钟前
js高级程序设计(日期)
javascript
白杨木影子被拉长22 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
Web小助手22 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_23 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价23 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
Web小助手31 分钟前
js高级程序设计(1/2章节)
javascript
长路 ㅤ   41 分钟前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github