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

问题背景

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

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

2. 第二次参数为undefined

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

问题分析(ElementPlus特性相关)

组件结构特征

 
  

双重触发原因

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

针对性解决方案

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

 
  取消

2. 统一对话框关闭处理

 
  


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

let dialogClosing = false;

const closeBindingRole = (isSuccess: boolean) => {
  if (dialogClosing) return;
  
  dialogClosing = true;
  emit("closeBindingRoleDialog", isSuccess);
  
  // 兼容ElementPlus动画时长
  setTimeout(() => {
    dialogClosing = false;
  }, 300); // 略大于对话框关闭动画时间
};

你可能感兴趣的:(妍思码匠的前端乐园,vue.js,elementui,前端,el-dialog,对话框)