解决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); // 略大于对话框关闭动画时间
};
相关推荐
xiguolangzi6 分钟前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
用户6823806032258 分钟前
前端会用到的数据结构--堆(HEAP)
前端
莫空00009 分钟前
深入理解JavaScript的Reflect API:从原理到实践
前端·面试
卡布叻_星星9 分钟前
后端 Maven打包 JAR 文件、前端打包dist文件、通过后端服务访问前端页面、Nginx安装与部署
前端·maven·jar
前端(从入门到入土)25 分钟前
前端请求后端服务403(Invalid CORS request)
前端
大猩猩X38 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
蓝天白云下遛狗1 小时前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端