更新记录

0.0.8（2025-09-14） 下载此版本

• fix: 修复uniapp vue2 小程序 get方法在模板上无法使用的问题

0.0.7（2025-09-14） 下载此版本

• fix: 修复uniapp vue2运行报错问题
• chore: 更新文档

0.0.6（2025-08-31） 下载此版本

• chore: 更新文档

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-daily-punch 打卡签到日历

一款签到打卡的日历插件，数据驱动，支持补签和统计连续打卡天数。兼容uniapp/uniappx。

插件依赖：lime-style,lime-shared

基础功能

• 支持自定义打卡日期
• 支持补签功能
• 统计连续打卡天数
• 支持切换月份
• 支持自定义样式

文档链接

📚 组件详细文档请访问以下站点：

• 打卡日历文档 - 站点1
• 打卡日历文档 - 站点2
• 打卡日历文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-daily-punch
2. 首次导入可能需要重新编译

代码演示

基础使用

通过设置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 { LimeDailyPunchDay,  LimeDailyPunchYearMonth} from '@/uni_modules/lime-daily-punch'

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

const select = (day : LimeDailyPunchDay) => {
    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: LimeDailyPunchYearMonth) => {
    console.log('res', res)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

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

插件标签说明

• l-daily-punch：打卡日历组件
• lime-daily-punch：演示标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props

主题定制

组件提供了以下CSS变量，可用于自定义样式：
组件在uniappx是基于canvas故不支持变量,仅uniapp支持

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助