code review

packages/search/src/search.vue

@@ -2,7 +2,13 @@
   <div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
     <div class="zan-search__input-wrap">
       <zan-icon name="search"></zan-icon>
-      <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
+      <input
+        type="text"
+        :placeholder="placeholder"
+        v-model="value"
+        v-refocus="focusStatus"
+        @focus="handleFocus"
+        @keyup.enter="handleSearch">
       <zan-icon name="clear" @click="handleClean"></zan-icon>
     </div>
     <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
@@ -14,19 +20,21 @@
 
   export default {
     name: 'zan-search',
+
     components: {
       ZanIcon
     },
+
     props: {
-      placeholder: {
-        type: String
-      }
+      placeholder: String
     },
+
     watch: {
       value(val) {
         this.$emit('change', val);
       }
     },
+
     data() {
       return {
         value: '',
@@ -34,32 +42,47 @@
         isFocus: false
       };
     },
+
     directives: {
       refocus: {
         update: function(el, state) {
-          if (state.value) { el.focus(); }
+          if (state.value) {
+            el.focus();
+          }
         }
       }
     },
+
     methods: {
+      /**
+       * 进入input焦点，出现close和取消
+       */
       handleFocus() {
-        // 进入input焦点，出现close和取消
         this.isFocus = true;
       },
+
+      /**
+       * 点击close后清空vlaue后，再聚焦input框
+       */
       handleClean() {
-        // 点击close后清空vlaue后，再聚焦input框
         this.value = '';
         this.focusStatus = true;
       },
+
+      /**
+       * 点击取消后，清空所有回复最初状态
+       */
       handleBack() {
-        // 点击取消后，清空所有回复最初状态
         this.value = '';
         this.focusStatus = false;
         this.isFocus = false;
         this.$emit('cancel');
       },
+
+      /**
+       * input输入回车后，发送回调
+       */
       handleSearch() {
-        // input输入回车后，发送回调
         this.$emit('search', this.value);
       }
     }

packages/zanui-css/src/cell.css

@@ -1,5 +1,6 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
+@import './icon.css';
 
 @component-namespace zan {
   @b cell-group {

packages/zanui-css/src/search.css

@@ -1,69 +1,70 @@
 @import './common/var.css';
+@import './icon.css';
 
 @component-namespace zan {
-    @b search {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        align-items: center;
-        position: relative;
-        box-sizing: border-box;
-        padding: 4px 15px;
-        background-color: #F2F2F2;
+  @b search {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    padding: 4px 15px;
+    background-color: #F2F2F2;
 
-        @m focus {
-            .zan-search__input-wrap {
-                width: 82%;   
-            }
-            .zan-icon-clear {
-                display: inline-block;
-            }
-        }
-
-        @e input-wrap {
-            position: relative;
-            width: 90%;
-            padding: 8px 24px 8px 35px;
-            border: 1px solid $c-gray-light;
-            border-radius: 4px;
-            background-color: $c-white;
-
-            input {
-                width: 100%;
-                height: 14px;
-                font-size: 14px;
-                color: $c-gray-dark;
-                border: none;
-                outline: none;
-            }
-        }
-
-        @e cancel {
-            display: none;
-            color: #44BB00;
-            font-size: 14px;
-            white-space: nowrap;
-            margin-left: 5px;
-
-            @m focus {
-               display: block;
-            }
-        }
-
-        .zan-icon-search {
-            color: $c-gray-darker;
-            position: absolute;
-            top: 9px;
-            left: 10px;
-            font-size: 16px;
-        }
-
-        .zan-icon-clear {
-            display: none;
-            position: absolute;
-            right: 5px;
-            top: 8px;
-            color: #888;
-        }
+    @m focus {
+      .zan-search__input-wrap {
+        width: 82%;   
+      }
+      .zan-icon-clear {
+        display: inline-block;
+      }
     }
+
+    @e input-wrap {
+      position: relative;
+      width: 90%;
+      padding: 8px 24px 8px 35px;
+      border: 1px solid $c-gray-light;
+      border-radius: 4px;
+      background-color: $c-white;
+
+      input {
+        width: 100%;
+        height: 14px;
+        font-size: 14px;
+        color: $c-gray-dark;
+        border: none;
+        outline: none;
+      }
+    }
+
+    @e cancel {
+      display: none;
+      color: #44BB00;
+      font-size: 14px;
+      white-space: nowrap;
+      margin-left: 5px;
+
+      @m focus {
+        display: block;
+      }
+    }
+
+    .zan-icon-search {
+      color: $c-gray-darker;
+      position: absolute;
+      top: 9px;
+      left: 10px;
+      font-size: 16px;
+    }
+
+    .zan-icon-clear {
+      display: none;
+      position: absolute;
+      right: 5px;
+      top: 8px;
+      color: #888;
+    }
+  }
 }

packages/zanui-css/src/steps.css

@@ -1,5 +1,6 @@
 @import './common/var.css';
 @import './mixins/ellipsis.css';
+@import './icon.css';
 
 @component-namespace zan {
   @b steps {