Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callmesoul/wepy-match-input
微信小程序 wepyjs 第三方 动态匹配输入框插件
https://github.com/callmesoul/wepy-match-input
Last synced: about 2 months ago
JSON representation
微信小程序 wepyjs 第三方 动态匹配输入框插件
- Host: GitHub
- URL: https://github.com/callmesoul/wepy-match-input
- Owner: callmesoul
- License: mit
- Created: 2018-04-03T01:33:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-25T03:15:56.000Z (over 6 years ago)
- Last Synced: 2024-07-27T14:33:58.476Z (6 months ago)
- Language: CSS
- Size: 13.7 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-wepy - wepy-match-input:微信小程序 wepyjs 第三方 动态匹配输入框插件
README
# 微信小程序 wepyjs 第三方 动态匹配输入框插件
### 效果:
![mark](http://oyz3pjs26.bkt.clouddn.com/blog/180403/3h49h28LjA.gif)## 使用
### 安装组件
```
npm install wepy-match-input --save
```### 引入组件
```javascript
import wepy from 'wepy';
import wepyMatchInput from 'wepy-match-input';export default class Index extends wepy.page {
data={
inputPrams:{
matchList:[],
keyWord:'',
keyName:'bookName',
placeholder:"请填写书名"
},
}
components = {
nices
};
onLoad(){
}
events={
wepyMatchInputTapCallBack(data,index){
},
wepyMatchInputFocusCallBack(value){
},
wepyMatchInputChangeCallBack(value){
},
wepyMatchInputBlurCallBack(value){
},
wepyMatchInputConfirmCallBack(value){
}
}
}
```
---------------------------------------
# 字段/Attr
| 字段 | 描述 | 必填 | 类型 | 默认 |
| :------------------------------------: | :----------------------: | :--: | ------ | :---------------------------: |
| params.keyWord | 当前输入框值 | 是 | string | '' |
| params.keyName | 匹配列表输出的字段 | 否 | string | name |
| params.matchList | 匹配列表 | 是 | array | [] |
| params.placeholder | input框的placeholder | 否 | string | '' |
| params.tapMatchListItemCallBackFunName | 点击匹配列表项回调方法名 | 否 | string | wepyMatchInputTapCallBack |
| params.tapInputFocusCallBackFunName | input focus方法回调名 | 否 | string | wepyMatchInputFocusCallBack |
| params.tapInputChangeCallBackFunName | input change方法回调名 | 否 | string | tapInputChangeCallBackFunName |
| params.tapInputBlurCallBackFunName | input blur 方法回调名 | 否 | string | wepyMatchInputBlurCallBack |
| params.tapInputConfirmCallBackFunName | input confirm方法回调名 | 否 | string | wepyMatchInputConfirmCallBack |# 方法/methods
- 一下方法请放在父级events对象调用。
- 有传方法名的对应方法名,没有传使用的默认方法名。(主要考虑到一个页面有多个时需要自定义以免冲突)
- 以下以默认方法名为例
- | 方法名 | 描述 | 参数 |
| :---------------------------: | :-------------------: | :-------------------------: |
| wepyMatchInputTapCallBack | 点击匹配列表项回调 | (当前项对象,当前项index) |
| wepyMatchInputFocusCallBack | input focus方法回调 | (当前输入框值) |
| tapInputChangeCallBackFunName | input change方法回调 | (当前输入框值) |
| wepyMatchInputBlurCallBack | input blur 方法回调 | (当前输入框值) |
| wepyMatchInputConfirmCallBack | input confirm方法回调 | (当前输入框值) |
## changelog
| 版本/时间 | 说明 |
| -------------- | ----------------------------------------- |
| 0.0.1/20180402 | 初始化 |
| 0.0.2/20180403 | 添加params.disabled字段控制表单的disabled |
| 0.0.4/20180425 | 修复组件触发清空`matchList`与触发回调方法的顺序 |
[本人博客:callmesoul.cn](http://callmesoul.cn)
![toast](http://nowechat.oss-cn-shenzhen.aliyuncs.com/qrcode_for_gh_b4c00b84720c_258.jpg)