第一次写一个uni-app日历插件。

524 阅读2分钟

1. 项目背景

项目需要一个日历控件,在uni-app的插件库中么有找到合适的,于是决定自己写一个。 日历需求:默认展示当前月份全天样式,记录当前月份的出勤状态,请假状态,停课状态。(你可以叫做其他状态)。 uni-app的插件库中只有支持单一一种状态的日历,所以需要自己重新写一个。 样式如下:

image.png

黄色圆圈为选中日期2022-06-15,日期下放红色,黄色,蓝色小点代表当天的状态,图中2022-06-01当天停课状态,2022-06-02为请假状态,2022-06-03正常出勤。月份可以点击上面左右箭头切换,该插件只能切换当月以及本月之前的月份,日期没有限制。

2. 引入方式

使用 uni_modules 安装 (目前仅支持 uni_modules)

下载该文件后,放到uni_modules文件下,然后直接页面使用。

image.png

<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. 总结

代码中预留了一些其他属性,后续有时间还会继续更新迭代,希望能够做的更完善,也在写代码的过程中不断总结,提升性能,做好优化。

人生要么被别人适配,要么去适配别人。多样化去适配别人好还是单一被别人适配好呢。祝愿都能够找到自己的位置,发光发热也好,低调生存也好,只要你自己开心就好吧。