[fixed]: 点击菜单项跳转无效 flipped-aurora#1378

piexlmax · piexlmax · commit 1aea41585520 · 2023-03-18T14:21:34.000+08:00
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
@@ -1079,26 +1079,6 @@ $mainHight: 100vh;
     }
 }
 
-.transition-box {
-    overflow: hidden;
-    width: 160px;
-    margin-right: 32px;
-    text-align: center;
-    margin-top: -12px;
-		.el-input__wrapper{
-			.el-input__inner{
-				height: 100%;
-			}
-			box-shadow: none !important;
-		}
-		.el-select .el-input .el-input__wrapper.is-focus{
-			box-shadow: none !important;
-		}
-		.el-select .el-input.is-focus .el-input__wrapper{
-			box-shadow: none !important;
-		}
-}
-
 .screenfull {
     overflow: hidden;
     color: rgba($color: #000000, $alpha: 0.65);
@@ -1223,4 +1203,4 @@ $mainHight: 100vh;
 
 .justify-content-flex-end {
     justify-content: flex-end;
-}
+}
diff --git a/web/src/view/layout/search/search.vue b/web/src/view/layout/search/search.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="search-component">
-    <div v-if="show" class="transition-box" style="display: inline-block;">
+    <div v-if="show" class="transition-box">
       <el-select
         ref="searchInput"
-        v-model="value"
         filterable
         placeholder="请选择"
         @blur="hiddenSearch"
@@ -17,30 +16,28 @@
         />
       </el-select>
     </div>
-    <div
-      v-if="btnShow"
-      class="user-box"
-    >
-      <div class="gvaIcon gvaIcon-refresh" :class="[reload ? 'reloading' : '']" @click="handleReload" />
-    </div>
-    <div
-      v-if="btnShow"
-      class="user-box"
-    >
-      <div class="gvaIcon gvaIcon-search" @click="showSearch" />
-    </div>
-    <div
-      v-if="btnShow"
-      class="user-box"
-    >
-      <Screenfull class="search-icon" :style="{cursor:'pointer'}" />
-    </div>
-    <div
-      v-if="btnShow"
-      class="user-box"
-    >
-      <div class="service gvaIcon-customer-service" @click="toService" />
-    </div>
+    <template v-else>
+      <div
+        class="user-box"
+      >
+        <div class="gvaIcon gvaIcon-refresh" :class="[reload ? 'reloading' : '']" @click="handleReload" />
+      </div>
+      <div
+        class="user-box"
+      >
+        <div class="gvaIcon gvaIcon-search" @click="showSearch" />
+      </div>
+      <div
+        class="user-box"
+      >
+        <Screenfull class="search-icon" :style="{cursor:'pointer'}" />
+      </div>
+      <div
+        class="user-box"
+      >
+        <div class="service gvaIcon-customer-service" @click="toService" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -61,22 +58,23 @@ const router = useRouter()
 
 const routerStore = useRouterStore()
 
-const value = ref('')
-const changeRouter = () => {
-  router.push({ name: value.value })
-  value.value = ''
+const changeRouter = (e) => {
+  if (e.indexOf('http:') > -1 || e.indexOf('https:') > -1) {
+    window.open(e)
+    return
+  }
+  router.push({ name: e })
 }
 
-const show = ref(false)
-const btnShow = ref(true)
-const hiddenSearch = () => {
-  show.value = false
-  btnShow.value = true
+const show = ref(true)
+const hiddenSearch = async() => {
+  setTimeout(() => {
+    show.value = false
+  }, 100)
 }
 
 const searchInput = ref(null)
 const showSearch = async() => {
-  btnShow.value = false
   show.value = true
   await nextTick()
   searchInput.value.focus()
@@ -100,6 +98,26 @@ const toService = () => {
   font-size: 18px;
 }
 
+.transition-box {
+  overflow: hidden;
+  width: 160px;
+  margin-right: 32px;
+  text-align: center;
+  ::v-deep(.el-input__wrapper){
+    .el-input__inner{
+      border-bottom: 1px solid var(--el-color-info-light-7);
+    }
+    box-shadow: none !important;
+  }
+  ::v-deep(.el-select .el-input .el-input__wrapper.is-focus){
+    box-shadow: none !important;
+  }
+::v-deep(.el-select .el-input.is-focus .el-input__wrapper){
+    box-shadow: none !important;
+  }
+}
+
+
 .reloading{
   animation:turn 0.5s linear infinite;
 }
