Calendar 日历
每天都有好心情
基本使用
date
属性需要绑定一个日期对象
日
一
二
三
四
五
六
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
开启
显示农历
lunar
可以配置显示农历的日历
日
一
二
三
四
五
六
25十六
26十七
27十八
28十九
29二十
1廿一
2廿二
3廿三
4廿四
5廿五
6廿六
7廿七
8妇女节
9廿九
10初一
11龙抬头
12植树节
13初四
14初五
15初六
16初七
17初八
18初九
19初十
20春分
21十二
22十三
23十四
24十五
25十六
26十七
27十八
28十九
29二十
30廿一
31廿二
1愚人节
2廿四
3廿五
4廿六
5廿七
6廿八
开启
带有边框
border
可以配置带有边框的日历
日
一
二
三
四
五
六
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
开启
不显示页头
show-header
可以控制是否显示头部操作栏
日
一
二
三
四
五
六
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
开启
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model:date | 绑定日期 | date | —— | new Date |
lunar | 是否显示农历或节日,仅支持 1900 ~ 2100 | boolean | —— | false |
show-header | 是否显示头部 | boolean | —— | true |
border | 是否显示边框 | boolean | —— | false |
border-color | 自定义边框颜色 | string | —— | —— |
day-cell-height | 日期单元格高度 | string / number | —— | —— |
week-cell-height | 星期单元格高度 | string / number | —— | —— |
on-change | 日期和月份任何变时触发的回调 | CalendarChange | —— | —— |
on-change-month | 月份改变时触发的回调 | CalendarChange | —— | —— |
on-change-date | 日期改变时触发的回调 | CalendarChange | —— | —— |
Slots
名称 | 说明 |
---|---|
last-change | 自定义上个月切换按钮 |
now-change | 自定义今天切换按钮 |
next-change | 自定义下个月切换按钮 |
Interface
组件导出以下类型定义:
ts
import type { CalendarInstance, CalendarProps, CalendarChange } from 'fighting-design'
CalendarChange
ts
type CalendarChange = (year: number, month: number, date: number) => void