Pixelium Designv0.2.1-delta

中文

English

中文

English

Appearance

日历 Calendar ​

日历组件。

基础使用 ​

modelValue 控制日历组件的值，modelValue 不传或为 undefined 时，组件为非受控模式，此时可用 defaultValue 设置默认值。

2026-09
Today
MonTueWedThuFriSatSun
31
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
6
7
8
9
10
11
隐藏源代码

自定义头部 ​

通过 header 插槽自定义日历头部显示内容，接收 year 和 monthIndex 参数。

2026 / 9
Today
MonTueWedThuFriSatSun
31
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
6
7
8
9
10
11
隐藏源代码

自定义单元格 ​

通过 cell 插槽自定义每个日期单元格的渲染内容，接收 item 参数，类型为 CalendarItem。

2026-09
Today
MonTueWedThuFriSatSun
31
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
6
7
8
9
10
11
隐藏源代码

单元格属性 ​

通过 cellProps 属性为特定日期添加额外的属性，如样式、类名或原生 HTML 属性。

2026-09
Today
MonTueWedThuFriSatSun
31
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
6
7
8
9
10
11
隐藏源代码

API ​

CalendarProps ​

属性类型可选默认值描述版本
modelValueDate | null是日历组件绑定值（受控模式）。0.2.0
defaultValueDate | null是日历组件默认值（非受控模式）。0.2.0
cellPropsRestAttrs | ((item: CalendarItem) => RestAttrs)是日期单元格属性处理函数。0.2.0

CalendarEvents ​

事件参数描述版本
update:modelValuevalue: Date | null更新 modelValue 的回调。0.2.0
selectvalue: Date, event: MouseEvent日期选中时的回调。0.2.0

CalendarSlots ​

插槽参数描述版本
headeryear: number, monthIndex: number自定义头部内容。0.2.0
cellitem: CalendarItem自定义日期单元格内容。0.2.0