[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() {