lm-carpicker
Version:
* 作者:liuduan * 邮箱:liuduan.05.05@163.com * 版本:**`0.3.5`**
136 lines (92 loc) • 3.47 kB
Markdown
# carpicker
* 作者:liuduan
* 邮箱:liuduan.05.05@163.com
* 版本:**`0.3.5`**
## 介绍
_汽车品牌、车系、车型选择器_
---
## 安装
`lm-*` 组件使用 `npm` 进行管理,命名空间统一为 `lm-`,请使用以下命令进行组件安装。
```
npm i lm-carpicker --save
```
- 如果你还没有安装 `npm`,可通过以下方式进行 [安装](https://nodejs.org/en/download/)。
- 安装cnpm `npm install -g cnpm --registry=https://registry.npm.taobao.org`
---
## 使用
### 样例文档
- 待开发
### 使用
```javascript
<Carpicker
visible={visible}
label={label}
selected={selected}
data={data}
onSelect={this.onSelect}
onOk={this.onOk}
onDismiss={this.onDismiss} />
```
### 配置参数
| Prop | Type | Default | Description |
| ---- |:----:|:-------:| :----------:|
| **`className`** | `string[]` | `[]` | 自定义类名集合 |
| **`style`** | `object[]` | `[]` | 自定义属性集合 |
| **`id`** | `stirng[]` | `[]` | id集合 |
| **`refName`** | `stirng[]` | `[]` | ref集合,this.xxx调用,内部写法为`ref={el => this[refName[index]] = el}` |
| **`title`** | `stirng[]` | `['选择品牌', '车系', '车型']` | popup标题名 |
| **`rightText`** | `stirng[]` | `['取消', '取消', '取消']` | popup右边文字 |
| **`selected`** | `array` | `{}` | 选中值id map |
| **`label`** | `array` | `[]` | 选中值label map |
| **`disabled`** | `bool` | `false` | 禁用picker |
| **`visible`** | `bool` | `false` | 显示选框弹层 |
| **`onSelect`** | `function` | `(val, index) => {}` | 点选选框后的回调,用于异步数据请求 |
| **`onOk`** | `function` | `(val, label, index) => {}` | 点选最后一个picker中选框后的回调,返回所选selected集合 |
| **`onDismiss`** | `function` | `() => {}` | 点击取消时的回调,返回参数为index,标识第几个picker |
| **`data`** | `array[]` | `[[],[],[]]` | 数据集合,[[品牌数据],[车系数据], [车型数据]] |
| **`spellShow`** | `bool` | `true` | true:显示默认字母索引,false:不显示字母索引(包括自定义的) |
| **`backTopShow`** | `bool` | `true` | true:必要时显示返回到顶部按钮,false:永不显示 |
| **`renderList`** | `function` | `undefined` | 渲染是数据列表,参数:data: 列表数据,selected: 选中列表 value 值,handleClick: 点击列表事件,需要把 value / label 值 作为 回调传回,注意:选中列表 的样式 类名 应为 active |
| **`picker`** | `react element` | `undefined` | picker 组件 |
---
## 注意事项
- 组件注意事项
---
## 开发调试
进入项目目录后,使用 `node` 命令启动服务
```
npm run start
```
打包发布可通过 `node` 命令执行
```
npm run build
npm publish
```
---
## 相关资料
* [lm 组件开发规范](http://)
---
## Changelog
### 0.1.0
1. init
### 0.2.0
1. 版本升级,内部代码结构优化,暴露接口更新
### 0.2.1
1. 修复 onSelect 钩子函数 回调参数bug
### 0.2.2
1. 修复安卓手机兼容性问题
### 0.2.3
1. 添加自定义字母索引功能
### 0.2.4
1. 添加`spellShow`、`backTopShow`属性,控制字母索引、返回到顶部按钮显示
### 0.3.0
1. 升级至react16版本
---
### 0.3.2
1. 修复选中后点击不能显示在高亮位置bug
### 0.3.4
1. 简化类名
2. 增加 picker、renderList 属性,方便自定义组件
### 0.3.5
1. fix bug for potal
---