修正搜索功能

open-isle-cli/src/components/Dropdown.vue

@@ -148,6 +148,7 @@ export default {
     })
 
     const clickOutside = e => {
+      if (isMobile) return
       if (wrapper.value && !wrapper.value.contains(e.target)) {
         close()
       }
@@ -269,7 +270,7 @@ export default {
   right: 0;
   background: var(--background-color);
   border: 1px solid var(--normal-border-color);
-  z-index: 10;
+  z-index: 10000;
   max-height: 200px;
   min-width: 350px;
   overflow-y: auto;

open-isle-cli/src/components/HeaderComponent.vue

@@ -13,7 +13,7 @@
       </div>
 
       <div v-if="isLogin" class="header-content-right">
-        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+        <div v-if="isMobile" class="search-icon" @click="search">
           <i class="fas fa-search"></i>
         </div>
         <DropdownMenu ref="userMenu" :items="headerMenuItems">
@@ -27,20 +27,21 @@
       </div>
 
       <div v-else class="header-content-right">
-        <div v-if="isMobile" class="search-icon" @click="showSearch = true">
+        <div v-if="isMobile" class="search-icon" @click="search">
           <i class="fas fa-search"></i>
         </div>
         <div class="header-content-item-main" @click="goToLogin">登录</div>
         <div class="header-content-item-secondary" @click="goToSignup">注册</div>
       </div>
+      
+      <SearchDropdown ref="searchDropdown" v-if="isMobile && showSearch" @close="closeSearch" />
     </div>
   </header>
-  <SearchDropdown v-if="isMobile && showSearch" @close="showSearch = false" />
 </template>
 
 <script>
 import { authState, clearToken, loadCurrentUser } from '../utils/auth'
-import { watch } from 'vue'
+import { watch, nextTick } from 'vue'
 import DropdownMenu from './DropdownMenu.vue'
 import SearchDropdown from './SearchDropdown.vue'
 import { isMobile } from '../utils/screen'
@@ -104,6 +105,17 @@ export default {
         window.location.reload()
       })
     },
+    search() {
+      this.showSearch = true
+      nextTick(() => {
+        this.$refs.searchDropdown.toggle()
+      })
+    },
+    closeSearch() {
+      nextTick(() => {
+        this.showSearch = false
+      })
+    },
     goToLogin() {
       this.$router.push('/login')
     },

open-isle-cli/src/components/SearchDropdown.vue

@@ -2,13 +2,10 @@
   <div class="search-dropdown">
     <Dropdown ref="dropdown" v-model="selected" :fetch-options="fetchResults" remote menu-class="search-menu"
       option-class="search-option" :show-search="isMobile" @update:search="keyword = $event" @close="onClose">
-      <template #display="{ toggle, setSearch }">
-        <div v-if="isMobile" class="search-mobile-trigger" @click="toggle">
-          <i class="fas fa-search"></i>
-        </div>
-        <div v-else class="search-input" @click="toggle">
+      <template #display="{ setSearch }">
+        <div class="search-input">
           <i class="search-input-icon fas fa-search"></i>
-          <input class="text-input" v-model="keyword" placeholder="Search" @focus="toggle" @input="setSearch(keyword)" />
+          <input class="text-input" v-model="keyword" placeholder="Search" @input="setSearch(keyword)" />
         </div>
       </template>
       <template #option="{ option }">
@@ -26,7 +23,7 @@
 </template>
 
 <script>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { isMobile } from '../utils/screen'
 import { useRouter } from 'vue-router'
 import Dropdown from './Dropdown.vue'
@@ -44,6 +41,10 @@ export default {
     const results = ref([])
     const dropdown = ref(null)
 
+    const toggle = () => {
+      dropdown.value.toggle()
+    }
+
     const onClose = () => emit('close')
 
     const fetchResults = async (kw) => {
@@ -76,12 +77,6 @@ export default {
       comment: 'fas fa-comment'
     }
 
-    onMounted(() => {
-      if (isMobile.value && dropdown.value) {
-        dropdown.value.toggle()
-      }
-    })
-
     watch(selected, val => {
       if (!val) return
       const opt = results.value.find(r => r.id === val)
@@ -99,7 +94,7 @@ export default {
       keyword.value = ''
     })
 
-    return { keyword, selected, fetchResults, highlight, iconMap, isMobile, dropdown, onClose }
+    return { keyword, selected, fetchResults, highlight, iconMap, isMobile, dropdown, onClose, toggle }
   }
 }
 </script>