vue3 ,使用vant4的van-datetime-picker点击关闭后怎样恢复默认值

在VanDatetimePicker关闭后，可以使用ref获取VanDatetimePicker组件实例，在组件实例中调用reset方法来恢复默认值。

示例代码：

<template>
  <van-datetime-picker
    v-model="currentDate"
    ref="datetimePicker"
    title="选择日期时间"
    type="datetime"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</template>

<script>
import { ref } from 'vue';
import { DatetimePicker } from 'vant';

export default {
  components: {
    [DatetimePicker.name]: DatetimePicker,
  },

  setup() {
    const currentDate = ref(new Date());
    const minDate = ref(new Date(new Date().getFullYear() - 10, 0, 1));
    const maxDate = ref(new Date(new Date().getFullYear() + 10, 11, 31));

    const datetimePickerRef = ref(null);

    const onConfirm = () => {
      console.log(currentDate.value);
    };

    const onCancel = () => {
      datetimePickerRef.value.reset();
    };

    return {
      currentDate,
      minDate,
      maxDate,
      datetimePickerRef,
      onConfirm,
      onCancel,
    };
  },
};
</script>

在上面的代码中，我们通过ref获取了VanDatetimePicker组件实例，并将其赋值给datetimePickerRef变量。然后，在VanDatetimePicker组件的取消事件中，我们调用了datetimePickerRef.value.reset()方法来恢复默认值。