Search组件新增微杂志样式 (#38)

* search component add new style

docs/examples-docs/search.md

@@ -69,6 +69,14 @@ export default {
 ```
 :::
 
+#### 微杂志页搜索样式
+
+:::demo 基础用法
+```html
+<van-search placeholder="搜索商品" type="showcase"></van-search>
+```
+:::
+
 #### 监听对应事件
 
 除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
@@ -97,9 +105,10 @@ export default {
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须       |
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | placeholder | `input`的`placeholder`文案 | `string`  |           |     |
+| type | 搜索样式类型 | `string`  |     `normal`      |  `normal`：普通样式，`showcase`：微杂志页样式   |
 
 ### Event
 

packages/search/src/search.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="van-search" :class="{ 'van-search--focus' : isFocus }">
+  <div
+    class="van-search"
+    v-clickoutside="handleClickoutside"
+    :class="{ 'van-search--focus': isFocus, 'van-search--showcase': type === 'showcase' }">
     <div class="van-search__input-wrap">
       <van-icon name="search"></van-icon>
       <input
@@ -12,12 +15,13 @@
         @keyup.enter="handleSearch">
       <van-icon name="clear" @click="handleClean" v-show="isFocus"></van-icon>
     </div>
-    <div class="van-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
+    <div class="van-search__cancel" v-show="type !== 'showcase' && isFocus" @click="handleBack">取消</div>
   </div>
 </template>
 
 <script>
   import VanIcon from 'packages/icon';
+  import Clickoutside from 'src/utils/clickoutside';
 
   export default {
     name: 'van-search',
@@ -27,7 +31,11 @@
     },
 
     props: {
-      placeholder: String
+      placeholder: String,
+      type: {
+        type: String,
+        default: 'normal'
+      }
     },
 
     watch: {
@@ -45,6 +53,7 @@
     },
 
     directives: {
+      Clickoutside,
       refocus: {
         update: function(el, state) {
           if (state.value) {
@@ -85,6 +94,11 @@
        */
       handleSearch() {
         this.$emit('search', this.value);
+      },
+
+      handleClickoutside() {
+        this.isFocus = false;
+        this.focusStatus = false;
       }
     }
   };

packages/vant-css/src/search.css

@@ -12,6 +12,15 @@
       padding-right: 50px;
     }
 
+    @m showcase {
+      padding: 10px;
+      background-color: #f8f8f8;
+
+      .van-search__input-wrap {
+        border-color: $c-gray-light;
+      }
+    }
+
     @e input-wrap {
       position: relative;
       padding: 8px 24px 8px 35px;

src/utils/clickoutside.js

@@ -0,0 +1,42 @@
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-clickoutside="handleClose">
+ * ```
+ */
+const clickoutsideContext = '@@clickoutsideContext';
+
+export default {
+  bind(el, binding, vnode) {
+    const documentHandler = function(e) {
+      if (vnode.context && !el.contains(e.target)) {
+        vnode.context[el[clickoutsideContext].methodName]();
+      }
+    };
+    el[clickoutsideContext] = {
+      documentHandler,
+      methodName: binding.expression,
+      arg: binding.arg || 'click'
+    };
+    document.addEventListener(el[clickoutsideContext].arg, documentHandler);
+  },
+
+  update(el, binding) {
+    el[clickoutsideContext].methodName = binding.expression;
+  },
+
+  unbind(el) {
+    document.removeEventListener(
+      el[clickoutsideContext].arg,
+      el[clickoutsideContext].documentHandler);
+  },
+
+  install(Vue) {
+    Vue.directive('clickoutside', {
+      bind: this.bind,
+      unbind: this.unbind
+    });
+  }
+};

test/unit/specs/search.spec.js

@@ -92,4 +92,25 @@ describe('Search', () => {
       done();
     });
   });
+
+  it('create a showcase type search', () => {
+    wrapper = mount(Search, {
+      propsData: {
+        type: 'showcase'
+      }
+    });
+
+    expect(wrapper.hasClass('van-search')).to.be.true;
+    expect(wrapper.hasClass('van-search--showcase')).to.be.true;
+
+    const input = wrapper.find('.van-search__input')[0];
+    input.simulate('focus');
+
+    expect(wrapper.data().isFocus).to.be.true;
+
+    const body = document.body;
+    body.click();
+    expect(wrapper.data().isFocus).to.be.false;
+    expect(wrapper.data().focusStatus).to.be.false;
+  });
 });