更新记录

0.0.2(2024-09-13) 下载此版本

  • chore: 更新依赖

0.0.1(2024-09-13) 下载此版本

  • init

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.26 app-vue app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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

参数 说明 类型 默认值
canSupplement 是否支持补签 boolean true
yearMonth 显示年月,格式:YYYY-MM string 当前月份
signedDates 打卡数据,格式:YYYY-MM-DD[] string[] []
dayHeight 天格子的高度 number 76
week 星期 string[] ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
weekStartsOn 星期几为一周的开始,默认是6,即周一 number 6
weekColor 星期文本颜色 string #BDC0C3
weekFontSize 星期文本字体 number 14
weekHeight 星期文本高度 number 30
selectedDayBgColor 选择中背景色 string rgba(0,0,0,0.06)
dayFontSize 天的字体大小 number 16
textColor 文本颜色 string #1A1F24
disabledColor 禁用颜色(日历中非本月的日期,week文本) string #BDC0C3
monthTitleHeight 日历年月标题高度 number 50
monthTitleFontSize 日历年月标题字体大小 number 20
color 主色,签到和today选中颜色 string #3B87F6
unsignedColor 可补签小点颜色 string #F1A33A'

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问