throttle input

src/features/mark/MarkHistory.vue

@@ -15,7 +15,8 @@
     </div>
     <div class="tw-mt-1 tw-mb-1 tw-flex">
       <input
-        v-model="secretNumberInput"
+        :value="secretNumberInput"
+        @input="updateSecretNumber"
         type="text"
         placeholder="查找试卷"
         class="
@@ -109,7 +110,7 @@ import {
   CaretDownOutlined,
   CaretUpOutlined,
 } from "@ant-design/icons-vue";
-import { cloneDeep } from "lodash";
+import { cloneDeep, throttle } from "lodash";
 
 export default defineComponent({
   name: "MarkHistory",
@@ -123,7 +124,7 @@ export default defineComponent({
     shouldReload: { type: Number, required: true },
   },
   setup(props) {
-    const secretNumberInput = ref(null);
+    const secretNumberInput = ref("");
     const loading = ref(false);
     const currentPage = ref(1);
     const order = ref("markerTime" as MarkHistoryOrderBy);
@@ -241,6 +242,12 @@ export default defineComponent({
       }
     }
 
+    function _updateSecretNumber(event: InputEvent) {
+      const inputEle = event.target as HTMLInputElement;
+      secretNumberInput.value = inputEle.value ?? "";
+    }
+    const updateSecretNumber = throttle(_updateSecretNumber, 1500);
+
     return {
       store,
       loading,
@@ -253,6 +260,7 @@ export default defineComponent({
       sort,
       order,
       toggleOrderBy,
+      updateSecretNumber,
     };
   },
 });