From 4c90f46f51ead35ec5dc7ea24721befdb81be6f8 Mon Sep 17 00:00:00 2001 From: chenjy29 Date: Mon, 27 Oct 2025 17:48:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=AD=E6=96=87?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=B3=95=E6=8B=BC=E9=9F=B3=E9=98=B6=E6=AE=B5?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=80=89=E9=A1=B9=E5=90=8E=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E7=A9=BA=E7=99=BD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/vc-select/BaseSelect.tsx | 12 ++++++ .../vc-select/Selector/SingleSelector.tsx | 42 +++++++++++++++++-- components/vc-select/Selector/index.tsx | 18 ++++++-- 3 files changed, 64 insertions(+), 8 deletions(-) diff --git a/components/vc-select/BaseSelect.tsx b/components/vc-select/BaseSelect.tsx index 72f50d8405..7765e8d4cf 100644 --- a/components/vc-select/BaseSelect.tsx +++ b/components/vc-select/BaseSelect.tsx @@ -281,6 +281,14 @@ export default defineComponent({ const selectorRef = shallowRef(null); const listRef = shallowRef(null); const blurRef = ref(false); + const compositionStatus = ref(false); // 基于BaseSelect定义当前是否处于输入法组合状态 + const onCompositionStart = () => { + // 输入法组合开始时，设置compositionStatus为true + compositionStatus.value = true; + }; + const onCompositionEnd = () => { + compositionStatus.value = false; + }; /** Used for component focused management */ const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset(); @@ -765,6 +773,7 @@ export default defineComponent({ let clearNode: VueNode; const onClearMouseDown: MouseEventHandler = () => { onClear?.(); + onCompositionEnd(); onDisplayValuesChange([], { type: 'clear', @@ -866,6 +875,9 @@ export default defineComponent({ onSearchSubmit={onInternalSearchSubmit} onRemove={onSelectorRemove} tokenWithEnter={tokenWithEnter.value} + compositionStatus={compositionStatus.value} + onCompositionStart={onCompositionStart} + onCompositionEnd={onCompositionEnd} /> ); }, diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index 58aba8cb5d..51fc39c29d 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -44,6 +44,9 @@ const SingleSelector = defineComponent({ setup(props) { const inputChanged = shallowRef(false); + // 本地输入状态管理 + const hasInput = shallowRef(false); + const combobox = computed(() => props.mode === 'combobox'); const inputEditable = computed(() => combobox.value || props.showSearch); @@ -65,12 +68,38 @@ const SingleSelector = defineComponent({ { immediate: true }, ); + // 监听下拉框关闭（失焦）时重置输入状态 + watch( + () => props.open, + newOpen => { + if (!newOpen) { + hasInput.value = false; + } + }, + ); + + // 监听选择完成（values变化）时重置输入状态 + watch( + () => props.values, + () => { + if (props.values && props.values.length > 0) { + hasInput.value = false; + } + }, + { deep: true }, + ); + // Not show text when closed expect combobox mode - const hasTextInput = computed(() => - props.mode !== 'combobox' && !props.open && !props.showSearch + const hasTextInput = computed(() => { + // 只有在本地输入状态为true时，才认为有文本输入 + if (!hasInput.value) { + return false; + } + + return props.mode !== 'combobox' && !props.open && !props.showSearch ? false - : !!inputValue.value || props.compositionStatus, - ); + : !!inputValue.value || props.compositionStatus; + }); const title = computed(() => { const item = props.values[0]; @@ -92,6 +121,10 @@ const SingleSelector = defineComponent({ }; const handleInput = (e: Event) => { const composing = (e.target as any).composing; + + // 用户输入时设置输入状态为true + hasInput.value = true; + if (!composing) { inputChanged.value = true; props.onInputChange(e); @@ -142,6 +175,7 @@ const SingleSelector = defineComponent({ } return ( <> + {hasTextInput.value ? '输入中' : '输入完成'} void; onRemove: (value: DisplayValueType) => void; onInputKeyDown?: (e: KeyboardEvent) => void; + compositionStatus?: boolean; + onCompositionStart?: () => void; + onCompositionEnd?: () => void; /** * @private get real dom for trigger align. @@ -115,6 +118,9 @@ const Selector = defineComponent({ onSearchSubmit: Function, onRemove: Function, onInputKeyDown: { type: Function as PropType }, + compositionStatus: { type: Boolean, default: false }, + onCompositionStart: { type: Function as PropType<() => void> }, + onCompositionEnd: { type: Function as PropType<() => void> }, /** * @private get real dom for trigger align. @@ -124,7 +130,7 @@ const Selector = defineComponent({ } as any, setup(props, { expose }) { const inputRef = createRef(); - const compositionStatus = ref(false); + const compositionStatus = computed(() => props.compositionStatus || false); // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); @@ -174,11 +180,13 @@ const Selector = defineComponent({ }; const onInputCompositionStart = () => { - compositionStatus.value = true; + // compositionStatus.value = true; + props.onCompositionStart(); }; const onInputCompositionEnd = (e: InputEvent) => { - compositionStatus.value = false; + // compositionStatus.value = false; + props.onCompositionEnd(); // Trigger search again to support `tokenSeparators` with typewriting if (props.mode !== 'combobox') { triggerOnSearch((e.target as HTMLInputElement).value); @@ -244,6 +252,8 @@ const Selector = defineComponent({ inputRef.current.focus(); }, blur: () => { + console.log('onBlurrrrrrrr1111111'); + props.onCompositionEnd(); inputRef.current.blur(); }, }); From 9f37d1990f78a4d6c1c21a8f0988eb3e9e30603d Mon Sep 17 00:00:00 2001 From: chenjy29 Date: Mon, 27 Oct 2025 17:50:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=88=A0=E9=99=A4=E8=B0=83=E8=AF=95?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/vc-select/Selector/SingleSelector.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index 51fc39c29d..5abcad3475 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -175,7 +175,6 @@ const SingleSelector = defineComponent({ } return ( <> - {hasTextInput.value ? '输入中' : '输入完成'}