Fighting DesignCalendar 日历
每天都有好心情
基本使用
date 属性需要绑定一个日期对象
日
一
二
三
四
五
六
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
1
2
3
4
5
开启
显示农历
lunar 可以配置显示农历的日历
日
一
二
三
四
五
六
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廿八
1国庆节
2三十
3初一
4初二
5初三
开启
带有边框
border 可以配置带有边框的日历
日
一
二
三
四
五
六
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
1
2
3
4
5
开启
不显示页头
show-header 可以控制是否显示头部操作栏
日
一
二
三
四
五
六
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
1
2
3
4
5
开启
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