docs(date-picker): fulfill api table (#198)

* docs(DatePicker): add DatePicker docs

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/enUS/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

* Update src/date-picker/demos/zhCN/index.demo-entry.md

Co-authored-by: 07akioni <07akioni2@gmail.com>

Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
caoyugang_1 2021-06-19 20:51:47 +08:00 committed by GitHub
parent 1662605688
commit d866c1b122
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 80 deletions

View File

@ -18,14 +18,14 @@ no-icon
| closable | `boolean` | `false` | Whether the alert can be closed. |
| show-icon | `boolean` | `true` | Whether to show the icon of alert. |
| title | `string` | `undefined` | Title of the alert. |
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | alert type. |
| type | `'default' \| 'info' \| 'success' \| 'warning' \| 'error'` | `'default'` | Alert type. |
| on-after-leave | `Function` | `undefined` | Callback function executed when the alert disappears. |
| on-close | `() => boolean \| Promise<boolean> \| any` | `() => true` | The callback function executed when the close icon is clicked. |
## Slots
| Name | Parameters | Description |
| ------- | ---------- | --------------------------------------------- |
| ------- | ---------- | --------------------------------------- |
| default | `()` | The content of the alert. |
| header | `()` | The content placed in the alert header. |
| icon | `()` | Icon displayed in the alert. |

View File

@ -25,63 +25,63 @@ footerslot
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| clearable | `boolean` | `false` | |
| default-value | `number \| [number, number] \| null` | `null` | |
| disabled | `boolean` | `false` | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | |
| value | `number \| [number, number] \| null` | `undefined` | |
| on-blur | `() => void` | `undefined` | |
| on-focus | `() => void` | `undefined` | |
| clearable | `boolean` | `false` | Whether the date picker is clearable. |
| default-value | `number \| [number, number] \| null` | `null` | Date picker's default value. |
| disabled | `boolean` | `false` | Whether the date picker is disabled. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Date picker size. |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date picker type. |
| value | `number \| [number, number] \| null` | `undefined` | Value of the date picker in controlled mode. |
| on-blur | `() => void` | `undefined` | Callback function triggered on blur. |
| on-focus | `() => void` | `undefined` | Callback function triggered on focus. |
### Date Type Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
| format | `string` | `'yyyy-MM-dd'` | |
| is-date-disabled | `(current: number) => boolean` | `() => false` | |
| placeholder | `string` | `'Select Date'` | |
| on-update:value | `(value: number \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Operations supported in date picker of `date` type. |
| format | `string` | `'yyyy-MM-dd'` | Format of the input. |
| is-date-disabled | `(current: number) => boolean` | `() => false` | Validator of the date. |
| placeholder | `string` | `'Select Date'` | Prompt information. |
| on-update:value | `(value: number \| null) => void` | `undefined` | Callback when date is selected. |
### DateTime Type Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
| is-date-disabled | `(current: number) => boolean` | `() => false` | |
| is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
| placeholder | `string` | `'Select Date and Time'` | |
| on-update:value | `(value: number \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Operations supported in date picker of `datetime` type. |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | Format of the input. |
| is-date-disabled | `(current: number) => boolean` | `() => false` | Validator of the date. |
| is-time-disabled | `(current: number) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
| placeholder | `string` | `'Select Date and Time'` | Prompt information. |
| on-update:value | `(value: number \| null) => void` | `undefined` | Callback when date is selected. |
### DateRange Type Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
| end-placeholder | `string` | `'End Date'` | |
| format | `string` | `'yyyy-MM-dd'` | |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
| ranges | `Record<string, [number, number]>` | `undefined` | |
| separator | `string` | `'to'` | |
| start-placeholder | `string` | `'Start Date'` | |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | Operations supported in date picker of `daterange` type. |
| end-placeholder | `string` | `'End Date'` | The prompt information of the end input. |
| format | `string` | `'yyyy-MM-dd'` | Format of the input. |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
| separator | `string` | `'to'` | The separator between the start input and the end input. |
| start-placeholder | `string` | `'Start Date'` | The prompt information of the start input. |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when range is changed. |
### DateTimeRange Type Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
| end-placeholder | `string` | `'End Date and Time'` | |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
| ranges | `Record<string, [number, number]>` | `undefined` | |
| separator | `string` | `'to'` | |
| start-placeholder | `string` | `'Start Date and Time'` | |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | Operations supported in date picker of `datetimerange` type. |
| end-placeholder | `string` | `'End Date and Time'` | The prompt information of the end input. |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | Format of the input. |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | Validator of the date. |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | Validator of the time. |
| ranges | `Record<string, [number, number]>` | `undefined` | Customize ranges. |
| separator | `string` | `'to'` | The separator between the start input and the end input. |
| start-placeholder | `string` | `'Start Date and Time'` | The prompt information of the start input. |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | Callback when value is changed. |
## Slots

View File

@ -25,63 +25,63 @@ footerslot
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| clearable | `boolean` | `false` | |
| default-value | `number \| [number, number] \| null` | `null` | |
| disabled | `boolean` | `false` | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | |
| value | `number \| [number, number] \| null` | `undefined` | |
| on-blur | `() => void` | `undefined` | |
| on-focus | `() => void` | `undefined` | |
| clearable | `boolean` | `false` | 是否支持清除 |
| default-value | `number \| [number, number] \| null` | `null` | 默认被选中的日期的时间戳 |
| disabled | `boolean` | `false` | 是否禁用 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
| type | `'date' \| 'datetime' \| 'daterange' \|'datetimerange'` | `'date'` | Date Picker 的类型 |
| value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 |
| on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 |
| on-focus | `() => void` | `undefined` | 用户 focus 时执行的回调 |
### Date 类型的 Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
| format | `string` | `'yyyy-MM-dd'` | |
| is-date-disabled | `(current: number) => boolean` | `undefined` | |
| placeholder | `string` | `'选择日期'` | |
| on-update:value | `(value: number \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | Date 类型的 Date Picker 中支持的操作 |
| format | `string` | `'yyyy-MM-dd'` | 时间格式化字符串 |
| is-date-disabled | `(current: number) => boolean` | `undefined` | 日期禁用的校验函数 |
| placeholder | `string` | `'选择日期'` | 自动填充的提示信息 |
| on-update:value | `(value: number \| null) => void` | `undefined` | 可控数据更新时触发的回调函数 |
### DateTime 类型的 Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
| is-date-disabled | `(current: number) => boolean` | `undefined` | |
| is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | |
| placeholder | `string` | `'选择日期时间'` | |
| on-update:value | `(value: number \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'now' \| 'confirm'> \| null` | `['clear', 'now', 'confirm']` | DateTime 类型的 Date Picker 中支持的操作 |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | 用户自定义的数据格式化方式 |
| is-date-disabled | `(current: number) => boolean` | `undefined` | 日期禁用的校验函数 |
| is-time-disabled | `(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }` | `undefined` | 时间禁用的校验函数 |
| placeholder | `string` | `'选择日期时间'` | 提示信息 |
| on-update:value | `(value: number \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
### DateRange 类型的 Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
| end-placeholder | `string` | `'结束日期'` | |
| format | `string` | `'yyyy-MM-dd'` | |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
| ranges | `Record<string, [number, number]>` | `undefined` | |
| separator | `string` | `'至'` | |
| start-placeholder | `string` | `'开始日期'` | |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | DateRange 类型的 Date Picker 中支持的用户操作 |
| end-placeholder | `string` | `'结束日期'` | DateRange 中 end 选框的提示信息 |
| format | `string` | `'yyyy-MM-dd'` | 用户自定义的数据格式化方式 |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义的快捷选择范围 |
| separator | `string` | `'至'` | start 选框与 end 选框之间的分隔符 |
| start-placeholder | `string` | `'开始日期'` | DateRange 中 start 选框的提示信息 |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
### DateTimeRange 类型的 Props
| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | |
| end-placeholder | `string` | `'结束日期时间'` | |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | |
| ranges | `Record<string, [number, number]>` | `undefined` | |
| separator | `string` | `'to'` | |
| start-placeholder | `string` | `'开始日期时间'` | |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | |
| actions | `Array<'clear' \| 'confirm'> \| null` | `['clear', 'confirm']` | DateTimeRange 类型的 Date Picker 中支持的用户操作 |
| end-placeholder | `string` | `'结束日期时间'` | DateTimeRange 中 end 选框的提示信息 |
| format | `string` | `'yyyy-MM-dd HH:mm:ss'` | 用户自定义的数据格式化方式 |
| is-date-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean` | `undefined` | 日期禁用的校验函数 |
| is-time-disabled | `(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }` | `undefined` | 时间禁用的校验函数 |
| ranges | `Record<string, [number, number]>` | `undefined` | 用户自定义 DateTimeRange 范围 |
| separator | `string` | `'to'` | start 选框与 end 选框之间的分隔符 |
| start-placeholder | `string` | `'开始日期时间'` | DateTimeRange 中 start 选框的提示信息 |
| on-update:value | `(value: [number, number] \| null) => void` | `undefined` | 数据更新时触发的回调函数 |
## Slots