搜索栏

src/assets/icons/svg/search2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1769408646770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7350" id="mx_n_1769408646771" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M995.555556 950.044444l-335.644445-335.644444c56.888889-62.577778 85.333333-147.911111 85.333333-238.933333C750.933333 170.666667 585.955556 0 375.466667 0S0 170.666667 0 375.466667s170.666667 375.466667 375.466667 375.466666c91.022222 0 176.355556-34.133333 238.933333-85.333333l335.644444 335.644444c5.688889 5.688889 17.066667 11.377778 22.755556 11.377778 11.377778 0 17.066667 0 22.755556-11.377778 17.066667-17.066667 17.066667-39.822222 0-51.2zM68.266667 375.466667c0-170.666667 136.533333-307.2 307.2-307.2 170.666667 0 307.2 136.533333 307.2 307.2 0 170.666667-136.533333 307.2-307.2 307.2-164.977778 0-307.2-136.533333-307.2-307.2z" fill="#ffffff" p-id="7351"></path></svg>

src/components/HeaderSearch/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
-    <!-- <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" /> -->
+  <div :class="{ show: show }" class="header-search">
+    <div class="header-search-wrapper">
+      <svg-icon icon-class="search2" class="search-icon" />
+
       <el-select
         ref="headerSearchSelect"
         v-model="search"
@@ -11,13 +13,17 @@
         placeholder="全局搜索"
         class="header-search-select"
         @change="change"
+        style="width: 150px"
       >
-      <template #prefix>
-        <img src="@/assets/images/search.png" style="width: 18px; height: 18px; margin-top: 17px" />
-      </template>
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+        <el-option
+          v-for="option in options"
+          :key="option.item.path"
+          :value="option.item"
+          :label="option.item.title.join(' > ')"
+        />
       </el-select>
     </div>
+  </div>
 </template>
 
 <script>
@@ -34,13 +40,13 @@ export default {
       options: [],
       searchPool: [],
       show: false,
-      fuse: undefined
+      fuse: undefined,
     }
   },
   computed: {
     routes() {
       return this.$store.getters.permission_routes
-    }
+    },
   },
   watch: {
     routes() {
@@ -55,7 +61,7 @@ export default {
       } else {
         document.body.removeEventListener('click', this.close)
       }
-    }
+    },
   },
   mounted() {
     this.searchPool = this.generateRoutes(this.routes)
@@ -73,15 +79,15 @@ export default {
       this.show = false
     },
     change(val) {
-      const path = val.path;
-      const query = val.query;
-      if(this.ishttp(val.path)) {
+      const path = val.path
+      const query = val.query
+      if (this.ishttp(val.path)) {
         // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
+        const pindex = path.indexOf('http')
+        window.open(path.substr(pindex, path.length), '_blank')
       } else {
         if (query) {
-          this.$router.push({ path: path, query: JSON.parse(query) });
+          this.$router.push({ path: path, query: JSON.parse(query) })
         } else {
           this.$router.push(path)
         }
@@ -99,13 +105,16 @@ export default {
         location: 0,
         distance: 100,
         minMatchCharLength: 1,
-        keys: [{
+        keys: [
+          {
             name: 'title',
-          weight: 0.7
-        }, {
+            weight: 0.7,
+          },
+          {
             name: 'path',
-          weight: 0.3
-        }]
+            weight: 0.3,
+          },
+        ],
       })
     },
     // Filter out the routes that can be displayed in the sidebar
@@ -115,11 +124,13 @@ export default {
 
       for (const router of routes) {
         // skip hidden router
-        if (router.hidden) { continue }
+        if (router.hidden) {
+          continue
+        }
 
         const data = {
           path: !this.ishttp(router.path) ? path.resolve(basePath, router.path) : router.path,
-          title: [...prefixTitle]
+          title: [...prefixTitle],
         }
 
         if (router.meta && router.meta.title) {
@@ -155,8 +166,8 @@ export default {
     },
     ishttp(url) {
       return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -166,7 +177,7 @@ export default {
 
   .search-icon {
     cursor: pointer;
-    font-size: 18px;
+    font-size: 14px;
     vertical-align: middle;
   }
 
@@ -189,15 +200,19 @@ export default {
       // border-bottom: 1px solid #d9d9d9;
       // vertical-align: middle;
       border: none;
-      background: rgba(255,255,255,0.2);
+      background: rgba(255, 255, 255, 0.2);
       border-radius: 4px 4px 4px 4px;
       font-family: Microsoft YaHei, Microsoft YaHei;
       font-weight: 400;
-      font-size: 12px;
-      color: #EBEBEB;
+      font-size: 14px;
+      color: #ebebeb;
       text-align: left;
       font-style: normal;
       text-transform: none;
+      padding-left: 30px;
+    }
+    ::v-deep .el-input__inner::placeholder {
+      color: #C9E7F7;
     }
   }
 
@@ -208,4 +223,24 @@ export default {
     }
   }
 }
+
+.header-search-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+/* 放大镜图标 */
+.search-icon {
+  position: absolute;
+  left: 8px;
+  top: 46%;
+  transform: translateY(-50%);
+  z-index: 3;
+  pointer-events: none; /* 不挡点击 */
+}
+
+/* 给输入框让出图标位置 */
+:deep(.header-search-select .el-input__inner) {
+  padding-left: 32px !important;
+}
 </style>