目前已经实现,可以自定义修改考勤信息,
实现原理, 一句话概括,把年和月传进mpvue-calendar组件中,再延时去值,拿到值之后就可以做其他的操作了 ^ + ^
基础的安装(一步带过,这是文档传送门)
- npm i mpvue-calendar -S
- 页面再引入就可以
- 使用
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组件的简单分析
-
先找到最初始的触发组件的方法, 一路连找加测试(笨方法console.log),发现它的一些事件都调用render方法
-
再利用vue的父组件调用子组件的事件,就能拿到数据了
先给子组件赋值
this.$refs.calendar.renderer(data.config.search.year, data.config.search.month)
再取值,最好延时取值
this.$refs.calendar.monthRangeDays -
后续的操作
a. 无user信息时,像出勤状态,出勤还是假日(这是文字,可以根据状态判断修改,包括后详情时,计薪还是不计薪),是自己判断的,默认是非星期六星期日为出勤,星期六星期日为假日
b. 有用户信息时,就需要根据接口返回的用户信息的出勤状态,循环判断和修改日历数据的信息,再回显到页面中,这样就保证了,日历组件始终提供的只是日历信息,用户的出勤信息是经过js加工过的
c. 页面的js交互实现,表格单元格的点击是通过给el-table里cell的padding为0配合el-popover组件实现的,后面的点击切换出勤状态的就是简单的事件了,这里还是改的3.b步骤里jsj加工过的数据
基本到这里就结束了,实际上并没有那么复杂
本文地址：https://blog.csdn.net/webfullstack/article/details/107889965
