欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 11:33:34
目前已经实现,可以自定义修改考勤信息,实现原理, 一句话概括,把年和月传进mpvue-calendar组件中,再延时去值,拿到值之后就可以做其他的操作了 ^ + ^基础的安装(一步带过,这是文档传送门)npm i mpvue-calendar -S页面再引入就可以使用import Calendar from ‘mpvue-calendar’ 引入组件import ‘mpvue-calendar/src/style.css’ 引入样式文件(mpvue 小程序端)components....

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

实现原理, 一句话概括,把年和月传进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]自定可设置出勤信息的日历

自己捣鼓之后的效果图

[日历组件][基于mpvue-calendar]自定可设置出勤信息的日历
关键点的实现(不要那么复杂,项目经理就想要个能展示能操作有节假日的日历)

mpvue-calendar组件的简单分析
  1. 先找到最初始的触发组件的方法, 一路连找加测试(笨方法console.log),发现它的一些事件都调用render方法
    [日历组件][基于mpvue-calendar]自定可设置出勤信息的日历

  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