Vant 代码实现用同一个 DatetimePicker 完成不同 Dialog 的年、月、日选择 - 示例
<p>"<template>\n <div class="container">\n <van-cell title="选择年份" @click="showYearPicker" :value="selectedYear"></van-cell>\n <van-cell title="选择月份" @click="showMonthPicker" :value="selectedMonth"></van-cell>\n <van-cell title="选择日期" @click="showDatePicker" :value="selectedDate"></van-cell>\n <van-datetime-picker\n v-model="showPicker"\n :type="pickerType"\n :min-date="minDate"\n :max-date="maxDate"\n @confirm="handleConfirm"\n ></van-datetime-picker>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n showPicker: false,\n pickerType: 'year',\n minDate: new Date(2000, 0, 1), // 最小日期\n maxDate: new Date(2030, 11, 31), // 最大日期\n selectedYear: null,\n selectedMonth: null,\n selectedDate: null\n };\n },\n methods: {\n showYearPicker() {\n this.pickerType = 'year';\n this.showPicker = true;\n },\n showMonthPicker() {\n this.pickerType = 'month';\n this.showPicker = true;\n },\n showDatePicker() {\n this.pickerType = 'date';\n this.showPicker = true;\n },\n handleConfirm(value) {\n this.showPicker = false;\n if (this.pickerType === 'year') {\n this.selectedYear = value.getFullYear();\n } else if (this.pickerType === 'month') {\n this.selectedMonth = value.getMonth() + 1;\n } else if (this.pickerType === 'date') {\n this.selectedDate = value.getDate();\n }\n }\n }\n};\n</script>\n\n在上面的示例中，我们通过点击不同的<code>van-cell</code>组件来显示不同的选择器。<code>pickerType</code>变量用于标识当前选择器的类型，它会在点击不同的<code>van-cell</code>时进行设置。<code>showPicker</code>变量用于控制选择器的显示和隐藏。\n\n当用户点击选择器的确认按钮时，会触发<code>confirm</code>事件，我们在<code>handleConfirm</code>方法中根据选择器的类型来更新对应的年、月、日的值。\n\n注意，我们通过<code>v-model</code>指令将<code>showPicker</code>与<code>van-datetime-picker</code>组件的显示状态进行绑定，以实现选择器的显示和隐藏。\n\n此外，我们还可以通过设置<code>min-date</code>和<code>max-date</code>属性来限制用户选择的日期范围。\n\n希望对你有帮助！</p>
原文地址: https://www.cveoy.top/t/topic/pAj4 著作权归作者所有。请勿转载和采集!