| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| :placeholder | String | 输入需要搜索的内容 | 输入框为空时占位符 |
| :inputValue | String | 输入框中的客户输入的内容 | |
| @search.user | EventHandle | 点击输入框 输入后 调出的键盘右下角搜索按钮触发 | |
| @disSearch.user | EventHandle | 搜索结束后点击输入框中的叉号icon触发清空搜索框 |
示例代码：
<!-- 搜索组件 -->
<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>
