-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #366 from Tencent/feat/calendar/upgrade
feat(calendar): upgrade style
- Loading branch information
Showing
17 changed files
with
492 additions
and
358 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| :: BASE_DOC :: | ||
|
|
||
| ## API | ||
| ### Calendar Props | ||
|
|
||
| name | type | default | description | required | ||
| -- | -- | -- | -- | -- | ||
| confirmBtn | String / Object / Slot / Function | '' | Typescript：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| firstDayOfWeek | Number | 0 | \- | N | ||
| format | Function | - | Typescript：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| maxDate | Number / Date | - | Typescript：`number | Date` | N | ||
| minDate | Number / Date | - | Typescript：`number | Date` | N | ||
| title | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
| type | String | 'single' | options：single/multiple/range | N | ||
| value | Number / Array / Date | - | Typescript：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| visible | Boolean | false | \- | N | ||
| onConfirm | Function | | Typescript：`(value: Date) => void`<br/> | N | ||
| onSelect | Function | | Typescript：`(value: Date) => void`<br/> | N | ||
|
|
||
| ### Calendar Events | ||
|
|
||
| name | params | description | ||
| -- | -- | -- | ||
| confirm | `(value: Date)` | \- | ||
| select | `(value: Date)` | \- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,25 @@ | ||
| :: BASE_DOC :: | ||
|
|
||
| ## API | ||
| ### Calendar Props | ||
|
|
||
| ### Calendar Events | ||
|
|
||
| 名称 | 参数 | 描述 | ||
| -- | -- | -- | ||
| modelValue | Boolean | false | 控制日历显示与隐藏 | Y | ||
| bgColor | String | #0053DB | 按钮和单元格背景颜色 | N | ||
| confirmBtn | String | 确认 | 确认按钮文案 | N | ||
| head | Slot / Function | - | 头部插槽（左上角处，默认不显示任何内容），TS 类型：`string | TNode` [通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
| cell | Slot / Function | 今天日期 | 自定义单元格 类型：`string | TNode` [通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
| value | String / Date | new Date | 当前高亮的日期，默认今天 | N | ||
| 名称 | 类型 | 默认值 | 说明 | 必传 | ||
| -- | -- | -- | -- | -- | ||
| confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string | TNode | ButtonProps | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| firstDayOfWeek | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N | ||
| format | Function | - | 用于格式化日期的函数。TS 类型：`(day: TDate) => TDate` `type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | ''; ` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| maxDate | Number / Date | - | 最大可选的日期，不传则默认半年后。TS 类型：`number | Date` | N | ||
| minDate | Number / Date | - | 最小可选的日期，不传则默认今天。TS 类型：`number | Date` | N | ||
| title | String / Slot / Function | - | 标题，不传默认为“请选择日期”。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
| type | String | 'single' | 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择。可选项：single/multiple/range | N | ||
| value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。TS 类型：`number | Date | TCalendarValue[] ` `type TCalendarValue = number | Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N | ||
| visible | Boolean | false | 是否显示日历 | N | ||
| onConfirm | Function | | TS 类型：`(value: Date) => void`<br/>点击确认按钮时触发 | N | ||
| onSelect | Function | | TS 类型：`(value: Date) => void`<br/>选择日期时触发 | N | ||
|
|
||
| ### Calendar Events | ||
|
|
||
| 名称 | 参数 | 描述 | ||
| -- | -- | -- | ||
| cell-click | cell: `type CalendarCell = {year: number;month: number;day: number;}`| 点击单元格触发 | | ||
| confirm | dateValue: `type CalendarValue = {year: number;month: number;day: number;week: number;date: string;isToday: boolean;}` | 点击确认按钮触发 | | ||
| confirm | `(value: Date)` | 点击确认按钮时触发 | ||
| select | `(value: Date)` | 选择日期时触发 |
Oops, something went wrong.