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

本文介绍了如何使用mpvue-calendar组件创建一个可自定义出勤信息的日历。通过基础安装、组件分析及关键点实现,展示了在无用户信息和有用户信息时如何处理出勤状态,并通过js交互实现日历的点击事件和出勤状态切换。
摘要由CSDN通过智能技术生成

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

实现原理, 一句话概括,把年和月传进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’ 引入样式文件(浏览器端)
组件的效果图(好多功能不咋会用到,有的功能又没有扩展)

在这里插入图片描述

自己捣鼓之后的效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值