[日历组件][基于mpvue-calendar]自定可设置出勤信息的日历

目前已经实现,可以自定义修改考勤信息,

实现原理, 一句话概括,把年和月传进mpvue-calendar组件中,再延时去值,拿到值之后就可以做其他的操作了 ^ + ^

基础的安装(一步带过,这是文档传送门)

1. npm i mpvue-calendar -S
2. 页面再引入就可以
3. 使用
   import Calendar from ‘mpvue-calendar’ 引入组件
   import ‘mpvue-calendar/src/style.css’ 引入样式文件(mpvue 小程序端)
   components中注册组件Calendar
   template中使用组件<Calendar />
   在浏览器端使用要引入下面browser-style.css替换上面的style.css
   import ‘mpvue-calendar/src/browser-style.css’ 引入样式文件(浏览器端)

组件的效果图(好多功能不咋会用到,有的功能又没有扩展)

自己捣鼓之后的效果图

关键点的实现(不要那么复杂,项目经理就想要个能展示能操作有节假日的日历)

mpvue-calendar组件的简单分析

1. 先找到最初始的触发组件的方法, 一路连找加测试(笨方法console.log),发现它的一些事件都调用render方法
   

2. 再利用vue的父组件调用子组件的事件,就能拿到数据了
   先给子组件赋值
   this.$refs.calendar.renderer(data.config.search.year, data.config.search.month)
   再取值,最好延时取值
this.$refs.calendar.monthRangeDays

3. 后续的操作
   a. 无user信息时,像出勤状态,出勤还是假日(这是文字,可以根据状态判断修改,包括后详情时,计薪还是不计薪),是自己判断的,默认是非星期六星期日为出勤,星期六星期日为假日
   b. 有用户信息时,就需要根据接口返回的用户信息的出勤状态,循环判断和修改日历数据的信息,再回显到页面中,这样就保证了,日历组件始终提供的只是日历信息,用户的出勤信息是经过js加工过的
   c. 页面的js交互实现,表格单元格的点击是通过给el-table里cell的padding为0配合el-popover组件实现的,后面的点击切换出勤状态的就是简单的事件了,这里还是改的3.b步骤里jsj加工过的数据

基本到这里就结束了,实际上并没有那么复杂

本文地址：https://blog.csdn.net/webfullstack/article/details/107889965