From de483916dae5eb1462fb13171ec31567996d5256 Mon Sep 17 00:00:00 2001
From: nrz <jerryni2014@gmail.com>
Date: Tue, 31 Jul 2018 17:59:51 +0800
Subject: [PATCH] =?UTF-8?q?[improvement]:=20search=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=8F=92=E6=A7=BD=E5=8A=9F=E8=83=BD=20(#396)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/pages/search/index.js   | 10 +++++++++-
 example/pages/search/index.wxml | 33 +++++++++++++++++++++++++--------
 example/pages/search/index.wxss | 27 +++++++++++++++++++++++++++
 packages/search/README.md       | 22 ++++++++++++++++++++++
 packages/search/index.js        |  3 +++
 packages/search/index.pcss      | 27 ---------------------------
 packages/search/index.wxml      |  1 +
 7 files changed, 87 insertions(+), 36 deletions(-)

diff --git a/example/pages/search/index.js b/example/pages/search/index.js
index 238d25b0..700bed9e 100644
--- a/example/pages/search/index.js
+++ b/example/pages/search/index.js
@@ -1,7 +1,9 @@
 Page({
   data: {
     inputValue: '',
-    focus: true
+    focus: true,
+    range: ['门店', '配送至'],
+    rangeIndex: 0
   },
 
   searchChange(e) {
@@ -16,5 +18,11 @@ Page({
 
   handleCancel() {
     console.error('cancel')
+  },
+
+  pickerChange(e) {
+    this.setData({
+      rangeIndex: e.detail.value
+    })
   }
 });
diff --git a/example/pages/search/index.wxml b/example/pages/search/index.wxml
index 995a2160..1abba063 100644
--- a/example/pages/search/index.wxml
+++ b/example/pages/search/index.wxml
@@ -2,10 +2,8 @@
 
   <zan-panel title='基本用法'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       bindchange="searchChange"
       bindsearch="searchDone"
@@ -14,21 +12,17 @@
 
   <zan-panel title='不可用'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       disabled="{{ true }}"
-      placeholder="搜索商品"
     />
   </zan-panel>
 
   <zan-panel title='自定义样式'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       searchStyle="height: 88rpx; padding: 0 30rpx; background: {{ searchbg || '#F2F2F2' }};"
       inputStyle="height: 56rpx; border-radius: 8rpx;"
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       bindchange="searchChange"
       bindsearch="searchDone"
@@ -37,10 +31,8 @@
 
   <zan-panel title='取消按钮'>
     <zan-search
-      alignLeft="{{ true }}"
       placeholder="搜索..."
       keyword="{{ inputValue }}"
-      placeholder="搜索商品"
       focus="{{ focus }}"
       useCancel="{{ true }}"
       bindchange="searchChange"
@@ -48,4 +40,29 @@
       bindcancel="handleCancel"
     />
   </zan-panel>
+
+  <zan-panel title="高级用法 自定义input插槽">
+    <zan-search
+      placeholder="搜索..."
+      keyword="{{ inputValue }}"
+      focus="{{ focus }}"
+      useCancel="{{ true }}"
+      bindchange="searchChange"
+      bindsearch="searchDone"
+      bindcancel="handleCancel"
+    >
+      <picker
+        slot="input"
+        mode="selector"
+        class="zan-search__selector"
+        bindchange="pickerChange"
+        style="width: 60px"
+        range="{{ range }}"
+        value="{{ rangeIndex }}"
+        wx:if="{{ range.length > 0}}"
+      >
+        <view class="picker">{{ range[rangeIndex] }}</view>
+      </picker>
+    </zan-search>
+  </zan-panel>
 </doc-page>
diff --git a/example/pages/search/index.wxss b/example/pages/search/index.wxss
index e69de29b..77eea99c 100644
--- a/example/pages/search/index.wxss
+++ b/example/pages/search/index.wxss
@@ -0,0 +1,27 @@
+picker {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: 20rpx;
+}
+
+.picker {
+  position: relative;
+  width: 110rpx;
+  height: 100%;
+  color: #666;
+  font-size: 28rpx;
+  margin-left: 20rpx;
+}
+.picker::after {
+  content: '';
+  width: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -6rpx;
+  border-top: 12rpx solid #333;
+  border-right: 8rpx solid transparent;
+  border-left: 8rpx solid transparent;
+}
diff --git a/packages/search/README.md b/packages/search/README.md
index 232266ff..8e284229 100644
--- a/packages/search/README.md
+++ b/packages/search/README.md
@@ -39,6 +39,28 @@ searchDone(e) {
 }
 ```
 
+### 使用slot
+
+```js
+<zan-search
+  placeholder="搜索..."
+  useCancel
+>
+  <picker
+    slot="input"
+    mode="selector"
+    range="{{ range }}"
+    value="{{ rangeIndex }}"
+    bindchange="pickerChange"
+    class="zan-search__selector"
+    style="width: 60px"
+    wx:if="{{ range.length > 0}}"
+  >
+    <view class="picker">{{ range[rangeIndex] }}</view>
+  </picker>
+</zan-search>
+```
+
 ### API
 
 #### 参数
diff --git a/packages/search/index.js b/packages/search/index.js
index 42e1a1b7..5a4711ef 100644
--- a/packages/search/index.js
+++ b/packages/search/index.js
@@ -1,5 +1,8 @@
 Component({
   externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
   properties: {
     cancelText: {
       type: String,
diff --git a/packages/search/index.pcss b/packages/search/index.pcss
index be84d2b7..45af5121 100644
--- a/packages/search/index.pcss
+++ b/packages/search/index.pcss
@@ -32,33 +32,6 @@
   align-items: center;
 }
 
-.zan-search picker {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding-right: 20rpx;
-}
-
-.zan-search__form .picker {
-  position: relative;
-  width: 110rpx;
-  height: 100%;
-  color: #666;
-  font-size: 28rpx;
-  margin-left: 20rpx;
-}
-.zan-search__form .picker::after {
-  content: '';
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-top: -6rpx;
-  border-top: 12rpx solid #333;
-  border-right: 8rpx solid transparent;
-  border-left: 8rpx solid transparent;
-}
 .zan-search__form input {
   height: 100%;
   flex: 1;
diff --git a/packages/search/index.wxml b/packages/search/index.wxml
index 1eeafd04..4fb3f01e 100644
--- a/packages/search/index.wxml
+++ b/packages/search/index.wxml
@@ -7,6 +7,7 @@
     style="{{ inputStyle }}"
   >
     <icon type="search" size="15" color="#a9a9a9" />
+    <slot name="input"></slot>
     <input
       class="zan-search__input"
       placeholder="{{ placeholder }}"