Ver Fonte

在封装的组件中update:search使用防抖触发输入,不需要防抖searchDebouncedTime传入0即可

lifanagju_citu há 11 meses atrás
pai
commit
c56ae1c5f9

+ 3 - 2
src/components/CtForm/index.vue

@@ -20,13 +20,14 @@
                 v-if="item.type === 'autocomplete'"
                 v-model="item.value"
                 :item="item"
+                @search="v => item.search ? item.search(v) : null"
                 @change="handleChange(item)"
               ></autocompleteUI>
               <comboboxUI
                 v-if="item.type === 'combobox'"
                 v-model="item.value"
                 :item="item"
-                @search="val => item.search ? item.search(val) : null"
+                @search="v => item.search ? item.search(v) : null"
                 @change="handleChange(item)"
               ></comboboxUI>
               <!-- comboboxZhAndEnUI暂不可用 -->
@@ -34,7 +35,7 @@
                 v-if="item.type === 'comboboxZhAndEn'"
                 v-model="item.value"
                 :item="item"
-                @search="val => item.search ? item.search(val) : null"
+                @search="v => item.search ? item.search(v) : null"
                 @change="handleChange(item)"
               ></comboboxZhAndEnUI>
               <radioGroupUI

+ 9 - 2
src/components/FormUI/autocomplete/index.vue

@@ -16,28 +16,35 @@
       :disabled="item.disabled"
       :multiple="item.multiple"
       :clearable="item.clearable"
-      :search="item.searchInput"
       color="primary"
       :hide-no-data="item.hideNoData"
       :no-data-text="item.noDataText || 'No data available'"
       :hide-selected="item.hideSelected"
+      @update:search="v => item.search ? debouncedCallbackSearch(v) : null"
       @update:modelValue="modelValueUpDate"
     ></v-autocomplete>
   </div>
 </template>
 <script setup>
+import { debounce } from 'lodash'
 import { ref, defineEmits } from 'vue';
 defineOptions({ name:'FormUI-v-autocomplete'})
 
 const props = defineProps({item: Object, modelValue: [String, Number]})
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue', 'change', 'search'])
 const item = props.item
+const searchDebouncedTime = item.searchDebouncedTime === 0 ? 0 : 500
+
 const value = ref(props.modelValue)
 const modelValueUpDate = (val) => {
   value.value = val
   emit('update:modelValue', value.value)
   emit('change', value.value)
 }
+
+const debouncedCallbackSearch = debounce(newValue => {
+  emit('search', newValue)
+}, searchDebouncedTime)
 </script>
 <style lang="scss" scoped>
 </style>

+ 8 - 5
src/components/FormUI/combobox/index.vue

@@ -14,28 +14,31 @@
       :clearable="item.clearable"
       :disabled="item.disabled"
       :return-object="item.returnObject || false"
-      @update:search="search"
+      @update:search="v => item.search ? debouncedCallbackSearch(v) : null"
       @update:modelValue="modelValueUpDate"
     ></v-combobox>
   </div>
 </template>
 <script setup>
+import { debounce } from 'lodash'
 import { ref, defineEmits } from 'vue';
 defineOptions({ name:'FormUI-v-combobox'})
 
 const props = defineProps({item: Object, modelValue: [String, Number]})
 const emit = defineEmits(['update:modelValue', 'change', 'search'])
 const item = props.item
+const searchDebouncedTime = item.searchDebouncedTime === 0 ? 0 : 500
+
 const value = ref(props.modelValue)
 const modelValueUpDate = (val) => {
   value.value = val
   emit('update:modelValue', value.value)
-  // let obj = null // if (item.getObject) obj = item.items.find(e => e[item.itemValue] === value.value) || null
   emit('change', value.value)
 }
-const search = (val) => {
-  emit('search', val)
-}
+
+const debouncedCallbackSearch = debounce(newValue => {
+  emit('search', newValue)
+}, searchDebouncedTime)
 </script>
 <style lang="scss" scoped>
 </style>