diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 8bb926257..611135395 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -5,6 +5,7 @@ import { nextTick, onBeforeUnmount, onMounted, + provide, reactive, ref, toRefs, @@ -37,6 +38,7 @@ import { ErrorListType, FormInjectionKey, FormItemContext, + FormItemInjectionKey, SuccessListType, ValidateStatus, } from './const'; @@ -312,6 +314,14 @@ export default defineComponent({ }, ); + const handleBlur = async () => { + await validateHandler('blur'); + }; + + provide(FormItemInjectionKey, { + handleBlur, + }); + return () => { const renderRightIconContent = () => { if (!props.arrow) { diff --git a/src/input/input.tsx b/src/input/input.tsx index f6c47f05a..ff15bd50c 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -1,4 +1,4 @@ -import { PropType, ref, computed, defineComponent, nextTick, watch } from 'vue'; +import { PropType, ref, computed, defineComponent, nextTick, watch, inject } from 'vue'; import { BrowseIcon as TBrowseIcon, BrowseOffIcon as TBrowseOffIcon, @@ -9,6 +9,7 @@ import config from '../config'; import InputProps from './props'; import { InputValue, TdInputProps } from './type'; import { getCharacterLength, useDefault, extendAPI } from '../shared'; +import { FormItemInjectionKey } from '../form/const'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; import { useTNodeJSX } from '../hooks/tnode'; @@ -45,6 +46,7 @@ export default defineComponent({ const status = props.status || 'default'; const renderType = ref(props.type); const focused = ref(false); + const formItem = inject(FormItemInjectionKey, undefined); const inputClasses = computed(() => [ `${inputClass.value}__control`, @@ -133,18 +135,19 @@ export default defineComponent({ const handleBlur = (e: FocusEvent) => { focused.value = false; - // 失焦时处理 format if (isFunction(props.format)) { innerValue.value = props.format(innerValue.value); nextTick(() => { setInputValue(innerValue.value); props.onBlur?.(innerValue.value, { e }); + formItem?.handleBlur(); }); return; } props.onBlur?.(innerValue.value, { e }); + formItem?.handleBlur(); }; const handleCompositionend = (e: CompositionEvent) => { diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 3e2c980f3..53188ffcf 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -1,9 +1,10 @@ -import { computed, ref, onMounted, defineComponent, toRefs, nextTick, watch } from 'vue'; +import { computed, ref, onMounted, defineComponent, toRefs, nextTick, watch, inject } from 'vue'; import { getCharacterLength, useVModel } from '../shared'; import config from '../config'; import props from './props'; import { TextareaValue } from './type'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; +import { FormItemInjectionKey } from '../form/const'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; import { useTNodeJSX } from '../hooks/tnode'; @@ -16,6 +17,7 @@ export default defineComponent({ setup(props, context) { const renderTNodeJSX = useTNodeJSX(); const isDisabled = useFormDisabled(); + const formItem = inject(FormItemInjectionKey, undefined); const textareaClass = usePrefixClass('textarea'); @@ -107,6 +109,7 @@ export default defineComponent({ props.onFocus?.(innerValue.value, { e }); }; const handleBlur = (e: FocusEvent) => { + formItem?.handleBlur(); props.onBlur?.(innerValue.value, { e }); };