vant代码实现用同一个DatetimePicker完成不同dialog的年月日选择实例

以下是一个使用Vant组件库的代码示例，实现了通过同一个DatetimePicker组件来选择不同的年、月、日。

<template>
  <div class="container">
    <van-cell title="选择年份" @click="showYearPicker" :value="selectedYear"></van-cell>
    <van-cell title="选择月份" @click="showMonthPicker" :value="selectedMonth"></van-cell>
    <van-cell title="选择日期" @click="showDatePicker" :value="selectedDate"></van-cell>
    <van-datetime-picker
      v-model="showPicker"
      :type="pickerType"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="handleConfirm"
    ></van-datetime-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      pickerType: 'year',
      minDate: new Date(2000, 0, 1), // 最小日期
      maxDate: new Date(2030, 11, 31), // 最大日期
      selectedYear: null,
      selectedMonth: null,
      selectedDate: null
    };
  },
  methods: {
    showYearPicker() {
      this.pickerType = 'year';
      this.showPicker = true;
    },
    showMonthPicker() {
      this.pickerType = 'month';
      this.showPicker = true;
    },
    showDatePicker() {
      this.pickerType = 'date';
      this.showPicker = true;
    },
    handleConfirm(value) {
      this.showPicker = false;
      if (this.pickerType === 'year') {
        this.selectedYear = value.getFullYear();
      } else if (this.pickerType === 'month') {
        this.selectedMonth = value.getMonth() + 1;
      } else if (this.pickerType === 'date') {
        this.selectedDate = value.getDate();
      }
    }
  }
};
</script>

在上面的示例中，我们通过点击不同的van-cell组件来显示不同的选择器。pickerType变量用于标识当前选择器的类型，它会在点击不同的van-cell时进行设置。showPicker变量用于控制选择器的显示和隐藏。

当用户点击选择器的确认按钮时，会触发confirm事件，我们在handleConfirm方法中根据选择器的类型来更新对应的年、月、日的值。

注意，我们通过v-model指令将showPicker与van-datetime-picker组件的显示状态进行绑定，以实现选择器的显示和隐藏。

此外，我们还可以通过设置min-date和max-date属性来限制用户选择的日期范围。

希望对你有帮助