fix(form): 文本输入change出发太频繁

packages/form/src/fields/Number.vue

@@ -1,7 +1,7 @@
 <template>
   <TMagicInputNumber
     v-if="model"
-    :model-value="model[name]"
+    v-model="value"
     clearable
     controls-position="right"
     :size="size"
@@ -10,13 +10,13 @@
     :step="config.step"
     :placeholder="config.placeholder"
     :disabled="disabled"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   ></TMagicInputNumber>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInputNumber } from '@tmagic/design';
 
@@ -34,6 +34,18 @@ const emit = defineEmits<{
   input: [values: number];
 }>();
 
+const value = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');

packages/form/src/fields/NumberRange.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="m-fields-number-range">
     <TMagicInput
-      :model-value="model[name][0]"
+      v-model="firstValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="minChangeHandler"
+      @change="minChangeHandler"
     ></TMagicInput>
     <span class="split-tag">-</span>
     <TMagicInput
-      :model-value="model[name][1]"
+      v-model="secondValue"
       :clearable="config.clearable ?? true"
       :size="size"
       :disabled="disabled"
-      @update:model-value="maxChangeHandler"
+      @change="maxChangeHandler"
     ></TMagicInput>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue';
+
 import { TMagicInput } from '@tmagic/design';
 
 import type { FieldProps, NumberRangeConfig } from '../schema';
@@ -34,6 +36,21 @@ const emit = defineEmits<{
   change: [values: [number, number]];
 }>();
 
+const firstValue = ref<number>();
+const secondValue = ref<number>();
+
+watch(
+  () => props.model[props.name],
+  ([first, second]) => {
+    firstValue.value = first;
+    secondValue.value = second;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
 useAddField(props.prop);
 
 if (!Array.isArray(props.model[props.name])) {

packages/form/src/fields/Text.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="m-fields-text">
     <TMagicInput
-      :model-value="model[name]"
+      v-model="value"
       ref="input"
       clearable
       :size="size"
       :placeholder="config.placeholder"
       :disabled="disabled"
-      @update:model-value="changeHandler"
+      @change="changeHandler"
       @input="inputHandler"
       @keyup="keyUpHandler($event)"
     >
@@ -67,6 +67,18 @@ useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 const appendConfig = computed(() => {
   if (typeof props.config.append === 'string') {
     return {

packages/form/src/fields/Textarea.vue

@@ -1,20 +1,20 @@
 <template>
   <TMagicInput
-    :model-value="model[name]"
+    v-model="value"
     type="textarea"
     :size="size"
     clearable
     :placeholder="config.placeholder"
     :disabled="disabled"
     :rows="config.rows"
-    @update:model-value="changeHandler"
+    @change="changeHandler"
     @input="inputHandler"
   >
   </TMagicInput>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, ref, watch } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
@@ -32,6 +32,18 @@ const emit = defineEmits<{
   input: [value: string];
 }>();
 
+const value = ref('');
+
+watch(
+  () => props.model[props.name],
+  (v) => {
+    value.value = v;
+  },
+  {
+    immediate: true,
+  },
+);
+
 useAddField(props.prop);
 
 const mForm = inject<FormState | null>('mForm');