54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# wn-calendar 展示打卡日历组件
|
||
|
||
> 主打就是轻巧无依赖，自己易改
|
||
|
||
## 安装
|
||
|
||
本组件符合easycom规范，只需将本组件导入项目即可直接使用。
|
||
|
||
## 基本用法
|
||
|
||
`template`中使用组件
|
||
```html
|
||
<view class="container">
|
||
<wn-calendar
|
||
ref="calendar"
|
||
:data="[{date:'2023/5/25', text:'显示文本', type: 2}]"
|
||
:isBorder="true"
|
||
:isLess="false"
|
||
:colors="['#f3a73f', '#2979ff', '#8f939c', '#18bc37', '#e43d33']"
|
||
:isEn="false"
|
||
format="/"
|
||
@change="onChange"
|
||
@choose="onChoose"
|
||
></wn-calendar>
|
||
</view>
|
||
```
|
||
|
||
## API
|
||
|
||
### Calendar Props
|
||
|
||
| 属性名 | 类型 | 默认值| 说明 |
|
||
| | |
|
||
| date | String |- | 打卡，期待格式[{date:'2023/05/25',text:'显示文本',type:2}]，date格式是斜杠兼容iOS，type对应colors数组下标控制文本色彩 |
|
||
| colors | Array<String> | ['#2979ff', '#18bc37', '#f3a73f', '#e43d33', '#8f939c'] | 文本色彩控制 |
|
||
| isLess | Boolean | false | 是否不显示非当月的日期。改变后需调用this.$refs.calendar.refresh。 |
|
||
| isBorder | Boolean | true | 是否显示下边框 |
|
||
| isEn | Boolean | false | 是否英文 |
|
||
| format | String | '' | 控制月份格式，默认显示'2023年5月'，传'/'显示'2023/5' |
|
||
|
||
### Calendar Events
|
||
|
||
| 事件名 | 说明 |返回值|
|
||
| | | |
|
||
| choose | 选中日期 | {date:'2023/5/25',data:{date:'2023/05/25',text:'显示文本',type:2}} |
|
||
| change | 切换月份 | {year:2023,month:5} |
|
||
|
||
### Calendar Ref
|
||
|
||
通过`this.$refs.calendar`实例调用内部方法
|
||
|
||
| 事件名 | 说明 |返回值|
|
||
| | | |
|
||
| refresh | 刷新日期 |- | |