From e9a2530474608f1afb7aade1bca0a6679de2a8cb Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Wed, 10 Aug 2022 21:04:25 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(component):=20[input]v-model=20?=
 =?UTF-8?q?=E5=9C=A8=20IME=20=E8=BE=93=E5=85=A5=E6=8B=BC=E5=AD=97=E9=98=B6?=
 =?UTF-8?q?=E6=AE=B5=E8=A7=A6=E5=8F=91=E6=9B=B4=E6=96=B0=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package/component/src/component/input/index.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/package/component/src/component/input/index.vue b/package/component/src/component/input/index.vue
index 67ed8b85..506fb654 100644
--- a/package/component/src/component/input/index.vue
+++ b/package/component/src/component/input/index.vue
@@ -58,6 +58,7 @@ const currentValue = ref<string>(
 );
 const hasContent = computed(() => (props.modelValue as string)?.length > 0);
 const isPassword = computed(() => type.value == "password");
+const composing = ref(false);
 
 watch(
   () => props.type,
@@ -85,8 +86,11 @@ watch(
 const onInput = function (event: Event) {
   const inputElement = event.target as HTMLInputElement;
   const value = inputElement.value;
-  emit("update:modelValue", value);
   emit("input", value);
+  if (composing.value) {
+    return;
+  }
+  emit("update:modelValue", value);
 };
 
 const onClear = () => {
@@ -108,6 +112,15 @@ const onBlur = (event: Event) => {
   emit("blur", event);
 };
 
+const onCompositionstart = () => {
+  composing.value = true;
+}
+
+const onCompositionend = (event: Event) => {
+  composing.value = false;
+  onInput(event)
+}
+
 const classes = computed(() => {
   return { "layui-disabled": props.disabled };
 });
@@ -150,6 +163,8 @@ const showPassword = () => {
         @change="onChange"
         @focus="onFocus"
         @blur="onBlur"
+        @compositionstart="onCompositionstart"
+        @compositionend="onCompositionend"
       />
       <span class="layui-input-suffix" v-if="slots.suffix || props.suffixIcon">
         <slot name="suffix" v-if="slots.suffix"></slot>