关于el-dialog中@close事件和取消确认按钮并用,会触发两次关闭表单的操作(!表单为子组件时)

  关于el-dialog中@close事件和取消确认按钮,在点击后关闭表单行为后,也会触发@close事件,如果使用相同函数(A)会执行两次(!!前提是当表单为子组件时,需要通过父亲传递的关闭表单函数触发表单关闭,因此无法直接更改visible的变量关闭表单),在其他文章中看到说取消确认按钮换一个函数,但是换一个函数表单始终是要被关闭的,那最终还是会触发@close事件,本人想到了一个简单的处理方法,就是在关闭表单后被执行的函数中,加入表单显示隐藏状态的判断,如果表单已经被关闭了,那么就不执行。如此便能解决函数被执行两次的冲突问题

Element UI的`el-dialog`组件中,当你设置了取消确认按钮并且监听了`@close`事件,有确实可能会触发关闭操作两次。这通常是由于点击取消按钮后,同触发了默认的关闭事件自定义的`close`函数。要解决这个问题,你可以采取以下策略: 1. **阻止默认行为**:当用户点击取消按钮,可以在事件处理器中添加判断,比如检查当前状态或对话是否需要关闭,如果是则仅执行一次关闭操作,并通过`event.preventDefault()`阻止其默认的关闭行为。 ```javascript <template> <el-dialog :visible.sync="dialogVisible" @close="handleClose"> <!-- ... --> <el-button type="primary" @click.prevent="confirm">确定</el-button> <el-button @click="cancel">取消</el-button> </el-dialog> </template> <script> export default { methods: { handleClose() { if (!/* 需要阻止关闭的情况 */) { this.dialogVisible = false; } }, cancel() { // 取消处理逻辑,这里可以只记录操作而不真正关闭dialog console.log('取消'); }, }, }; </script> ``` 2. **单独处理关闭取消**:你可以为这两个动作创建独立的事件处理器,分别负责关闭处理取消操作。 ```javascript <template> <el-dialog :visible.sync="dialogVisible" @confirm="onConfirm" @cancel="onCancel"> <!-- ... --> <el-button type="primary" @click="onConfirm">确定</el-button> <el-button @click="onCancel">取消</el-button> </el-dialog> </template> <script> export default { methods: { onConfirm() { this.dialogVisible = false; }, onCancel() { console.log('取消操作'); }, }, }; </script> ``` 在这个例子中,`@close`事件将不再直接关联到关闭操作,而由`onConfirm`处理。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值