一个可扩展自适应的日历组件

这个组件除了很多自带的API,最好的部分是你可以拿到他vue源码,然后进行自定义样式和功能。github地址如下:https://github.com/jinzhe/vue-calendar 。效果如下:

项目里的calendar.js是处理农历日期的,我们如果不需要农历可以不引入,并把vue中的对应代码删了。

我们可以拿到对应的vue代码,就可以自定义我们样式了,我们把头部样式改成我们效果图的样式,对应的CSS可以根据自己效果自己写。

然后我们的项目里对应的日期如果考勤异常,会有对应标注

首先在html里增加对应的代码通过status的不同值绑定不同的样式

然后我的数据格式如下,data里有userInfo,分别对应迟到、早退和旷工:

methods里增加一个方法获取用户信息(y,m,d对应的参数是年月日):

我们需要在普通日期对应的代码中把,我们的用户信息传入到options里

 

posted @ 2019-10-09 15:44  小小的忧愁  阅读(534)  评论(0编辑  收藏  举报