「Vue 项目中实现智能时间选择：带业务规则的级联选择器」

#创作灵感

公司业务需要，某个时间节点前可以选择到月，某个时间节点后只能选择季度

vue2 Vant2

javascript

import { Cascader, Field, Form, Popup, Button } from 'vant';
import 'vant/lib/index.css';export default {name: 'CascaderPage',components: {VanCascader: Cascader,VanField: Field,VanForm: Form,VanPopup: Popup,VanButton: Button},props: {title: {type: String,default: '选择时间'},// 起始年份，默认从当前年往前5年startYear: {type: Number,default: new Date().getFullYear() - 5},// 结束年份，默认从当前年往后5年endYear: {type: Number,default: new Date().getFullYear() + 5}},data() {return {showPopup: false,cascaderValue: '',fieldValue: '',selectedResult: '',fieldNames: {text: 'label',value: 'value',children: 'children'}};},computed: {// 生成级联选择的选项options() {const yearOptions = [];// 生成年份选项for (let year = this.startYear; year <= this.endYear; year++) {const quarterOptions = [];// 生成季度选项for (let quarter = 1; quarter <= 4; quarter++) {const quarterObj = {label: `${year}年第${quarter}季度`,value: `${year}-Q${quarter}`// 移除默认children属性，避免空选项};// 判断是否需要生成月份选项// 规则：2025年9月及之前需要月份，之后不需要if (year < 2025) {// 2025年之前，所有季度都需要月份quarterObj.children = this.getMonthsByQuarter(quarter);} else if (year === 2025) {// 2025年，只有前3季度需要月份if (quarter <= 3) {quarterObj.children = this.getMonthsByQuarter(quarter);}}// 2025年之后的年份，不生成月份选项quarterOptions.push(quarterObj);}yearOptions.push({label: `${year}年`,value: year.toString(),children: quarterOptions});}return yearOptions;}},methods: {// 根据季度获取对应的月份getMonthsByQuarter(quarter) {const months = [];let startMonth, endMonth;switch (quarter) {case 1:startMonth = 1;endMonth = 3;break;case 2:startMonth = 4;endMonth = 6;break;case 3:startMonth = 7;endMonth = 9;break;case 4:startMonth = 10;endMonth = 12;break;default:return [];}for (let month = startMonth; month <= endMonth; month++) {months.push({label: `${month}月`,value: month.toString()});}return months;},// 处理选择变化 - 只在选择完最后一级选项时关闭handleChange(value) {const { selectedOptions, tabIndex } = value;console.log('选择变化:', value, selectedOptions, tabIndex);// 如果没有选择值，不处理if (!selectedOptions || selectedOptions.length === 0) return;// 获取当前选中的年份const selectedYear = parseInt(selectedOptions[0].value);// 构建正确格式的selectedValues数组const selectedValues = [];selectedValues.push(selectedOptions[0].value); // 年份if (selectedOptions.length >= 2) {// 对于季度，提取数字部分const quarterStr = selectedOptions[1].value;if (quarterStr.includes('-Q')) {selectedValues.push(quarterStr.split('-Q')[1]); // 只提取季度数字} else {selectedValues.push(quarterStr);}}if (selectedOptions.length === 3) {selectedValues.push(selectedOptions[2].value); // 月份}// 检查是否已经选择到最后一级if (selectedOptions.length === 2) {// 情况1: 如果是2025年之后或2025年第4季度，选择完季度就关闭const quarterValue = selectedOptions[1].value;const quarter = parseInt(quarterValue.includes('-Q') ? quarterValue.split('-Q')[1] : quarterValue);if (selectedYear > 2025 || (selectedYear === 2025 && quarter === 4)) {this.onConfirm(selectedValues, selectedOptions);}// 其他情况：选择完季度后继续选择月份，不关闭} else if (selectedOptions.length === 3) {// 情况2: 选择完月份后关闭this.onConfirm(selectedValues, selectedOptions);}},// 确认选择onConfirm(selectedValues, selectedOptions) {if (!selectedValues || selectedValues.length === 0) return;// 格式化选中的结果const formattedResult = this.formatSelectedResult(selectedValues);this.fieldValue = formattedResult;this.selectedResult = `您选择了：${formattedResult}`;this.showPopup = false;},// 格式化选中的结果formatSelectedResult(selectedValues) {if (!selectedValues || selectedValues.length === 0) return '';// 处理selectedValues可能是字符串的情况let values = Array.isArray(selectedValues) ? selectedValues : [selectedValues];// 如果只有一个值，尝试从值中解析出年份if (values.length === 1) {const value = values[0];// 检查是否是季度格式if (typeof value === 'string' && value.includes('-Q')) {const parts = value.split('-Q');const year = parts[0];const quarter = parts[1];return `${year}年第${quarter}季度`;}// 只显示年份return `${value}年`;}let result = '';// 年份result += `${values[0]}年`;// 季度if (values.length >= 2) {let quarter;if (typeof values[1] === 'string' && values[1].includes('-Q')) {// 处理字符串格式的季度值quarter = values[1].split('-Q')[1];} else {// 直接使用季度值quarter = values[1];}result += `第${quarter}季度`;}// 月份 - 确保月份显示为两位数格式if (values.length === 3) {const month = parseInt(values[2]);// 格式化月份为两位数const formattedMonth = month < 10 ? `0${month}` : `${month}`;result += `${formattedMonth}月`;}return result;},// 表单提交onSubmit(values) {if (!this.fieldValue) {this.$toast('请选择时间');return;}this.$toast(`提交成功：${this.fieldValue}`);}},mounted() {// 生命周期钩子：设置默认选中最后一项try {if (this.options.length > 0) {const lastYear = this.options[this.options.length - 1];if (lastYear.children && lastYear.children.length > 0) {const lastQuarter = lastYear.children[lastYear.children.length - 1];const selected = [lastYear.value,lastQuarter.value];// 如果有月份选项，也选中最后一个if (lastQuarter.children && lastQuarter.children.length > 0) {selected.push(lastQuarter.children[lastQuarter.children.length - 1].value);}this.cascaderValue = selected.join('/');this.fieldValue = this.formatSelectedResult(selected);this.selectedResult = `您选择了：${this.fieldValue}`;}}} catch (error) {console.error('设置默认选中项失败:', error);}}
};

HTML

  <div class="cascader-container"><h2>Vant 时间级联选择器示例</h2><van-form @submit="onSubmit"><div class="field-container"><van-fieldv-model="fieldValue"readonlylabel="时间选择"placeholder="请选择时间":value="fieldValue"/><van-button type="primary" @click="showPopup = true"style="margin-left: 10px; min-width: 100px;">选择时间</van-button></div></van-form><!-- Popup弹窗 --><van-popupv-model="showPopup"roundposition="bottom":style="{ height: '80%' }"><div class="popup-header"><h3>{{ title }}</h3><van-button type="text" @click="showPopup = false"style="position: absolute; right: 16px; top: 16px;">取消</van-button></div><van-cascaderv-model="cascaderValue":options="options":field-names="fieldNames"@change="handleChange"@close="showPopup = false"placeholder=""/></van-popup><div class="result-section" v-if="selectedResult"><h3>选择结果</h3><p>{{ selectedResult }}</p></div></div>

css

.cascader-container {padding: 20px;max-width: 600px;margin: 0 auto;
}.field-container {display: flex;align-items: center;
}.popup-header {padding: 16px;border-bottom: 1px solid #eee;position: relative;text-align: center;
}.popup-header h3 {margin: 0;color: #333;font-size: 16px;
}.cascader-container h2 {text-align: center;margin-bottom: 20px;color: #333;
}.result-section {margin-top: 30px;padding: 15px;background-color: #f5f5f5;border-radius: 8px;
}.result-section h3 {margin-bottom: 10px;color: #666;
}.result-section p {color: #333;font-size: 16px;
}

vue3 vant4

HTML TS

<template><div class="date-cascader-container"><!-- 添加激活按钮触发显示 --><van-button @click="show = true">选择时间</van-button><van-popup v-model:show="show" round position="bottom"><van-cascaderv-model:selected-values="selectedValues":options="options":title="title"@change="handleChange"@close="show = false":field-names="fieldNames"placeholder=""/></van-popup><div v-if="selectedValues.length" class="selected-result">已选择: {{ formatSelectedResult() }}</div></div>
</template><script setup>
import { ref, computed, watch, onMounted } from 'vue';// 先定义show变量
const show = ref(false);
// 选中的值
const selectedValues = ref([]);// 配置级联选择的字段名
const fieldNames = {text: 'label',value: 'value',children: 'children'
};// 组件参数
const props = defineProps({title: {type: String,default: '选择时间'},// 起始年份，默认从当前年往前5年startYear: {type: Number,default: new Date().getFullYear() - 5},// 结束年份，默认从当前年往后5年endYear: {type: Number,default: new Date().getFullYear() + 5}
});// 生成级联选择的选项
const options = computed(() => {const yearOptions = [];// 生成年份选项for (let year = props.startYear; year <= props.endYear; year++) {const quarterOptions = [];// 生成季度选项for (let quarter = 1; quarter <= 4; quarter++) {const quarterObj = {label: `${year}年第${quarter}季度`,value: `${year}-Q${quarter}`// 移除默认children属性，避免空选项};// 判断是否需要生成月份选项// 规则：2025年9月及之前需要月份，之后不需要if (year < 2025) {// 2025年之前，所有季度都需要月份quarterObj.children = getMonthsByQuarter(quarter);} else if (year === 2025) {// 2025年，只有前3季度需要月份if (quarter <= 3) {quarterObj.children = getMonthsByQuarter(quarter);}}// 2025年之后的年份，不生成月份选项quarterOptions.push(quarterObj);}yearOptions.push({label: `${year}年`,value: year.toString(),children: quarterOptions});}return yearOptions;
});// 根据季度获取对应的月份
function getMonthsByQuarter(quarter) {const months = [];let startMonth, endMonth;switch (quarter) {case 1:startMonth = 1;endMonth = 3;break;case 2:startMonth = 4;endMonth = 6;break;case 3:startMonth = 7;endMonth = 9;break;case 4:startMonth = 10;endMonth = 12;break;default:return [];}for (let month = startMonth; month <= endMonth; month++) {months.push({label: `${month}月`,value: month.toString()});}return months;
}// 处理选择变化 - 只在选择完最后一级选项时关闭
const handleChange = ({ selectedValues, selectedOptions }) => {console.log('选择变化:', selectedValues, selectedOptions);// 如果没有选择值，不处理if (!selectedOptions || selectedOptions.length === 0) return;// 获取当前选中的年份const selectedYear = parseInt(selectedOptions[0].value);// 检查是否已经选择到最后一级if (selectedOptions.length === 2) {// 情况1: 如果是2025年之后或2025年第4季度，选择完季度就关闭const quarter = parseInt(selectedOptions[1].value.split('-Q')[1]);if (selectedYear > 2025 || (selectedYear === 2025 && quarter === 4)) {show.value = false;}// 其他情况：选择完季度后继续选择月份，不关闭} else if (selectedOptions.length === 3) {// 情况2: 选择完月份后关闭show.value = false;}
};// 格式化选中的结果
const formatSelectedResult = () => {if (selectedValues.value.length === 0) return '';let result = '';// 年份result += `${selectedValues.value[0]}年`;// 季度if (selectedValues.value.length >= 2) {const quarter = selectedValues.value[1].split('-Q')[1];result += `第${quarter}季度`;}// 月份if (selectedValues.value.length === 3) {result += `${selectedValues.value[2]}月`;}return result;
};// 暴露选中的值
const emits = defineEmits(['update:modelValue']);
watch(selectedValues, (newVal) => {emits('update:modelValue', newVal);
});// 生命周期钩子：设置默认选中最后一项
onMounted(() => {try {if (options.value.length > 0) {const lastYear = options.value[options.value.length - 1];if (lastYear.children && lastYear.children.length > 0) {const lastQuarter = lastYear.children[lastYear.children.length - 1];const selected = [lastYear.value,lastQuarter.value];// 如果有月份选项，也选中最后一个if (lastQuarter.children && lastQuarter.children.length > 0) {selected.push(lastQuarter.children[lastQuarter.children.length - 1].value);}selectedValues.value = selected;}}} catch (error) {console.error('设置默认选中项失败:', error);}
});
</script><style scoped>
.date-cascader-container {margin: 20px;min-height: 200px; /* 确保容器有足够高度 */
}
</style>