解决ElementPlus对话框el-dialog中关闭事件重复触发问题
目录
解决ElementPlus对话框el-dialog中关闭事件重复触发问题
问题背景
在使用ElementPlus的el-dialog组件时，发现点击取消按钮会触发两次关闭事件：
第一次参数为PointerEvent（事件对象）
第二次参数为undefined
需要确保点击取消按钮时仅触发一次有效关闭事件，并传递正确的布尔值参数。
问题分析（ElementPlus特性相关）
组件结构特征
<el-dialog
:modelValue="visible"
@close="handleClose"> <!-- ElementPlus内置关闭事件 -->
<template #footer>
<el-button @click="close">取消</el-button>
</template>
</el-dialog>双重触发原因
点击取消按钮：会触发close()关闭函数 → 然后触发对话框的handleClose()函数（内置的@close事件）
针对性解决方案
1. 显式传参阻断事件对象
<el-button
class="footer__button"
@click="closeBindingRole(false)"> <!-- 关键修改 -->
取消
</el-button>2. 统一对话框关闭处理
<el-dialog
:modelValue="bindingRoleVisible"
@close="handleDialogClose"> <!-- 专用关闭处理 -->
<!-- 对话框内容 -->
</el-dialog>
<script>
// 统一关闭入口
const handleDialogClose = () => {
closeBindingRole(false);
};
</script>3. 增强型状态锁（ElementPlus适配版）
let dialogClosing = false;
const closeBindingRole = (isSuccess: boolean) => {
if (dialogClosing) return;
dialogClosing = true;
emit("closeBindingRoleDialog", isSuccess);
// 兼容ElementPlus动画时长
setTimeout(() => {
dialogClosing = false;
}, 300); // 略大于对话框关闭动画时间
};