更新记录

0.0.2（2024-09-13） 下载此版本

• chore: 更新依赖

0.0.1（2024-09-13） 下载此版本

• init

平台兼容性

lime-daily-punch 打卡签到日历

• 一款签到打卡的日历插件，数据驱动，补签，统计连续打卡天数，uvue目前使用canvas实现，兼容uniapp/uniappx(web,ios,安卓)
• 初版，可能个性化不足，可以交流。或自行修改样式

安装

插件市场导入

代码演示

基础使用

通过设置signedDates传入已经打卡的日期

<l-daily-punch :signedDates="checkIns"></l-daily-punch>

// 已打卡
const checkIns = ref(['2024-09-12','2024-09-02','2024-09-10','2024-09-03'])

事件

当点击日期时，触发select事件，当传入已打卡日期会触发streak事件，这事件是统计连续打卡天数，当切换月份时触发panelChange

<l-daily-punch :signedDates="checkIns" @select="select" @panelChange="change"></l-daily-punch>

import { LDay,  LYearMonth} from '@/uni_modules/lime-daily-punch'

// 已打卡
const checkIns = ref(['2024-09-12','2024-09-02','2024-09-10','2024-09-03'])

const select = (day : LDay) => {
    if (day.canSupplement) {
        uni.showModal({
            title: '补签',
            content: '是否补签？',
            success: (res : ShowModalSuccess) => {
                if (!res.confirm) return
                checkIns.value.push(day.fullDate)
            }
        })
    }
    if(!day.isCheckedIn) {
        console.log('已签')
        uni.showModal({
            title: '签到',
            content: '是否签到？',
            success: (res : ShowModalSuccess) => {
                if (!res.confirm) return
                checkIns.value.push(day.fullDate)
            }
        })
    }
    if(day.isToday) {
        console.log('今天')
    }
}

const change = (res: LYearMonth) => {
    console.log('res', res)
}

查看示例

• 导入后直接使用这个标签查看演示效果

  // 代码位于 uni_modules/lime-daily-punch/compoents/lime-daily-punch
  <lime-daily-punch />

插件标签

• 默认 l-daily-punch 为 component
• 默认 lime-daily-punch 为 demo

API

Props

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。