前端代码优化 修改密码迁移至个人中心内部

web/src/view/layout/search/search.vue

@@ -3,6 +3,7 @@
     <transition name="el-fade-in-linear">
       <div class="transition-box" style="display: inline-block; " v-show="show">
         <el-select
+          ref="search-input"
           @blur="hiddenSearch"
           @change="changeRouter"
           filterable
@@ -18,36 +19,41 @@
         </el-select>
       </div>
     </transition>
-    <div :style="{display:'inline-block'}" class="user-box">
-      <i @click="show = !show" class="el-icon-search search-icon"></i>
+    <div :style="{display:'inline-block',float:'right'}" class="user-box">
+      <i @click="showSearch()" class="el-icon-search search-icon"></i>
     </div>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'searchComponent',
+  name: "searchComponent",
   data() {
     return {
-      value: '',
+      value: "",
       show: false
-    }
+    };
   },
   computed: {
-    ...mapGetters('router', ['routerList'])
+    ...mapGetters("router", ["routerList"])
   },
   methods: {
     changeRouter() {
-      this.$router.push({ name: this.value })
-      this.value = ''
+      this.$router.push({ name: this.value });
+      this.value = "";
     },
     hiddenSearch() {
-      this.show = false
+      this.show = false;
+    },
+    showSearch() {
+      this.show = true;
+      this.$nextTick(()=>{
+        this.$refs['search-input'].focus()
+      })
     }
   }
-}
+};
 </script>
 <style lang="scss">
-
 </style>