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

问题背景

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

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

2. 第二次参数为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); // 略大于对话框关闭动画时间
};

Vue3 中,使用 Element Plus 的单页面应用中,你可以通过以下步骤创建一个点击按钮显示 `el-dialog` 弹窗的功能: 1. 首先,确保已经安装了 `vue`, `vue-router`, 和 `element-plus` 相关依赖。如果没有,可以通过 npm 或 yarn 安装: ```bash npm install vue router element-plus # 或者 yarn add vue router element-plus ``` 2. 创建一个组件,比如 `DialogComponent.vue`,这个组件将会包含 el-dialog 元素: ```html <template> <el-dialog :visible.sync="dialogVisible" title="标题"> <p>这是弹窗的内容</p> <el-button @click="handleClose">关闭</el-button> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, }; }, methods: { handleClose() { this.dialogVisible = false; }, }, }; </script> ``` 3. 在父组件(如 App.vue 或者某个需要弹窗的组件)中,导入 Dialog 组件,并在模板中添加一个按钮用于触发弹窗: ```html <template> <div id="app"> <button @click="showDialog">点击显示弹窗</button> <DialogComponent ref="dialogRef"/> </div> </template> <script> import DialogComponent from './DialogComponent.vue'; export default { components: { DialogComponent, }, setup() { const showDialog = () => { this.$refs.dialogRef.dialogVisible = true; // 显示对话框 }; return { showDialog }; }, }; </script> ``` 现在,当你点击 "点击显示弹窗" 按钮时,`el-dialog` 就会显示出来。关闭弹窗则可以通过 `handleClose` 方法完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

妍思码匠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值