diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 4aeb7264..28ed6124 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -3,7 +3,7 @@ import type { ZodType } from 'zod'; import type { FormSchema, MaybeComponentProps } from '../types'; -import { computed } from 'vue'; +import { computed, nextTick, ref, watch } from 'vue'; import { FormControl, @@ -52,6 +52,16 @@ const errors = useFieldError(fieldName); const formApi = formRenderProps.form; const isInValid = computed(() => errors.value?.length > 0); +const fieldComponentRef = ref(null); +const focus = () => { + if ( + fieldComponentRef.value && + typeof fieldComponentRef.value.focus === 'function' && + document.activeElement !== fieldComponentRef.value // 检查当前是否有元素被聚焦 + ) { + fieldComponentRef.value.focus(); + } +}; const fieldComponent = computed(() => { const finalComponent = isString(component) @@ -156,6 +166,18 @@ const computedProps = computed(() => { }; }); +watch( + () => computedProps.value?.autofocus, + (value) => { + if (value === true) { + nextTick(() => { + focus(); + }); + } + }, + { immediate: true }, +); + const shouldDisabled = computed(() => { return isDisabled.value || disabled || computedProps.value?.disabled; }); @@ -275,6 +297,7 @@ function createComponentProps(slotProps: Record) { >