[improvement]: search组件支持插槽功能 (#396)

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
+    })
   }
 });

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>

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;
+}

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
 
 #### 参数

packages/search/index.js

@@ -1,5 +1,8 @@
 Component({
   externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  options: {
+    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+  },
   properties: {
     cancelText: {
       type: String,

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;

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 }}"