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

fix: [el-date-picker] focus input box when focus method is called (#4343)

Browse Source 
fix #4327
This commit is contained in:
msidolphin 2021-12-11 06:56:40 +08:00 committed by GitHub
parent 21d41aed87
commit 4f6cac4252
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/en-US/component/date-picker.md
View File

@ -217,9 +217,9 @@ Note, date time locale (month name, first day of the week ...) are also configur
## Methods ## Methods
| Method | Description | Parameters | | Method | Description | Parameters |
| ------ | ------------------------- | ---------- | | ------ | ------------------------- | --------------- |
| focus | focus the Input component | — | | focus | focus the Input component | focusStartInput |
## Slots ## Slots

4
packages/components/date-picker/src/date-picker.ts
View File

@ -58,8 +58,8 @@ export default defineComponent({
const commonPicker = ref(null) const commonPicker = ref(null)
const refProps = { const refProps = {
...props, ...props,
focus: () => { focus: (focusStartInput = true) => {
commonPicker.value?.handleFocus() commonPicker.value?.focus(focusStartInput)
}, },
} }
ctx.expose(refProps) ctx.expose(refProps)

20
packages/components/time-picker/src/common/picker.vue
View File

@ -270,7 +270,7 @@ export default defineComponent({
ctx.emit('update:modelValue', val ? formatValue : val, lang.value) ctx.emit('update:modelValue', val ? formatValue : val, lang.value)
} }
} }
const refInput = computed(() => { const refInput = computed<HTMLInputElement[]>(() => {
if (refPopper.value.triggerRef) { if (refPopper.value.triggerRef) {
const _r = isRangeInput.value const _r = isRangeInput.value
? refPopper.value.triggerRef ? refPopper.value.triggerRef
@ -279,6 +279,12 @@ export default defineComponent({
} }
return [] return []
}) })
const refStartInput = computed(() => {
return refInput?.value[0]
})
const refEndInput = computed(() => {
return refInput?.value[1]
})
const setSelectionRange = (start, end, pos) => { const setSelectionRange = (start, end, pos) => {
const _inputs = refInput.value const _inputs = refInput.value
if (!_inputs.length) return if (!_inputs.length) return
@ -302,6 +308,17 @@ export default defineComponent({
userInput.value = null userInput.value = null
emitInput(result) emitInput(result)
} }
const focus = (focusStartInput = true) => {
let input = refStartInput.value
if (!focusStartInput && isRangeInput.value) {
input = refEndInput.value
}
if (input) {
input.focus()
}
}
const handleFocus = (e) => { const handleFocus = (e) => {
if (props.readonly || pickerDisabled.value || pickerVisible.value) return if (props.readonly || pickerDisabled.value || pickerVisible.value) return
pickerVisible.value = true pickerVisible.value = true
@ -610,6 +627,7 @@ export default defineComponent({
pickerDisabled, pickerDisabled,
onSetPickerOption, onSetPickerOption,
onCalendarChange, onCalendarChange,
focus,
} }
}, },
}) })