vue项目监听el-dialog封装组件 , 关闭右上角的关闭回调事件,在父组件中做操作

在Vue项目中，如果你想监听`el-dialog`封装组件的右上角关闭按钮的回调事件，并在父组件中进行操作，你可以使用自定义事件。

首先，在封装的组件中，你需要在关闭按钮的点击事件中触发一个自定义事件，例如`closeDialog`：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <div>
      <!-- 组件内容 -->
    </div>
    <span slot="header" class="dialog-close-btn" @click="closeDialog">&times;</span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    closeDialog() {
      // 触发自定义事件
      this.$emit('close');
      // 关闭对话框
      this.dialogVisible = false;
    }
  }
};
</script>

然后，在父组件中使用这个封装的组件，并监听自定义事件：

<template>
  <div>
    <!-- 其他组件内容 -->
    <custom-dialog @close="handleDialogClose"></custom-dialog>
  </div>
</template>

<script>
import CustomDialog from './CustomDialog.vue';

export default {
  components: {
    CustomDialog
  },
  methods: {
    handleDialogClose() {
      // 在这里进行操作
      console.log('Dialog closed!');
    }
  }
};
</script>

这样，当你点击封装组件中的关闭按钮时，父组件中的`handleDialogClose`方法就会被调用，你可以在这个方法中进行需要的操作。