类似IOS样式的Picker组件

安装

npm install easy-react-mobile-picker -S

依赖

swiper v4.3.5

使用时需要在html中引入<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

代码仓库

easy-react-mobile-picker

使用

import Picker from "easy-react-mobile-picker";

<Picker visible={visible} cascader slides={areaData} confirm={this.valChange} cancel={e => this.togglePicker(false)} />
<Picker visible={!visible} slides={date} confirm={this.valChange} cancel={e => this.togglePicker(true)} />

Props

| Property name | Type | Default | Description | ---|:--:|:--:|--- | visible | Boolean | false | 组件是否可见 | | cascader | Boolean | false | 是否启用多级联动 | | slides | Array | N/A | Picker组件值数组 | | confirm | Function | N/A | 确认按钮点击事件 confirm={val => console.log("当前picker的值：", val)} | | cancel | Function | N/A | 取消按钮点击事件（需要把visible指定的变量修改为false） cancel={e => this.setState({ visible: false })} | | title | String/ReactComponent | N/A | Picker组件标题（支持react组件） title={<span style={{color: "#004DBB"}}>无联动时间选择} or title={"标题啊"} | | defaultValue | Array | N/A | 默认值 默认值为数组，分别对应第一列到最后一列需要默认选中的值，默认值对应slide中的vlaue字段的值 defaultValue={[0, 2, 1]} | | className | String | N/A | 自定义class样式 |

Props附加描述

/* 数据结构 */
let slide = {
    "name": "name", // picker组件展示文本
    "value": "value", // picker组件实际值
};

let slides = [
    [slide, ...],
    [slide, ...],
    ...
];
/* End 数据结构 */


/* 多级联动数据结构 */
let slide = {
    "name": "name", // picker组件展示文本
    "value": "value", // picker组件实际值
};

let slides = {"name": "name", "value": "value", "children": [slide, ...]};
/* End 多级联动数据结构 */

demo

/example/main.js

额外

省市区级联数据可以配套使用 picker-china-area-data

import { areaData } from "picker-china-area-data";

<Picker visible={true} cascader slides={areaData} confirm={this.valChange} cancel={e => this.togglePicker(false)} />