关于el-dialog中@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`处理。