test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 11:47:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [time-select] use new display tag (#12700)

Browse Source
This commit is contained in:
wzc520pyfm 2023-05-16 22:26:30 +08:00 committed by GitHub
parent 649fa56a7a
commit 3673d92a2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/en-US/component/time-select.md
View File

@ -53,38 +53,40 @@ time-select/time-range
:::
## Attributes
## API
| Name | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large / default / small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| name | same as `name` in native input | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| prefix-icon | Custom prefix icon component | `string \| Component` | — | Clock |
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
| format | set format of time | string | see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |
### Attributes
## Events
| Name | Description | Type | Default |
| --------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
| model-value / v-model | binding value | ^[string] | — |
| disabled | whether TimeSelect is disabled | ^[boolean] | false |
| editable | whether the input is editable | ^[boolean] | true |
| clearable | whether to show clear button | ^[boolean] | true |
| size | size of Input | ^[enum]`'large' \| 'default' \| 'small'` | default |
| placeholder | placeholder in non-range mode | ^[string] | — |
| name | same as `name` in native input | ^[string] | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | ^[string] / ^[enum]`'dark' \| 'light'` | light |
| prefix-icon | custom prefix icon component | ^[string] / ^[Component] | Clock |
| clear-icon | custom clear icon component | ^[string] / ^[Component] | CircleClose |
| start | start time | ^[string] | 09:00 |
| end | end time | ^[string] | 18:00 |
| step | time step | ^[string] | 00:30 |
| min-time | minimum time, any time before this time will be disabled | ^[string] | — |
| max-time | maximum time, any time after this time will be disabled | ^[string] | — |
| format | set format of time | ^[string] see [formats](https://day.js.org/docs/en/display/format#list-of-all-available-formats) | HH:mm |
| Name | Description | Parameters |
| ------ | ------------------------------------- | ------------------------- |
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | (event: FocusEvent) |
| focus | triggers when Input focuses | (event: FocusEvent) |
### Events
## Methods
| Name | Description | Type |
| ------ | ------------------------------------- | ---------------------------------------- |
| change | triggers when user confirms the value | ^[Function]`(value: string) => void` |
| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` |
| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` |
| Method | Description | Parameters |
| ------ | ------------------------- | ---------- |
| focus | focus the Input component | — |
| blur | blur the Input component | — |
### Exposes
| Method | Description | Type |
| ------ | ------------------------- | ----------------------- |
| focus | focus the Input component | ^[Function]`() => void` |
| blur | blur the Input component | ^[Function]`() => void` |

48
packages/components/time-select/src/time-select.ts
View File

@ -5,45 +5,93 @@ import type TimeSelect from './time-select.vue'
import type { Component, ExtractPropTypes, PropType } from 'vue'
export const timeSelectProps = buildProps({
/**
* @description set format of time
*/
format: {
type: String,
default: 'HH:mm',
},
/**
* @description binding value
*/
modelValue: String,
/**
* @description whether TimeSelect is disabled
*/
disabled: Boolean,
/**
* @description whether the input is editable
*/
editable: {
type: Boolean,
default: true,
},
/**
* @description Tooltip theme, built-in theme: `dark` / `light`
*/
effect: {
type: String as PropType<'light' | 'dark' | string>,
default: 'light',
},
/**
* @description whether to show clear button
*/
clearable: {
type: Boolean,
default: true,
},
/**
* @description size of Input
*/
size: useSizeProp,
/**
* @description placeholder in non-range mode
*/
placeholder: String,
/**
* @description start time
*/
start: {
type: String,
default: '09:00',
},
/**
* @description end time
*/
end: {
type: String,
default: '18:00',
},
/**
* @description time step
*/
step: {
type: String,
default: '00:30',
},
/**
* @description minimum time, any time before this time will be disabled
*/
minTime: String,
/**
* @description maximum time, any time after this time will be disabled
*/
maxTime: String,
/**
* @description same as `name` in native input
*/
name: String,
/**
* @description custom prefix icon component
*/
prefixIcon: {
type: definePropType<string | Component>([String, Object]),
default: () => Clock,
},
/**
* @description custom clear icon component
*/
clearIcon: {
type: definePropType<string | Component>([String, Object]),
default: () => CircleClose,

6
packages/components/time-select/src/time-select.vue
View File

@ -112,7 +112,13 @@ const focus = () => {
}
defineExpose({
/**
* @description focus the Input component
*/
blur,
/**
* @description blur the Input component
*/
focus,
})
</script>