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);
       }
     }