UNPKG

lm-carpicker

Version:

* 作者:liuduan * 邮箱:liuduan.05.05@163.com * 版本:**`0.3.5`**

136 lines (92 loc) 3.47 kB
# 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 ---