[breaking change] Search: 修改原有结构 (#198)

* 修改文档 注释

* [breaking change] change type showcase to simple

* [breaking change] search 组件传入参数更改

* search 文档更改

* [breaking change] delete type && add background && showSearch

* showCancel 更名为 showAction && 增加 slot action

* add search test code

packages/search/index.vue

@@ -1,21 +1,26 @@
 <template>
   <div
     class="van-search"
-    v-clickoutside="handleClickoutside"
-    :class="{ 'van-search--focus': isFocus, 'van-search--showcase': type === 'showcase' }">
-    <div class="van-search__input-wrap">
+    :class="{ 'van-search--show-action': showAction }"
+    :style="{ 'background-color': background }">
+    <div class="van-search__input-wrap" v-clickoutside="handleClickoutside">
       <van-icon name="search"></van-icon>
       <input
         type="search"
-        :placeholder="placeholder"
         class="van-search__input"
-        v-model="value"
         v-refocus="focusStatus"
+        :value="value"
+        :placeholder="placeholder"
+        @input="handleInput"
         @focus="handleFocus"
-        @keyup.enter="handleSearch">
+        @keypress.enter.prevent="handleSearch">
       <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
     </div>
-    <div class="van-search__cancel" v-show="type !== 'showcase' && isFocus" @click="handleBack">取消</div>
+    <div class="van-search__action" v-if="showAction">
+      <slot name="action">
+        <p class="van-search__action-text" @click="handleBack">取消</p>
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -32,21 +37,19 @@ export default {
 
   props: {
     placeholder: String,
-    type: {
+    value: String,
+    showAction: {
+      type: Boolean,
+      default: false
+    },
+    background: {
       type: String,
-      default: 'normal'
-    }
-  },
-
-  watch: {
-    value(val) {
-      this.$emit('change', val);
+      default: '#f2f2f2'
     }
   },
 
   data() {
     return {
-      value: '',
       focusStatus: false,
       isFocus: false
     };
@@ -71,29 +74,38 @@ export default {
       this.isFocus = true;
     },
 
+    handleInput(event) {
+      this.$emit('input', event.target.value);
+    },
+
     /**
-     * 点击close后清空vlaue后，再聚焦input框
+     * 点击close后清空value后，再聚焦input框
      */
     handleClean() {
-      this.value = '';
+      this.$emit('input', '');
       this.focusStatus = true;
+
+      // 保证多次点击 clean 后，仍能触发 refocus
+      this.$nextTick(() => {
+        this.focusStatus = false;
+      });
     },
 
     /**
      * 点击取消后，清空所有回复最初状态
      */
     handleBack() {
-      this.value = '';
-      this.focusStatus = false;
-      this.isFocus = false;
+      this.$emit('input', '');
       this.$emit('cancel');
     },
 
     /**
      * input输入回车后，发送回调
      */
-    handleSearch() {
-      this.$emit('search', this.value);
+    handleSearch(e) {
+      e.preventDefault();
+      this.$emit('search');
+      return false;
     },
 
     handleClickoutside() {

packages/vant-css/src/search.css

@@ -1,26 +1,19 @@
 @import './common/var.css';
 
 .van-search {
-  position: relative;
+  display: flex;
+  align-items: center;
   box-sizing: border-box;
   padding: 4px 15px;
-  background-color: #F2F2F2;
 
-  &--focus {
-    padding-right: 50px;
-  }
-
-  &--showcase {
-    padding: 10px;
-    background-color: $background-color;
-
-    .van-search__input-wrap {
-      border-color: $gray-light;
-    }
+  &--show-action {
+    padding-right: 0;
   }
 
   &__input-wrap {
     position: relative;
+    flex: 1;
+    height: 16px;
     padding: 8px 24px 8px 35px;
     border: 1px solid $gray-light;
     border-radius: 4px;
@@ -49,13 +42,14 @@
     }
   }
 
-  &__cancel {
-    position: absolute;
+  &__action {
     line-height: 34px;
-    padding: 4px 0;
-    top: 0;
-    right: 10px;
     font-size: 14px;
+    letter-spacing: 1px;
+  }
+
+  &__action-text {
+    padding: 0 10px;
     color: $green;
   }
 
@@ -73,9 +67,11 @@
     font-size: 14px;
     line-height: 16px;
     position: absolute;
-    right: 5px;
+    right: 0;
     top: 50%;
     transform: translateY(-50%);
+    /* 增加 clear 点击区域 */
+    padding: 5px;
     color: #888;
   }
 }