-- 名称校验

src/components/project/NameInput.vue

@@ -1,29 +1,25 @@
 <template>
   <a-input
-    v-model:value="modelV"
-    :placeholder="placeholder"
-    :show-count="showCount"
-    :maxlength="maxlength"
-    :validate="validate"
-    @blur="validateProName"
-    @change="validateProName"
+      v-model:value="modelV"
+      :placeholder="placeholder"
+      :show-count="showCount"
+      :maxlength="maxlength"
+      :validate="validate"
+      @change="validateProName"
   />
-  <div style="color: red; font-size: 10px" v-if="value && !validate">
+  <div style="color: red; font-size: 10px" v-if="modelV && !validated">
     名称重复，请重新输入
   </div>
 </template>
 <script setup>
-import { defineProps, defineEmits, watch, ref, onMounted } from "vue";
-import { validateName } from "@/api/index1";
+import {defineProps, defineEmits, watch, ref, onMounted} from "vue";
+import {validateName} from "@/api/index1";
+import {throttle} from "@/api/method";
 
 const props = defineProps({
   value: {
     type: String,
   },
-  validate: {
-    type: Boolean,
-    default: true,
-  },
   id: {
     type: String,
   },
@@ -48,37 +44,45 @@ const emit = defineEmits({});
 
 const modelV = ref();
 
+const validating = ref(false)
+const validated = ref(true)
+
 onMounted(() => {
   modelV.value = props.value;
 });
 
 watch(
-  () => props.value,
-  () => {
-    if (props.value !== modelV.value) {
-      modelV.value = props.value;
+    () => props.value,
+    () => {
+      if (props.value !== modelV.value) {
+        modelV.value = props.value;
+      }
     }
-  }
 );
 
 watch(modelV, () => {
   emit("update:value", modelV.value);
 });
 
-function validateProName() {
-  emit("update:finished", false);
-  props.value &&
-    validateName({ name: props.value, type: props.type, id: props.id }).then(
-      (res) => {
-        console.log("resresresres", res);
-        if (props.value == "") {
-          emit("update:validate", res.data.data === 1);
-        } else {
-          emit("update:validate", res.data.data !== 1);
-          emit("update:finished", true);
-        }
+function validate() {
+  console.log('validate')
+  ;
+}
+
+function validateNameFun() {
+  validateName({name: props.value, type: props.type, id: props.id}).then(res => {
+        validating.value = false
+        validated.value = res.data.data !== 1
       }
-    );
+  )
+}
+
+const throttleValidateName = throttle(validateNameFun, 500)
+
+function validateProName() {
+  validating.value = true
+  validated.value = true
+  props.value && throttleValidateName()
 }
 </script>
 <style lang="scss">