「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>