87 lines
2.2 KiB
Markdown
87 lines
2.2 KiB
Markdown
# punch-calendar
|
||
|
||
> [punch-calendar](https://github.com/LonJinUp/punch-calendar)为有打卡需求制作的日历，可标记小圆点。简单配置即可使用，代码体积小，无第三方引用。
|
||
> 任何问题可以评论联系我，第一时间处理，或者添加 🛰️:ljsw8686
|
||
|
||
## 使用方法
|
||
|
||
demo:
|
||
```html
|
||
<template>
|
||
<view class="content">
|
||
<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
successList: ['1676995200000'],
|
||
errorList: ['1676908800000'],
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 初始化
|
||
this.$refs.calendar.initCalendar()
|
||
|
||
// 模拟异步赋值
|
||
let timer = setTimeout(()=>{
|
||
this.addTimer()
|
||
},2000)
|
||
|
||
},
|
||
methods: {
|
||
// 点击某一天
|
||
chooseDay(val) {
|
||
console.log(val)
|
||
},
|
||
|
||
addTimer() {
|
||
this.successList = [...this.successList, '1681920000000']
|
||
},
|
||
|
||
/**
|
||
* 切换事件
|
||
* @param type 切换类型 prev next
|
||
* @param nowYear 当前年
|
||
* @param nowMonth 当前月
|
||
* **/
|
||
switchMonth(type, nowYear, nowMonth){
|
||
//... doSomeThing
|
||
if(nowYear == '2023' && nowMonth == '3' && !this.successList.includes('1678204800000')){
|
||
uni.showLoading({})
|
||
let timer = setTimeout(()=>{
|
||
uni.hideLoading()
|
||
clearTimeout(timer)
|
||
this.successList = [...this.successList, '1678204800000']
|
||
},3000)
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 配置说明：
|
||
|
||
参数说明：
|
||
|
||
| 参数 | 说明 | 默认值 | 类型 |
|
||
| ----------- | ---------------------------- | ------ | ----- |
|
||
| successList | 打卡成功标记，传入13位时间戳 | [] | Array |
|
||
| errorList | 打卡异常标记，传入13位时间戳 | [] | Array |
|
||
|
||
|
||
回调方法
|
||
|
||
| 方法名称 | 说明 | 返回值 |
|
||
| ---------- | -------------------- | ---------------------------- |
|
||
| @chooseDay | 点击某日时候执行函数 | 返回一个对象，包含年、月、日 |
|
||
| @switchMonth | 切换日期时候执行 | 返回type（切换类型，prev｜｜next）, 当前年nowYear,当前月nowMonth |
|
||
|
||
|
||
|