feat: ✨ [search] 添加关闭下拉框隐藏方法 (#11)

closed #11

demo/components/search.vue

 <template>
-  <u-search :config="config" style="margin-left: 20px" @submit="submit"></u-search>
+  <u-search :config="config" style="margin-left: 20px" @submit="submit" ref="searchRef"></u-search>
   <div>abdds</div>
 </template>
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
-import { SearchConfig } from '~/index'
+import { onMounted, reactive, ref } from 'vue'
+import { SearchConfig, SearchInstance } from '~/index'
 
 defineOptions({
   name: 'search'
 })
 
+const searchRef = ref<SearchInstance>()
+
 const config = reactive<SearchConfig>({
   keywords: [],
   hotSearchList: []

packages/src/components/search/src/card-box.vue

 <template>
-  <div v-show="data.cardVisible && visible" class="card-box u-scrollbar">
+  <div v-show="data.visible && visible" class="card-box u-scrollbar">
     <div v-if="data.historySearchList.length != 0" class="history">
       <div class="header">
         <div class="title">历史搜索</div>

packages/src/components/search/src/search.vue

@@ -27,7 +27,7 @@
           @focus="
             () => {
               isFocus = true
-              data.cardVisible = true
+              data.visible = true
             }
           "
           @blur="isFocus = false"
@@ -60,7 +60,7 @@
       </div>
     </div>
     <CardBox
-      v-click-outside:[labelRef]="() => (data.cardVisible = false)"
+      v-click-outside:[labelRef]="() => (data.visible = false)"
       :data="data"
       @on-close="closeHander"
       @on-clear="removeAllHistory"
@@ -82,7 +82,7 @@ export interface HistoryApi {
 
 export interface DataApi {
   search: string
-  cardVisible: boolean
+  visible: boolean
   historySearchList: HistoryApi[]
   hotSearchList: string[]
 }
@@ -111,7 +111,7 @@ const state = reactive({
 
 const data = reactive<DataApi>({
   search: '',
-  cardVisible: false,
+  visible: false,
   historySearchList: storage.get('searchHistory') || [], // 历史搜索数据
   hotSearchList: props.config.hotSearchList
 })
@@ -196,6 +196,10 @@ const animationend = (e: AnimationEvent) => {
     }, 3000)
   }
 }
+
+defineExpose({
+  close: () => data.visible = false
+})
 </script>
 
 <style lang="scss" scoped>