vant代码实现下拉框分别选择年月日的实例

以下是一个使用Vant组件库实现下拉框选择年、月、日的实例：

<template>
  <div>
    <van-field label="选择日期">
      <van-picker
        :columns="yearList"
        @change="handleYearChange"
        placeholder="请选择年份"
      />
      <van-picker
        :columns="monthList"
        @change="handleMonthChange"
        placeholder="请选择月份"
      />
      <van-picker
        :columns="dayList"
        @change="handleDayChange"
        placeholder="请选择日期"
      />
    </van-field>
    <van-button type="primary" @click="submit">提交</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yearList: [], // 年份列表
      monthList: [], // 月份列表
      dayList: [], // 日期列表
      selectedYear: '', // 已选年份
      selectedMonth: '', // 已选月份
      selectedDay: '', // 已选日期
    };
  },
  mounted() {
    this.initYearList();
    this.initMonthList();
    this.initDayList();
  },
  methods: {
    // 初始化年份列表
    initYearList() {
      const currentYear = new Date().getFullYear();
      const yearList = [];
      for (let year = currentYear - 100; year <= currentYear; year++) {
        yearList.push(year.toString());
      }
      this.yearList = yearList;
    },
    // 初始化月份列表
    initMonthList() {
      const monthList = [];
      for (let month = 1; month <= 12; month++) {
        monthList.push(month.toString().padStart(2, '0'));
      }
      this.monthList = monthList;
    },
    // 初始化日期列表
    initDayList() {
      const dayList = [];
      for (let day = 1; day <= 31; day++) {
        dayList.push(day.toString().padStart(2, '0'));
      }
      this.dayList = dayList;
    },
    // 年份选择事件
    handleYearChange(year) {
      this.selectedYear = year;
    },
    // 月份选择事件
    handleMonthChange(month) {
      this.selectedMonth = month;
    },
    // 日期选择事件
    handleDayChange(day) {
      this.selectedDay = day;
    },
    // 提交按钮点击事件
    submit() {
      if (!this.selectedYear || !this.selectedMonth || !this.selectedDay) {
        this.$toast('请选择完整的日期');
        return;
      }
      const selectedDate = `${this.selectedYear}-${this.selectedMonth}-${this.selectedDay}`;
      this.$toast(`已选择日期：${selectedDate}`);
    },
  },
};
</script>

在上述代码中，我们使用van-picker组件实现了下拉框选择年、月、日的功能。通过@change事件监听选择的值，然后将选择的年、月、日分别存储在selectedYear、selectedMonth、selectedDay变量中。点击提交按钮时，判断是否选择了完整的日期，如果是，则弹出已选择的日期。否则，弹出提示信息要求选择完整的日期。

注意：上述代码使用了Vant 2.x版本的组件，如果使用Vant 3.x版本的组件，语法可能会有所不同。请根据实际情况进行调整