wpy框架下封装一个简单小程序搜索组件

示例代码：

  <!-- 搜索组件 -->
  <search  :placeholder="placeholder"       
           :inputValue="inputValue" 
           @search.user="search" 
           @disSearch.user="disSearch">
  </search>

注：

• 1，输入的值被搜索组件收集之后，通过:inputValue传递给页面，页面可以在data中声明一个属性进行搜集，
• 2，输入值之后键盘在拉起状态下右下角的按钮被设置成了搜索，此时组件的搜索事件通过 @search.user暴露出来供使用者绑定自己的方法
• 3，搜索结束后为了组件内清空输入框并把页面状态返回原来的状态，此时使用@disSearch.user方法进行触发
• 4，叉号icon的出现和隐藏是通过在组件内判断:inputValue是否为空来进行触发
• 5,两个String属性需要在data中声明才能使用并更改，两个方法必须写在methods

搜索组件源码：

<style lang="less">
    .search1 {
        display: flex;
        flex-direction: row;
        margin: 20rpx;
        .search_arr1 {
            border: 1px solid #ffffff;
            border-radius: 50rpx;
            display: flex;
            flex-direction: row;
            width: 900rpx;
            background-color: #ffffff;
            .searchcion1 {
                margin: 10rpx 15rpx 10rpx 15rpx;
                left: 25rpx;
                z-index: 2;
                width: 20px;
                height: 20px;
                text-align: center;
            }
            .searchcion2 {
                margin: 10rpx 15rpx 10rpx 15rpx;
                z-index: 2;
                width: 20px;
                height: 20px;
                text-align: center;
            }
            .inputBox1 {
                padding-top: 7rpx;
                width: 550rpx;
            }
        }
    }
</style>

<template>
    <!-- 搜索 -->
    <view class="search1">
        <view class="search_arr1">
            <icon class="searchcion1" size='20' type='search'></icon>
            <input class="inputBox1" confirm-type="search" bindinput="bindKeyInput" bindconfirm="search" placeholder="{{placeholder}}" value="{{inputValue}}" />
            <icon class="searchcion2" size='20' type='clear' wx:if="{{inputValue}}" bind:tap="disSearch"></icon>
        </view>
    </view>
</template>

<script>
    import wepy from 'wepy'
    export default class Search extends wepy.component {
      config = {
        'component': true, // 自定义组件声明
        'usingComponents': {} // 可选项，用于引用别的组件
      };
      props = {
            // 静态传值
        placeholder: {
          type: String,
          default: '输入需要搜索的内容'
        },
            // 子向父单向动态传值
        inputValue: {
          type: String,
          default: '',
          twoWay: true
        }
      };
      data = {
        inputValue: ''
            // 搜索输入框的值
      }
      methods = {
            // 搜索输入框
        bindKeyInput(e) {
          this.inputValue = e.detail.value
        },
            // 键盘搜索按钮绑定的方法
        search() {
          this.$emit('search')
          this.$apply()
        },
            // 点击clear清除搜索框内容并拿到原来页面数据
        disSearch() {
          this.inputValue = ''
          this.$emit('disSearch')
          this.$apply()
        }
      }
    }
</script>