完善input

src/view/components/basic-info.vue

@@ -69,7 +69,8 @@
         </div>
       </n-collapse-item>
     </n-collapse>
-    <div class="tag-box">
+    <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="100">
+      <div v-if="visible" class="tag-box">
         <span
           v-for="tag in tagList"
           :key="tag.name"
@@ -78,12 +79,23 @@
           >{{ tag.name }}</span
         >
       </div>
+    </m-animate>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ChartTypes } from '@/components/MyComponent'
-import { ref } from '@vue/reactivity'
+import { ref, PropType, computed } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+})
+
+const visible = computed(() => props.visible)
+
 const sumList = [
   { name: '党组织', value: 355, unit: '个' },
   { name: '关系在街道内党员', value: 10890, unit: '位' },

src/view/components/nav-bar.vue

@@ -14,6 +14,8 @@
         :loading="isLoading"
         clearable
         :on-clear="removeResult"
+        :on-focus="() => emit('focus')"
+        :on-blur="() => emit('blur')"
       >
         <template #prefix>
           <img class="icon" src="@images/search2.png" />
@@ -58,6 +60,8 @@ import { ref, watch } from 'vue'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
 
+const emit = defineEmits(['focus', 'blur'])
+
 const options = [
   {
     label: '选项1',
@@ -84,7 +88,6 @@ const removeResult = () => {
   resultData.value = {}
 }
 const handleSearch = useDebounce(function () {
-  if (!searchKey.value) return
   isLoading.value = true
   setTimeout(() => {
     resultData.value = {
@@ -103,6 +106,10 @@ const handleSearch = useDebounce(function () {
       ],
     }
     isLoading.value = false
+    if (!searchKey.value) {
+      showResult.value = false
+      return
+    }
     showResult.value = true
   }, 1000)
 })
@@ -110,7 +117,7 @@ watch(
   () => searchKey.value,
   (val) => {
     if (!val) {
-      setTimeout(() => removeResult(), 600)
+      removeResult()
       return
     }
     handleSearch()

src/view/main.vue

 <template>
-  <NavBar />
-  <BasicInfo />
+  <NavBar @focus="showTag = false" @blur="showTag = true" />
+  <BasicInfo :visible="showTag" />
   <div class="reset">
     <img src="@images/reset.png" />
   </div>
@@ -9,10 +9,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
 import InforModal from './components/info-modal.vue'
 import listModal from './components/list-modal.vue'
+const showTag = ref(true)
 </script>
 
 <style lang="stylus">