[new feature] Search: 新增搜索组件 (#321)

[new feature] Search: 新增搜索组件

doc.config.js

@@ -55,9 +55,10 @@ module.exports = {
         label: '表单',
         include: {
           field: require('./packages/field/README.md'),
-          switch: require('./packages/switch/README.md'),
+          search: require('./packages/search/README.md'),
           select: require('./packages/select/README.md'),
-          stepper: require('./packages/stepper/README.md')
+          stepper: require('./packages/stepper/README.md'),
+          switch: require('./packages/switch/README.md')
         }
       },
       {

example/app.json

@@ -19,6 +19,7 @@
     "pages/stepper/index",
     "pages/steps/index",
     "pages/switch/index",
+    "pages/search/index",
     "pages/tab/index",
     "pages/tag/index",
     "pages/toptips/index",

example/pages/dashboard/config.js

@@ -50,6 +50,9 @@ export default {
       }, {
         name: 'Switch 开关',
         path: '/pages/switch/index'
+      }, {
+        name: 'Search 搜索',
+        path: '/pages/search/index'
       }, {
         name: 'Tab 标签',
         path: '/pages/tab/index'

example/pages/search/index.js

@@ -0,0 +1,20 @@
+Page({
+  data: {
+    inputValue: '',
+    focus: true
+  },
+
+  searchChange(e) {
+    this.setData({
+      inputValue: e.detail.value
+    });
+  },
+
+  searchDone(e) {
+    console.error('search', e.detail.value)
+  },
+
+  handleCancel() {
+    console.error('cancel')
+  }
+});

example/pages/search/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationBarTitleText": "Search 搜索",
+  "usingComponents": {
+    "zan-icon": "../icon/index",
+    "zan-search": "../../dist/search/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
+  }
+}

example/pages/search/index.wxml

@@ -0,0 +1,51 @@
+<doc-page title="Search" without-padding>
+
+  <zan-panel title='基本用法'>
+    <zan-search
+      alignLeft="{{ true }}"
+      placeholder="搜索..."
+      keyword="{{ inputValue }}"
+      placeholder="搜索商品"
+      focus="{{ focus }}"
+      bindchange="searchChange"
+      bindsearch="searchDone"
+    />
+  </zan-panel>
+
+  <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"
+    />
+  </zan-panel>
+
+  <zan-panel title='取消按钮'>
+    <zan-search
+      alignLeft="{{ true }}"
+      placeholder="搜索..."
+      keyword="{{ inputValue }}"
+      placeholder="搜索商品"
+      focus="{{ focus }}"
+      useCancel="{{ true }}"
+      bindchange="searchChange"
+      bindsearch="searchDone"
+      bindcancel="handleCancel"
+    />
+  </zan-panel>
+</doc-page>

packages/search/README.md

@@ -0,0 +1,65 @@
+## Search 搜索
+
+### 使用指南
+在 index.json 中引入组件
+```json
+{
+  "usingComponents": {
+    "zan-search": "/packages/search/index"
+  }
+}
+```
+
+### 代码演示
+
+```wxml
+<zan-search
+  placeholder="搜索..."
+  keyword="{{ inputValue }}"
+  placeholder="搜索商品"
+  focus="{{ focus }}"
+  bindchange="searchChange"
+  bindsearch="searchDone"
+/>
+```
+
+```js
+data: {
+  inputValue: '',
+  focus: true
+},
+searchChange(e) {
+  this.setData({
+    inputValue: e.detail.value
+  });
+},
+
+searchDone(e) {
+  console.log('search', e.detail.value)
+}
+```
+
+### API
+
+#### 参数
+| 名称             | 类型        | 是否必须 | 默认  | 描述                                                |
+| ---------------- | ----------- | -------- | ----- | --------------------------------------------------- |
+| keyword          | String      | 否       | 无    | 默认搜索关键字                                      |
+| disabled         | Boolean     | 否       | false | 是否禁用                                          |
+| focus            | Boolean     | 否       | false | 是否获取焦点                                       |
+| useCancel        | Boolean     | 否       | false | 是否显示取消按钮                                    |
+| cancelText       | String      | 否       | 取消  | 取消按钮文字                                        |                          |
+| placeholder      | String      | 否       | 无    | 输入框占位字符串                                    |
+| cancelStyle      | String      | 否       | 无     | “取消”的样式                                      |
+| inputStyle       | String      | 否       | 无     | “输入框”的样式
+| searchStyle      | String      | 否       | 无     | “整个搜索”的样式
+
+#### 事件
+
+| 名称             | 类型        | 是否必须 | 默认  | 描述
+| ---------------- | ----------- | -------- | ----- | ------|
+| bindcancel       | EventHandle | 否       | 无    | 取消按钮点击时触发
+| bindsearch       | EventHandle | 否       | 无    | 键盘点击确认时触发
+| bindchange       | EventHandle | 否       | 无    | 内容改变时触发
+| bindblur       | EventHandle | 否       | 无    | 焦点丢失时触发
+| bindfocus       | EventHandle | 否       | 无    | 焦点聚焦时触发

packages/search/index.js

@@ -0,0 +1,67 @@
+Component({
+  externalClasses: ['search-class', 'input-class', 'cancel-class'],
+  properties: {
+    cancelText: {
+      type: String,
+      value: '取消'
+    },
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    focus: {
+      type: Boolean,
+      value: false
+    },
+    keyword: {
+      type: String,
+      value: ''
+    },
+    show: {
+      type: Array,
+      value: ['icon', 'cancel']
+    },
+    placeholder: {
+      type: String,
+      value: '请输入查询关键字',
+      observer(newVal) {
+        this.setData({
+          inputWidth: `${(newVal.length * 14) + 45}px`
+        });
+      }
+    },
+    useCancel: {
+      type: Boolean
+    },
+    searchStyle: String,
+    cancelStyle: String,
+    inputStyle: String,
+  },
+  data: {
+    inputWidth: 'auto'
+  },
+  methods: {
+    blur() {
+      this.triggerEvent('blur');
+    },
+    clearInput() {
+      this.setData({
+        focus: true
+      });
+      this.triggerEvent('change', { value: '' });
+    },
+    cancelSearch() {
+      this.triggerEvent('cancel');
+    },
+    focus() {
+      this.triggerEvent('focus');
+    },
+    inputChange(e) {
+      this._inputvalue = e.detail.value;
+      this.triggerEvent('change', { value: e.detail.value });
+    },
+    search(e) {
+      this.triggerEvent('search', { value: e.detail.value });
+    }
+  }
+});

packages/search/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/search/index.pcss

@@ -0,0 +1,89 @@
+.zan-search {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: transparent;
+  padding:5px 10px;
+}
+
+.zan-search.center-placeholder {
+  background: #ffffff;
+}
+
+.zan-search.center-placeholder .zan-search__form {
+  margin-left: 50%;
+  transform: translateX(-50%);
+  border: none;
+}
+
+.zan-search.zan-cell::after {
+  display: none;
+}
+
+.zan-search__form {
+  display: flex;
+  flex: 1;
+  background:#ffffff;
+  border-radius: 4rpx;
+  height: 64rpx;
+  line-height: 56rpx;
+  justify-content: space-between;
+  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;
+  padding: 0 20rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+.zan-search__form icon {
+  margin-left: 20rpx;
+  line-height: 1;
+}
+
+.zan-search__clear {
+  padding: 12rpx 20rpx;
+}
+
+.zan-search__placeholder {
+  font-size: 28rpx;
+  color: #cacaca;
+}
+.zan-search__cancel {
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  padding-left: 30rpx;
+  font-size: 28rpx;
+  color: #3388FF;
+}

packages/search/index.wxml

@@ -0,0 +1,40 @@
+<view
+  class="zan-search {{ searchClass }}"
+  style="{{ searchStyle }}"
+>
+  <view
+    class="zan-search__form {{ useCancel ? 'zan-search__form--cancel' : '' }} input-class"
+    style="{{ inputStyle }}"
+  >
+    <icon type="search" size="15" color="#a9a9a9" />
+    <input
+      class="zan-search__input"
+      placeholder="{{ placeholder }}"
+      placeholder-class="zan-search__placeholder"
+      confirm-type="search"
+      bindfocus="focus"
+      bindblur="blur"
+      value="{{ keyword }}"
+      bindconfirm="search"
+      bindinput="inputChange"
+      focus="{{ focus }}"
+      disabled="{{ disabled }}"
+    />
+    <icon
+      wx:if="{{keyword}}"
+      class="zan-search__clear"
+      type="clear"
+      size="14"
+      color="#bbb"
+      bindtap="clearInput"
+    />
+  </view>
+  <view
+    class="zan-search__cancel cancel-class"
+    wx:if="{{ useCancel }}"
+    bindtap="cancelSearch"
+    style="{{ cancelStyle }}"
+  >
+    {{cancelText || '取消'}}
+  </view>
+</view>