如何在Vue3中使用Element Plus的DateTimePicker组件时，实现手动关闭日期和时间选择器的弹出窗口？

在 Vue3 中使用 Element Plus 的 DateTimePicker 组件时，如果你想实现手动关闭日期和时间选择器的弹出窗口，你可以通过事件监听和组件实例方法来控制。以下是基本步骤：

1. 首先，在模板中引用 DateTimePicker 组件，并添加 `ref` 属性以便获取到组件实例：

<template>
  <el-date-picker
    ref="dateTimePicker"
    type="datetime" <!-- 或者 "daterange", 根据需要选择 -->
    :options="dateOptions"
    v-model="selectedDateTime"
    @close="handleClose"
  ></el-date-picker>
</template>

2. 定义 `dateOptions` 和 `selectedDateTime` 数据属性用于设置默认选项和存储用户选择的时间：

<script>
export default {
  data() {
    return {
      dateOptions: { // 初始化日期时间配置
        confirmLoading: false,
        timeFormat: 'HH:mm:ss',
      },
      selectedDateTime: null, // 当前选择的时间
    };
  },
  methods: {
    handleClose() {
      this.$refs.dateTimePicker.close(); // 手动关闭弹出框
      // 如果你想清除选中的时间，可以在这里操作
      this.selectedDateTime = null;
    },
  },
};
</script>

3. 在你需要关闭弹出框的地方触发 `handleClose` 方法，比如点击其他地方或按某个按钮：

<!-- 示例：当用户点击外部区域时关闭日期时间选择器 -->
<div @click="$refs.dateTimePicker.close()" class="custom-close-btn"></div>