style：搜索菜单按钮，点击后自动获取焦点

src/components/RouterSearch/index.vue

@@ -17,9 +17,10 @@
       />
     </el-select>
   </ElDialog>
-  <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
+  <div v-else class="custom-hover" @click.stop="toggleTopSearch">
     <Icon icon="ep:search" />
     <el-select
+      ref="topSelectRef"
       @click.stop
       filterable
       :reserve-keyword="false"
@@ -51,7 +52,8 @@ defineProps({
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
 const showTopSearch = ref(false) // 是否显示顶部搜索框
-const value: Ref = ref('') // 用户输入的值
+const value: Ref = ref('')
+const topSelectRef = ref<InstanceType<typeof ElSelect>>()
 
 const routers = router.getRoutes() // 路由对象
 const options = computed(() => {
@@ -86,6 +88,15 @@ function hiddenTopSearch() {
   showTopSearch.value = false
 }
 
+function toggleTopSearch() {
+  showTopSearch.value = !showTopSearch.value
+  if (showTopSearch.value) {
+    setTimeout(() => {
+      topSelectRef.value?.focus()
+    }, 600)
+  }
+}
+
 onMounted(() => {
   window.addEventListener('keydown', listenKey)
   window.addEventListener('click', hiddenTopSearch)