Element UI 年份范围选择器封装实战：从需求分析到组件实现

1. 为什么需要年份范围选择器

在实际开发中，我们经常会遇到需要选择时间范围的场景。比如统计报表需要按年份筛选数据，财务系统需要按年度查询收支情况，或者管理系统需要按学年进行数据统计。Element UI 虽然提供了强大的日期选择器，但原生组件并不支持直接选择年份范围。

我最近在开发一个数据分析平台时就遇到了这个问题。产品经理要求提供一个可以同时选择起始年份和结束年份的控件，方便用户快速筛选跨年度的数据。原生的 Element UI 日期选择器只能选择具体的某一天或者月份范围，无法满足这个需求。

经过调研发现，很多开发者都遇到过类似的需求。比如教育行业需要选择学年范围（如2020-2023），金融行业需要选择财年范围，数据分析需要选择统计周期等。这种情况下，一个专门的年份范围选择器就显得非常必要了。

2. 需求分析与技术方案

2.1 核心功能需求

在动手开发之前，我们先明确一下这个组件需要实现哪些功能：

1. 支持选择起始年份和结束年份
2. 年份面板需要分左右两栏显示，每栏显示10个年份
3. 可以通过左右箭头切换不同的年份区间
4. 选中状态需要高亮显示，包括起始年份、结束年份和中间年份
5. 支持手动输入年份
6. 需要处理边界情况，比如结束年份不能早于起始年份

2.2 技术实现方案

基于 Element UI 进行二次开发是个不错的选择，因为它已经提供了成熟的日期选择器组件和样式体系。我们可以利用 el-popover 作为容器，el-date-editor 作为输入框，然后自定义年份选择面板。

核心思路是：

1. 使用 el-popover 实现弹出层
2. 自定义左右两个年份面板
3. 通过计算属性动态生成年份列表
4. 使用 Vue 指令实现点击外部关闭面板的功能
5. 通过样式控制选中状态

3. 核心代码实现

3.1 组件模板结构

<template> <el-popover ref="popover" placement="bottom" v-model="showPanel" popper-class="custom_year_range" trigger="manual" v-clickoutside="() => { showPanel = false }"> <div class="_inner floatPanel"> <!-- 左侧年份面板 --> <div class="_inner leftPanel"> <div class="_inner panelHead"> <i class="_inner el-icon-d-arrow-left" @click="onClickLeft"></i> <span>{{ leftYearList[0] + '年 - ' + leftYearList[9] + '年' }}</span> </div> <div class="_inner panelContent"> <div v-for="item in leftYearList" :key="item" :class="{ oneSelected: item === startYear && oneSelected, startSelected: item === startYear, endSelected: item === endYear, betweenSelected: item > startYear && item < endYear }"> <a class="cell _inner" :class="{ selected: item === startYear || item === endYear }" @click="onClickItem(item)" @mouseover="onHoverItem(item)"> {{ item }} </a> </div> </div> </div> <!-- 右侧年份面板 --> <div class="_inner rightPanel"> <!-- 结构同左侧面板 --> </div> </div> <!-- 输入框部分 --> <div slot="reference"> <div ref="yearPicker" class="el-date-editor el-range-editor el-input__inner"> <i class="el-input__icon el-range__icon el-icon-date"></i> <input class="_inner range_input" ref="inputLeft" type="text" placeholder="选择开始年份" v-model="startShowYear" @focus="onFocus"/> <span class="el-range-separator">至</span> <input class="_inner range_input" ref="inputRight" type="text" placeholder="选择结束年份" v-model="endShowYear" @focus="onFocus"/> </div> </div> </el-popover> </template>

3.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() } } </script>

3.3 样式实现

<style lang="scss"> .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; } } } } </style>

4. 关键技术与实现细节

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 // 已完成选择 }

在选择过程中，我们需要处理以下几种情况：

1. 首次点击：设置为起始年份，进入 selecting 状态
2. 第二次点击：设置为结束年份，进入 selected 状态
3. 鼠标悬停：在 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-model="yearRange" @change="handleYearChange"/> </template> <script> import YearPicker from './components/YearPicker.vue' export default { components: { YearPicker }, data() { return { yearRange: [] } }, methods: { handleYearChange(range) { console.log('选择的年份范围:', range) } } } </script>

5.2 常见问题与解决方案

1. 年份范围校验问题： 可以在父组件中添加校验逻辑，确保结束年份不小于起始年份。

2. 国际化支持： 如果需要支持多语言，可以将年份显示的格式和分隔符作为 props 传入。

3. 性能优化： 如果年份范围很大，可以考虑虚拟滚动技术，只渲染可视区域内的年份。

4. 移动端适配： 在移动设备上，可能需要调整面板大小和交互方式，比如改为全屏弹窗。

5.3 样式自定义技巧

如果需要修改默认样式，可以通过以下几种方式：

1. 覆盖默认的 CSS 类名
2. 通过 props 传入自定义类名
3. 使用 CSS 变量动态修改样式

例如，要修改选中项的背景色：

.custom_year_range { --selected-bg-color: #ff0000; .selected { background-color: var(--selected-bg-color) !important; } }

6. 扩展与优化方向

这个基础组件还可以进一步扩展和优化：

1. 支持更多时间粒度：可以扩展为支持季度范围、月份范围的选择器
2. 添加预设快捷选项：比如"最近5年"、"最近10年"等快捷选择
3. 集成表单验证：内置验证规则，确保选择的年份范围有效
4. 支持禁用日期：可以禁用某些不可选的年份
5. 性能优化：对于超大范围的年份选择，可以使用虚拟滚动技术

在实际项目中，我建议先实现核心功能，然后根据具体需求逐步添加这些扩展功能。这样既能快速满足业务需求，又能保证代码的可维护性。