0.0.7 • Published 6 years ago
wox-gtour-autocomplete v0.0.7
团队游后台 模糊搜索 组件
API
| 属性 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| urlFn | 根据用户输入拼接URL函数 | Function(value) | 是 | |
| initData | 初始传入数据 | Array | {key:xxx, label: xxx}形式 | 是 |
| keyName | 返回数据的key值 | String | 用户选择数据后{keyName: data}以这种形式返回选择的数据 | 是 |
| disabled | 是否只读 | Boolean | false | 否 |
| singleType | 是否单选模式 | Boolean | false | 否 |
| callback | 用户选择数据后回调函数 | Function({keyName: value}) | 否 | |
| formatDataFn | 格式化获取数据函数 | Function | 必须返回{key:xxx, label: xxx}格式数据 | 否 |
| formatLabelFn | 格式化展示数据函数 | Function | 返回{key:xxx, label: xxx}格式数据 | 否 |
install
$ npm install wox-gtour-autocompleteuse
import WoxGtourAutoComplete from 'wox-gtour-autocomplete';
<WoxGtourAutoComplete
url={(v)=>`url?key=${v}`}
callback={this.props.callback}
initData={this.props.data.startLocationInfos}
keyName='keyName'
// singleType={true}
// disabled={true}
formatDataFn={(val)=>val.map(v=>({key: v.id, label: v.name}))}
formatLabelFn={(val)=>val.map(v=>({key: v.id, label: `【${v.id}】v.name`}))}
style={{width: 400}}
/>