1. 项目背景
项目需要一个日历控件,在uni-app的插件库中么有找到合适的,于是决定自己写一个。 日历需求:默认展示当前月份全天样式,记录当前月份的出勤状态,请假状态,停课状态。(你可以叫做其他状态)。 uni-app的插件库中只有支持单一一种状态的日历,所以需要自己重新写一个。 样式如下:
黄色圆圈为选中日期2022-06-15,日期下放红色,黄色,蓝色小点代表当天的状态,图中2022-06-01当天停课状态,2022-06-02为请假状态,2022-06-03正常出勤。月份可以点击上面左右箭头切换,该插件只能切换当月以及本月之前的月份,日期没有限制。
2. 引入方式
使用 uni_modules 安装 (目前仅支持 uni_modules)
下载该文件后,放到uni_modules文件下,然后直接页面使用。
<mi-calendar
:leaveDateList="['2022-06-02']"
:suspensionDateList="['2022-06-01']"
:normalDateList="['2022-06-03']"
@change="change"/>
3.参数说明
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| leaveDateList | 请假日期 | Array | [] |
| suspensionDateList | 停课日期 | Array | [] |
| normalDateList | 正常考勤日期 | Array | [] |
事件
| 参数 | 说明 | 类型 | 回调参数 |
|---|---|---|---|
| change | 当绑定值变化时触发的事件 | fn | 当前选中项日期 |
| changeMonth | 切换月份 | fn | 当前选中项年份和月份 |
以上参数均为非必填。 颜色暂时不支持自定义。后续会不定时更新。
4. 项目维护地址
github已经同步,uni-app插件库也已经上传,欢迎感兴趣的小伙伴下载收藏,也欢迎有好想法的小伙伴可以提issues或pr。
5. 总结
代码中预留了一些其他属性,后续有时间还会继续更新迭代,希望能够做的更完善,也在写代码的过程中不断总结,提升性能,做好优化。
人生要么被别人适配,要么去适配别人。多样化去适配别人好还是单一被别人适配好呢。祝愿都能够找到自己的位置,发光发热也好,低调生存也好,只要你自己开心就好吧。