公司基础组件库是基于 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),所以组件中的 leftDate
和 rightDate
作为起始日期必须是 10 的倍数,这块的逻辑会跟 month-range
组件的实现很不一样。