为 Element 新增年份范围选择功能

6,284 阅读1分钟

公司基础组件库是基于 Element 进行封装的,近期业务提出支持年份范围选择的需求,由于 Element 中的 DatePicker 组件本身并不支持年份选择,就想着去社区找找别人封装好的,但是找了一圈发现,要不就是不能完美支持原本的 api,要不就是无用代码太多,而且有 bug,所以只能自己动手进行封装。

实现思路

1. 读懂源码

由于 DatePicker 这个组件本身支持的 api 较多,为了使新增的年份范围选择功能完美契合之前的 api,就只能照着月份选择器的实现思路进行实现,所以首先要做的就是完整的看完并理解 DatePicker 组件每个函数的功能和意义。

2. 改造 year-table 组件

由于源码本身的 year-table 组件没有实现联动选择的需求,所以代码写的比较简单,需要按照 month-table 组件的实现进行改造。

3. 新增 year-range 组件

year-range 组件是本身没有需要新增的,逻辑也是参考 month-range 组件进行实现,需要关注的是联动面板的 label 永远是显示 10 年的范围区间(例如 2000-2009),所以组件中的 leftDaterightDate 作为起始日期必须是 10 的倍数,这块的逻辑会跟 month-range 组件的实现很不一样。

效果图

yearrange.gif

源码地址

github.com/DLillard0/e…