更新记录
0.0.2(2024-09-13)
下载此版本
0.0.1(2024-09-13)
下载此版本
平台兼容性
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)
}
查看示例
插件标签
- 默认 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' |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。