1. 为什么需要年份范围选择器在实际开发中我们经常会遇到需要选择时间范围的场景。比如统计报表需要按年份筛选数据财务系统需要按年度查询收支情况或者管理系统需要按学年进行数据统计。Element UI 虽然提供了强大的日期选择器但原生组件并不支持直接选择年份范围。我最近在开发一个数据分析平台时就遇到了这个问题。产品经理要求提供一个可以同时选择起始年份和结束年份的控件方便用户快速筛选跨年度的数据。原生的 Element UI 日期选择器只能选择具体的某一天或者月份范围无法满足这个需求。经过调研发现很多开发者都遇到过类似的需求。比如教育行业需要选择学年范围如2020-2023金融行业需要选择财年范围数据分析需要选择统计周期等。这种情况下一个专门的年份范围选择器就显得非常必要了。2. 需求分析与技术方案2.1 核心功能需求在动手开发之前我们先明确一下这个组件需要实现哪些功能支持选择起始年份和结束年份年份面板需要分左右两栏显示每栏显示10个年份可以通过左右箭头切换不同的年份区间选中状态需要高亮显示包括起始年份、结束年份和中间年份支持手动输入年份需要处理边界情况比如结束年份不能早于起始年份2.2 技术实现方案基于 Element UI 进行二次开发是个不错的选择因为它已经提供了成熟的日期选择器组件和样式体系。我们可以利用 el-popover 作为容器el-date-editor 作为输入框然后自定义年份选择面板。核心思路是使用 el-popover 实现弹出层自定义左右两个年份面板通过计算属性动态生成年份列表使用 Vue 指令实现点击外部关闭面板的功能通过样式控制选中状态3. 核心代码实现3.1 组件模板结构template el-popover refpopover placementbottom v-modelshowPanel popper-classcustom_year_range triggermanual v-clickoutside() { showPanel false } div class_inner floatPanel !-- 左侧年份面板 -- div class_inner leftPanel div class_inner panelHead i class_inner el-icon-d-arrow-left clickonClickLeft/i span{{ leftYearList[0] 年 - leftYearList[9] 年 }}/span /div div class_inner panelContent div v-foritem in leftYearList :keyitem :class{ oneSelected: item startYear oneSelected, startSelected: item startYear, endSelected: item endYear, betweenSelected: item startYear item endYear } a classcell _inner :class{ selected: item startYear || item endYear } clickonClickItem(item) mouseoveronHoverItem(item) {{ item }} /a /div /div /div !-- 右侧年份面板 -- div class_inner rightPanel !-- 结构同左侧面板 -- /div /div !-- 输入框部分 -- div slotreference div refyearPicker classel-date-editor el-range-editor el-input__inner i classel-input__icon el-range__icon el-icon-date/i input class_inner range_input refinputLeft typetext placeholder选择开始年份 v-modelstartShowYear focusonFocus/ span classel-range-separator至/span input class_inner range_input refinputRight typetext placeholder选择结束年份 v-modelendShowYear focusonFocus/ /div /div /el-popover /template3.2 组件逻辑实现script import moment from moment import { clickoutside, SELECT_STATE } from ./utils.js export default { name: yearPicker, directives: { clickoutside }, props: { value: { type: Array, default: [] }, sp: { default: 至 } }, data() { return { startShowYear: null, endShowYear: null, yearList: [], showPanel: false, startYear: null, endYear: null, curYear: 0, curSelectedYear: 0, curState: SELECT_STATE.unselect } }, computed: { oneSelected() { return this.curState SELECT_STATE.selecting (this.startYear this.endYear || this.endYear null) }, leftYearList() { return this.yearList.slice(0, 10) }, rightYearList() { return this.yearList.slice(10, 20) } }, methods: { onHoverItem(year) { if (this.curState SELECT_STATE.selecting) { const tmpStart this.curSelectedYear this.endYear Math.max(tmpStart, year) this.startYear Math.min(tmpStart, year) } }, onClickItem(year) { if (this.curState SELECT_STATE.unselect || this.curState SELECT_STATE.selected) { this.startYear year this.curSelectedYear year this.endYear null this.curState SELECT_STATE.selecting } else if (this.curState SELECT_STATE.selecting) { this.endShowYear this.endYear || this.startYear this.startShowYear this.startYear this.curState SELECT_STATE.selected this.showPanel false } }, updateYearList() { const startYear Math.floor(this.curYear / 10) * 10 this.yearList [] for (let i 0; i 20; i) { this.yearList.push(startYear i) } }, onClickLeft() { this.curYear - 10 this.updateYearList() }, onClickRight() { this.curYear 10 this.updateYearList() } }, created() { const [startYear, endYear] this.value || [] if (startYear) { this.startYear Number(startYear) this.endYear Number(endYear) this.curState SELECT_STATE.selected this.curYear startYear } else { this.curYear moment().year() } this.updateYearList() } } /script3.3 样式实现style langscss .custom_year_range { .floatPanel { display: flex; width: 650px; height: 250px; padding: 0 16px; div { width: 50%; } .panelContent { display: flex; flex-wrap: wrap; width: 100%; height: calc(100% - 70px); div { width: 75px; height: 48px; line-height: 48px; margin: 3px 0; text-align: center; a { display: inline-block; width: 60px; height: 36px; cursor: pointer; line-height: 36px; border-radius: 18px; :hover { color: #409eff; } .selected { background-color: #409eff; color: #fff; } } } .startSelected { background-color: #f2f6fc; border-top-left-radius: 24px; border-bottom-left-radius: 24px; } .endSelected { background-color: #f2f6fc; border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .betweenSelected { background-color: #f2f6fc; } } } } /style4. 关键技术与实现细节4.1 年份列表生成年份列表是通过计算属性动态生成的。我们以当前年份为基准向前后各扩展一定范围updateYearList() { const startYear Math.floor(this.curYear / 10) * 10 this.yearList [] for (let i 0; i 20; i) { this.yearList.push(startYear i) } }这样就能保证左右面板各显示10个连续的年份比如左侧显示2020-2029右侧显示2030-2039。4.2 选中状态管理选中状态管理是这个组件的核心难点。我们定义了三种状态export const SELECT_STATE { unselect: 0, // 未选择 selecting: 1, // 正在选择已选起始年份 selected: 2 // 已完成选择 }在选择过程中我们需要处理以下几种情况首次点击设置为起始年份进入 selecting 状态第二次点击设置为结束年份进入 selected 状态鼠标悬停在 selecting 状态下实时更新结束年份4.3 点击外部关闭面板我们通过自定义指令实现了点击外部关闭面板的功能export const clickoutside { bind(el, binding) { function documentHandler(e) { if (!el.contains(e.target) binding.value) { binding.value(e) } } el.__vueClickOutside__ documentHandler document.addEventListener(click, documentHandler) }, unbind(el) { document.removeEventListener(click, el.__vueClickOutside__) delete el.__vueClickOutside__ } }这个指令会监听文档点击事件如果点击发生在组件外部则执行绑定的关闭函数。5. 使用示例与注意事项5.1 基本使用方法在父组件中使用年份范围选择器template year-picker v-modelyearRange changehandleYearChange/ /template script import YearPicker from ./components/YearPicker.vue export default { components: { YearPicker }, data() { return { yearRange: [] } }, methods: { handleYearChange(range) { console.log(选择的年份范围:, range) } } } /script5.2 常见问题与解决方案年份范围校验问题 可以在父组件中添加校验逻辑确保结束年份不小于起始年份。国际化支持 如果需要支持多语言可以将年份显示的格式和分隔符作为 props 传入。性能优化 如果年份范围很大可以考虑虚拟滚动技术只渲染可视区域内的年份。移动端适配 在移动设备上可能需要调整面板大小和交互方式比如改为全屏弹窗。5.3 样式自定义技巧如果需要修改默认样式可以通过以下几种方式覆盖默认的 CSS 类名通过 props 传入自定义类名使用 CSS 变量动态修改样式例如要修改选中项的背景色.custom_year_range { --selected-bg-color: #ff0000; .selected { background-color: var(--selected-bg-color) !important; } }6. 扩展与优化方向这个基础组件还可以进一步扩展和优化支持更多时间粒度可以扩展为支持季度范围、月份范围的选择器添加预设快捷选项比如最近5年、最近10年等快捷选择集成表单验证内置验证规则确保选择的年份范围有效支持禁用日期可以禁用某些不可选的年份性能优化对于超大范围的年份选择可以使用虚拟滚动技术在实际项目中我建议先实现核心功能然后根据具体需求逐步添加这些扩展功能。这样既能快速满足业务需求又能保证代码的可维护性。
Element UI 年份范围选择器封装实战：从需求分析到组件实现
1. 为什么需要年份范围选择器在实际开发中我们经常会遇到需要选择时间范围的场景。比如统计报表需要按年份筛选数据财务系统需要按年度查询收支情况或者管理系统需要按学年进行数据统计。Element UI 虽然提供了强大的日期选择器但原生组件并不支持直接选择年份范围。我最近在开发一个数据分析平台时就遇到了这个问题。产品经理要求提供一个可以同时选择起始年份和结束年份的控件方便用户快速筛选跨年度的数据。原生的 Element UI 日期选择器只能选择具体的某一天或者月份范围无法满足这个需求。经过调研发现很多开发者都遇到过类似的需求。比如教育行业需要选择学年范围如2020-2023金融行业需要选择财年范围数据分析需要选择统计周期等。这种情况下一个专门的年份范围选择器就显得非常必要了。2. 需求分析与技术方案2.1 核心功能需求在动手开发之前我们先明确一下这个组件需要实现哪些功能支持选择起始年份和结束年份年份面板需要分左右两栏显示每栏显示10个年份可以通过左右箭头切换不同的年份区间选中状态需要高亮显示包括起始年份、结束年份和中间年份支持手动输入年份需要处理边界情况比如结束年份不能早于起始年份2.2 技术实现方案基于 Element UI 进行二次开发是个不错的选择因为它已经提供了成熟的日期选择器组件和样式体系。我们可以利用 el-popover 作为容器el-date-editor 作为输入框然后自定义年份选择面板。核心思路是使用 el-popover 实现弹出层自定义左右两个年份面板通过计算属性动态生成年份列表使用 Vue 指令实现点击外部关闭面板的功能通过样式控制选中状态3. 核心代码实现3.1 组件模板结构template el-popover refpopover placementbottom v-modelshowPanel popper-classcustom_year_range triggermanual v-clickoutside() { showPanel false } div class_inner floatPanel !-- 左侧年份面板 -- div class_inner leftPanel div class_inner panelHead i class_inner el-icon-d-arrow-left clickonClickLeft/i span{{ leftYearList[0] 年 - leftYearList[9] 年 }}/span /div div class_inner panelContent div v-foritem in leftYearList :keyitem :class{ oneSelected: item startYear oneSelected, startSelected: item startYear, endSelected: item endYear, betweenSelected: item startYear item endYear } a classcell _inner :class{ selected: item startYear || item endYear } clickonClickItem(item) mouseoveronHoverItem(item) {{ item }} /a /div /div /div !-- 右侧年份面板 -- div class_inner rightPanel !-- 结构同左侧面板 -- /div /div !-- 输入框部分 -- div slotreference div refyearPicker classel-date-editor el-range-editor el-input__inner i classel-input__icon el-range__icon el-icon-date/i input class_inner range_input refinputLeft typetext placeholder选择开始年份 v-modelstartShowYear focusonFocus/ span classel-range-separator至/span input class_inner range_input refinputRight typetext placeholder选择结束年份 v-modelendShowYear focusonFocus/ /div /div /el-popover /template3.2 组件逻辑实现script import moment from moment import { clickoutside, SELECT_STATE } from ./utils.js export default { name: yearPicker, directives: { clickoutside }, props: { value: { type: Array, default: [] }, sp: { default: 至 } }, data() { return { startShowYear: null, endShowYear: null, yearList: [], showPanel: false, startYear: null, endYear: null, curYear: 0, curSelectedYear: 0, curState: SELECT_STATE.unselect } }, computed: { oneSelected() { return this.curState SELECT_STATE.selecting (this.startYear this.endYear || this.endYear null) }, leftYearList() { return this.yearList.slice(0, 10) }, rightYearList() { return this.yearList.slice(10, 20) } }, methods: { onHoverItem(year) { if (this.curState SELECT_STATE.selecting) { const tmpStart this.curSelectedYear this.endYear Math.max(tmpStart, year) this.startYear Math.min(tmpStart, year) } }, onClickItem(year) { if (this.curState SELECT_STATE.unselect || this.curState SELECT_STATE.selected) { this.startYear year this.curSelectedYear year this.endYear null this.curState SELECT_STATE.selecting } else if (this.curState SELECT_STATE.selecting) { this.endShowYear this.endYear || this.startYear this.startShowYear this.startYear this.curState SELECT_STATE.selected this.showPanel false } }, updateYearList() { const startYear Math.floor(this.curYear / 10) * 10 this.yearList [] for (let i 0; i 20; i) { this.yearList.push(startYear i) } }, onClickLeft() { this.curYear - 10 this.updateYearList() }, onClickRight() { this.curYear 10 this.updateYearList() } }, created() { const [startYear, endYear] this.value || [] if (startYear) { this.startYear Number(startYear) this.endYear Number(endYear) this.curState SELECT_STATE.selected this.curYear startYear } else { this.curYear moment().year() } this.updateYearList() } } /script3.3 样式实现style langscss .custom_year_range { .floatPanel { display: flex; width: 650px; height: 250px; padding: 0 16px; div { width: 50%; } .panelContent { display: flex; flex-wrap: wrap; width: 100%; height: calc(100% - 70px); div { width: 75px; height: 48px; line-height: 48px; margin: 3px 0; text-align: center; a { display: inline-block; width: 60px; height: 36px; cursor: pointer; line-height: 36px; border-radius: 18px; :hover { color: #409eff; } .selected { background-color: #409eff; color: #fff; } } } .startSelected { background-color: #f2f6fc; border-top-left-radius: 24px; border-bottom-left-radius: 24px; } .endSelected { background-color: #f2f6fc; border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .betweenSelected { background-color: #f2f6fc; } } } } /style4. 关键技术与实现细节4.1 年份列表生成年份列表是通过计算属性动态生成的。我们以当前年份为基准向前后各扩展一定范围updateYearList() { const startYear Math.floor(this.curYear / 10) * 10 this.yearList [] for (let i 0; i 20; i) { this.yearList.push(startYear i) } }这样就能保证左右面板各显示10个连续的年份比如左侧显示2020-2029右侧显示2030-2039。4.2 选中状态管理选中状态管理是这个组件的核心难点。我们定义了三种状态export const SELECT_STATE { unselect: 0, // 未选择 selecting: 1, // 正在选择已选起始年份 selected: 2 // 已完成选择 }在选择过程中我们需要处理以下几种情况首次点击设置为起始年份进入 selecting 状态第二次点击设置为结束年份进入 selected 状态鼠标悬停在 selecting 状态下实时更新结束年份4.3 点击外部关闭面板我们通过自定义指令实现了点击外部关闭面板的功能export const clickoutside { bind(el, binding) { function documentHandler(e) { if (!el.contains(e.target) binding.value) { binding.value(e) } } el.__vueClickOutside__ documentHandler document.addEventListener(click, documentHandler) }, unbind(el) { document.removeEventListener(click, el.__vueClickOutside__) delete el.__vueClickOutside__ } }这个指令会监听文档点击事件如果点击发生在组件外部则执行绑定的关闭函数。5. 使用示例与注意事项5.1 基本使用方法在父组件中使用年份范围选择器template year-picker v-modelyearRange changehandleYearChange/ /template script import YearPicker from ./components/YearPicker.vue export default { components: { YearPicker }, data() { return { yearRange: [] } }, methods: { handleYearChange(range) { console.log(选择的年份范围:, range) } } } /script5.2 常见问题与解决方案年份范围校验问题 可以在父组件中添加校验逻辑确保结束年份不小于起始年份。国际化支持 如果需要支持多语言可以将年份显示的格式和分隔符作为 props 传入。性能优化 如果年份范围很大可以考虑虚拟滚动技术只渲染可视区域内的年份。移动端适配 在移动设备上可能需要调整面板大小和交互方式比如改为全屏弹窗。5.3 样式自定义技巧如果需要修改默认样式可以通过以下几种方式覆盖默认的 CSS 类名通过 props 传入自定义类名使用 CSS 变量动态修改样式例如要修改选中项的背景色.custom_year_range { --selected-bg-color: #ff0000; .selected { background-color: var(--selected-bg-color) !important; } }6. 扩展与优化方向这个基础组件还可以进一步扩展和优化支持更多时间粒度可以扩展为支持季度范围、月份范围的选择器添加预设快捷选项比如最近5年、最近10年等快捷选择集成表单验证内置验证规则确保选择的年份范围有效支持禁用日期可以禁用某些不可选的年份性能优化对于超大范围的年份选择可以使用虚拟滚动技术在实际项目中我建议先实现核心功能然后根据具体需求逐步添加这些扩展功能。这样既能快速满足业务需求又能保证代码的可维护性。
