关于el-dialog中@close事件和取消确认按钮并用，会触发两次关闭表单的操作，如何解决，不想重复调用

在Element UI的`el-dialog`组件中，当你设置了取消确认按钮并且监听了`@close`事件，有时确实可能会触发关闭操作两次。这通常是由于点击取消按钮后，同时触发了默认的关闭事件和自定义的`close`函数。要解决这个问题，你可以采取以下策略：

1. **阻止默认行为**：当用户点击取消按钮时，可以在事件处理器中添加判断，比如检查当前状态或对话是否需要关闭，如果是则仅执行一次关闭操作，并通过`event.preventDefault()`阻止其默认的关闭行为。

<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. **单独处理关闭和取消**：你可以为这两个动作创建独立的事件处理器，分别负责关闭和处理取消操作。

<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`处理。