您的位置:首页 > 新闻 > 会展 > 325建筑兼职网_广州网站设计费用_产品软文范例大全_网站网址查询工具

325建筑兼职网_广州网站设计费用_产品软文范例大全_网站网址查询工具

2025/3/14 23:46:55 来源:https://blog.csdn.net/wjs0406/article/details/146172801  浏览:    关键词:325建筑兼职网_广州网站设计费用_产品软文范例大全_网站网址查询工具
325建筑兼职网_广州网站设计费用_产品软文范例大全_网站网址查询工具

问题背景

        在使用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); // 略大于对话框关闭动画时间
};

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com