mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
docs(components): [time-picker] use new display tag (#12691)
* docs(components): [time-picker] use new display tag * docs(components): [time-picker] update default of attributes
This commit is contained in:
wzc520pyfm
@@ -49,23 +49,23 @@ time-picker/range
|
||||
|
||||
| Name | Description | Type | Default |
|
||||
| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | — |
|
||||
| model-value / v-model | binding value, if it is an array, the length should be 2 | ^[number] / ^[string] / ^[object]`Date \| [Date, Date] \| [number, number] \| [string, string]` | '' |
|
||||
| readonly | whether TimePicker is read only | ^[boolean] | false |
|
||||
| disabled | whether TimePicker 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'` | — |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | — |
|
||||
| placeholder | placeholder in non-range mode | ^[string] | '' |
|
||||
| start-placeholder | placeholder for the start time in range mode | ^[string] | — |
|
||||
| end-placeholder | placeholder for the end time in range mode | ^[string] | — |
|
||||
| is-range | whether to pick a time range | ^[boolean] | false |
|
||||
| arrow-control | whether to pick time using arrow buttons | ^[boolean] | false |
|
||||
| popper-class | custom class name for TimePicker's dropdown | ^[string] | — |
|
||||
| popper-class | custom class name for TimePicker's dropdown | ^[string] | '' |
|
||||
| range-separator | range separator | ^[string] | '-' |
|
||||
| format | format of the displayed value in the input box | ^[string] see [date formats](/en-US/component/date-picker#date-formats) | — |
|
||||
| default-value | optional, default date of the calendar | ^[Date] / ^[array]`[Date, Date]` | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[array]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | — |
|
||||
| default-value | optional, default date of the calendar | ^[Date] / ^[object]`[Date, Date]` | — |
|
||||
| id | same as `id` in native input | ^[string] / ^[object]`[string, string]` | — |
|
||||
| name | same as `name` in native input | ^[string] | '' |
|
||||
| label ^(a11y) | same as `aria-label` in native input | ^[string] | — |
|
||||
| prefix-icon | Custom prefix icon component | ^[string] / ^[Component] | Clock |
|
||||
| clear-icon | Custom clear icon component | ^[string] / ^[Component] | CircleClose |
|
||||
|
||||
@@ -74,16 +74,7 @@
|
||||
<div
|
||||
v-else
|
||||
ref="inputRef"
|
||||
:class="[
|
||||
nsDate.b('editor'),
|
||||
nsDate.bm('editor', type),
|
||||
nsInput.e('wrapper'),
|
||||
nsDate.is('disabled', pickerDisabled),
|
||||
nsDate.is('active', pickerVisible),
|
||||
nsRange.b('editor'),
|
||||
pickerSize ? nsRange.bm('editor', pickerSize) : '',
|
||||
$attrs.class,
|
||||
]"
|
||||
:class="rangeInputKls"
|
||||
:style="($attrs.style as any)"
|
||||
@click="handleFocusInput"
|
||||
@mouseenter="onMouseEnter"
|
||||
@@ -134,13 +125,7 @@
|
||||
/>
|
||||
<el-icon
|
||||
v-if="clearIcon"
|
||||
:class="[
|
||||
nsInput.e('icon'),
|
||||
nsRange.e('close-icon'),
|
||||
{
|
||||
[nsRange.e('close-icon--hidden')]: !showClose,
|
||||
},
|
||||
]"
|
||||
:class="clearIconKls"
|
||||
@click="onClearIconClick"
|
||||
>
|
||||
<component :is="clearIcon" />
|
||||
@@ -168,7 +153,16 @@
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, inject, nextTick, provide, ref, unref, watch } from 'vue'
|
||||
import {
|
||||
computed,
|
||||
inject,
|
||||
nextTick,
|
||||
provide,
|
||||
ref,
|
||||
unref,
|
||||
useAttrs,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { isEqual } from 'lodash-unified'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
@@ -213,6 +207,7 @@ const emit = defineEmits([
|
||||
'visible-change',
|
||||
'keydown',
|
||||
])
|
||||
const attrs = useAttrs()
|
||||
|
||||
const { lang } = useLocale()
|
||||
|
||||
@@ -232,6 +227,23 @@ const valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)
|
||||
let hasJustTabExitedInput = false
|
||||
let ignoreFocusEvent = false
|
||||
|
||||
const rangeInputKls = computed(() => [
|
||||
nsDate.b('editor'),
|
||||
nsDate.bm('editor', props.type),
|
||||
nsInput.e('wrapper'),
|
||||
nsDate.is('disabled', pickerDisabled.value),
|
||||
nsDate.is('active', pickerVisible.value),
|
||||
nsRange.b('editor'),
|
||||
pickerSize ? nsRange.bm('editor', pickerSize.value) : '',
|
||||
attrs.class,
|
||||
])
|
||||
|
||||
const clearIconKls = computed(() => [
|
||||
nsInput.e('icon'),
|
||||
nsRange.e('close-icon'),
|
||||
!showClose.value ? nsRange.e('close-icon--hidden') : '',
|
||||
])
|
||||
|
||||
watch(pickerVisible, (val) => {
|
||||
if (!val) {
|
||||
userInput.value = null
|
||||
|
||||
@@ -8,14 +8,7 @@
|
||||
<div :class="nsTime.be('range-picker', 'header')">
|
||||
{{ t('el.datepicker.startTime') }}
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
{ 'has-seconds': showSeconds },
|
||||
]"
|
||||
>
|
||||
<div :class="startContainerKls">
|
||||
<time-spinner
|
||||
ref="minSpinner"
|
||||
role="start"
|
||||
@@ -36,14 +29,7 @@
|
||||
<div :class="nsTime.be('range-picker', 'header')">
|
||||
{{ t('el.datepicker.endTime') }}
|
||||
</div>
|
||||
<div
|
||||
:class="[
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
{ 'has-seconds': showSeconds },
|
||||
]"
|
||||
>
|
||||
<div :class="endContainerKls">
|
||||
<time-spinner
|
||||
ref="maxSpinner"
|
||||
role="end"
|
||||
@@ -121,6 +107,19 @@ const {
|
||||
defaultValue,
|
||||
} = pickerBase.props
|
||||
|
||||
const startContainerKls = computed(() => [
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
showSeconds.value ? 'has-seconds' : '',
|
||||
])
|
||||
const endContainerKls = computed(() => [
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
showSeconds.value ? 'has-seconds' : '',
|
||||
])
|
||||
|
||||
const startTime = computed(() => props.parsedValue![0])
|
||||
const endTime = computed(() => props.parsedValue![1])
|
||||
const oldValue = useOldValue(props)
|
||||
|
||||
Reference in New Issue
Block a user