解决ElementPlus对话框el-dialog中关闭事件重复触发问题

问题背景

在使用ElementPlus的el-dialog组件时,发现点击取消按钮会触发两次关闭事件:

  1. 第一次参数为PointerEvent(事件对象)

  2. 第二次参数为undefined

需要确保点击取消按钮时仅触发一次有效关闭事件,并传递正确的布尔值参数。

问题分析(ElementPlus特性相关)

组件结构特征

html 复制代码
<el-dialog
  :modelValue="visible"
  @close="handleClose"> <!-- ElementPlus内置关闭事件 -->
  <template #footer>
    <el-button @click="close">取消</el-button>
  </template>
</el-dialog>

双重触发原因

点击取消按钮:会触发close()关闭函数 → 然后触发对话框的handleClose()函数(内置的@close事件)

针对性解决方案

1. 显式传参阻断事件对象

html 复制代码
<el-button 
  class="footer__button" 
  @click="closeBindingRole(false)"> <!-- 关键修改 -->
  取消
</el-button>

2. 统一对话框关闭处理

html 复制代码
<el-dialog
  :modelValue="bindingRoleVisible"
  @close="handleDialogClose"> <!-- 专用关闭处理 -->
  <!-- 对话框内容 -->
</el-dialog>

<script>
// 统一关闭入口
const handleDialogClose = () => {
  closeBindingRole(false);
};
</script>

3. 增强型状态锁(ElementPlus适配版)

javascript 复制代码
let dialogClosing = false;

const closeBindingRole = (isSuccess: boolean) => {
  if (dialogClosing) return;
  
  dialogClosing = true;
  emit("closeBindingRoleDialog", isSuccess);
  
  // 兼容ElementPlus动画时长
  setTimeout(() => {
    dialogClosing = false;
  }, 300); // 略大于对话框关闭动画时间
};
相关推荐
南风木兮丶7 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少20 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务21 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
mldong24 分钟前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
Mintopia28 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia30 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie32 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei32 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲34 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun
Olrookie35 分钟前
若依前后端分离版学习笔记(十七)——ruoyi开发规范&流程,请求流程,依赖引入,组件注册&通信
前端·笔记