From cfe9ebaf86390247b836e3d41bdc84ff3ee93462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= <cookfront@gmail.com>
Date: Fri, 9 Jun 2017 14:52:08 +0800
Subject: [PATCH] =?UTF-8?q?Search=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BE=AE=E6=9D=82=E5=BF=97=E6=A0=B7=E5=BC=8F=20(#38)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* search component add new style
---
 docs/examples-docs/search.md     | 11 ++++++++-
 packages/search/src/search.vue   | 20 ++++++++++++---
 packages/vant-css/src/search.css |  9 +++++++
 src/utils/clickoutside.js        | 42 ++++++++++++++++++++++++++++++++
 test/unit/specs/search.spec.js   | 21 ++++++++++++++++
 5 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/clickoutside.js

diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md
index 342e6c44a..241312784 100644
--- a/docs/examples-docs/search.md
+++ b/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
 
diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue
index 398a89ff4..1fa344e14 100644
--- a/packages/search/src/search.vue
+++ b/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;
       }
     }
   };
diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css
index 2d3a8ed1b..c8796ce52 100644
--- a/packages/vant-css/src/search.css
+++ b/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;
diff --git a/src/utils/clickoutside.js b/src/utils/clickoutside.js
new file mode 100644
index 000000000..db5e6a871
--- /dev/null
+++ b/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
+    });
+  }
+};
diff --git a/test/unit/specs/search.spec.js b/test/unit/specs/search.spec.js
index 4a4103eb5..bdc9eac05 100644
--- a/test/unit/specs/search.spec.js
+++ b/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;
+  });
 });