refactor: refactor style and children components

src/components/layout/HeaderSearch.vue

@@ -1,14 +1,13 @@
 <template>
-  <span class="">
+  <span class="header-search">
-    <a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/>
+    <a-icon type="search" class="search-icon" @click="enterSearchMode"/>
     <a-auto-complete
       ref="input"
       :dataSource="dataSource"
-      :class="[searchMode ? 'enterSearch' : 'leaveSearch']"
+      :class="['search-input', searchMode ? 'enter' : 'leave']"
       placeholder="站内搜索"
       @blur="leaveSearchMode"
     >
-      <a-input style="" />
     </a-auto-complete>
   </span>
 </template>
@@ -29,7 +28,7 @@ export default {
   methods: {
     enterSearchMode () {
       this.searchMode = true
-      this.$refs.input.focus()
+      setTimeout(() => this.$refs.input.focus(), 300)
     },
     leaveSearchMode () {
       this.searchMode = false
@@ -38,35 +37,32 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="less">
-  .enterSearch {
+  .header-search{
-    width: 225px;
+    .search-icon{
-    border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
+      font-size: 16px;
-    transition: width 0.3s ease-in-out;
+      cursor: pointer;
-  }
+    }
-  .leaveSearch {
+    .search-input{
-    width: 0px;
+      border: 0;
-    border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
+      border-bottom: 1px rgba(3, 5, 6, 0.23) solid;
-    transition: width 0.3s ease-in-out;
+      transition: width 0.3s ease-in-out;
-  }
+      input{
-  .enterSearch input, .leaveSearch input {
+        border: 0;
-    border: 0;
+        box-shadow: 0 0 0 0;
-  }
+      }
-  .enterSearch input:focus {
+      &.leave{
-    border: 0;
+        width: 0px;
-    box-shadow: 0 0 0 0;
+        input{
-  }
+          display: none;
-  .leaveSearch input{
+        }
-    width: 0px;
+      }
-    border: 0;
+      &.enter{
-  }
+        width: 200px;
-  .fade-enter-active, .fade-leave-active {
+        input:focus{
-    transition: width .3s;
+          box-shadow: 0 0 0 0;
-  }
+        }
-  .fade-enter{
+      }
-    width: 200px;
+    }
-  }
-  .fade-leave{
-    width: 0px;
   }
 </style>