防抖

src/components/FormUI/TextInput/index.vue

@@ -32,6 +32,7 @@
   </div>
 </template>
 <script setup>
+import { debounce } from 'lodash'
 import { defineEmits, ref, watch } from 'vue';
 defineOptions({ name:'FormUI-v-text-field'})
 
@@ -39,6 +40,7 @@ const props = defineProps({item: Object, modelValue: [String, Number]})
 const emit = defineEmits(['update:modelValue', 'change', 'appendClick', 'appendInnerClick', 'enter'])
 const item = props.item
 const value = ref(props.modelValue)
+const searchDebouncedTime = item?.searchDebouncedTime === 0 ? ref(0) : ref(500)
 
 watch(() => props.modelValue, (newVal) => {
   value.value = newVal
@@ -46,8 +48,13 @@ watch(() => props.modelValue, (newVal) => {
 const modelValueUpDate = (val) => {
   value.value = val
   emit('update:modelValue', value.value)
-  emit('change', value.value)
+  debouncedCallbackUpDate(value.value)
+  // emit('change', value.value)
 }
+const debouncedCallbackUpDate = debounce(newValue => {
+  emit('change', newValue)
+}, searchDebouncedTime.value)
+
 const appendClick = () => {
   if (item.appendClick) item.appendClick()
   emit('appendClick', value.value)