Vant 代码实现点击下拉框选择年月日 - Vue 日期选择器示例

以下是一个用 vant 库实现点击下拉框选择年月日的示例代码：\n\nvue\n<template>\n <div>\n <van-datetime-picker\n v-model="date"\n type="date"\n title="选择日期"\n @confirm="onConfirm"\n >\n <template #columns>\n <van-picker-column\n :options="yearOptions"\n :default-index="defaultYearIndex"\n @change="onYearChange"\n ></van-picker-column>\n <van-picker-column\n :options="monthOptions"\n :default-index="defaultMonthIndex"\n @change="onMonthChange"\n ></van-picker-column>\n <van-picker-column\n :options="dayOptions"\n :default-index="defaultDayIndex"\n @change="onDayChange"\n ></van-picker-column>\n </template>\n </van-datetime-picker>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n date: new Date(),\n yearOptions: [],\n monthOptions: [],\n dayOptions: [],\n defaultYearIndex: 0,\n defaultMonthIndex: 0,\n defaultDayIndex: 0,\n };\n },\n mounted() {\n this.initOptions();\n },\n methods: {\n initOptions() {\n const currentYear = new Date().getFullYear();\n const yearOptions = [];\n const monthOptions = [];\n const dayOptions = [];\n\n // 生成年份选项\n for (let i = currentYear - 100; i <= currentYear; i++) {\n yearOptions.push(i.toString());\n }\n\n // 生成月份选项\n for (let i = 1; i <= 12; i++) {\n monthOptions.push(i.toString());\n }\n\n // 生成日期选项\n for (let i = 1; i <= 31; i++) {\n dayOptions.push(i.toString());\n }\n\n this.yearOptions = yearOptions;\n this.monthOptions = monthOptions;\n this.dayOptions = dayOptions;\n },\n onYearChange(index) {\n this.defaultYearIndex = index;\n },\n onMonthChange(index) {\n this.defaultMonthIndex = index;\n },\n onDayChange(index) {\n this.defaultDayIndex = index;\n },\n onConfirm(value) {\n console.log(value);\n },\n },\n};\n</script>\n\n\n在上述代码中，通过van-datetime-picker组件实现了一个日期选择器。日期选择器中的每个选项通过van-picker-column组件生成，分别对应年、月、日。在mounted钩子函数中，通过调用initOptions方法初始化选项列表。用户选择日期后，会触发@confirm事件，可以在onConfirm方法中获取选择的日期值。