m-picker

模拟ios原生select的选择器
用户需要选择操作时，在手机下方弹出选择器

何时使用

分为 －单值选择器 －多值选择器： －需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 －从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

<Picker {...opt1} placeholder="picker 选择1" />

API

选择器容器<Picker>的属性说明如下：

| 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| | onOpen |打开选择器回调 |Function | noop | | onChange | 选择器的值改变的回调 | Function | noop | | onClose | 关闭选择器回调 | Function | noop | | toolbar | 是否显示toolbar | boolean | false | | toolbarTitle | toolbar的标题 | String或DOM | '' | | showSubmitBtn | 是否显示确认按钮| boolean | true | | showClearBtn | 是否显示清除按钮 | boolean | false | | formatValue | 格式化cols中values和displayValues的方法 | Function | noop | | cols | 配置选择器的部分属性 | Array<object> | {} | | cols[i].classNames | 选项列表的className | string | '' | | cols[i].textAlign | 选项列表的对齐方式，可选值有'left', 'right', 'center' | string | 'center' | | cols[i].values | 选项列表的值 | Array<string> | [] | | cols[i].displayValue | 选项列表的显示值（如果有的话） | Array<string> | undefined |

import { Input,Picker,FormItem } from '@ali/msui-react';
const opt1 = {
    cols: [{
        values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
    }]
}
ReactDOM.render(
    <div>
        <h4>单个值的picker</h4>
        <FormItem>
            <Picker {...opt1} placeholder="picker选择1" />
        </FormItem>
    </div>
, document.getElementById('container'));

通过设置toolbar和toolbarTitle来修改toolbar的显隐和文案。

通过设置showClearBtn和showSubmitBtn来控制确认和取消按钮的显隐。

import { Input,Picker,FormItem } from '@ali/msui-react';
const opt2 = {
    toolbar: true,
    toolbarTitle: '请选择设备',
    cols: [{
        textAlign: 'center',
        values: ['iPhone 4', 'iPhone 4S', ...., 'iPad mini 3'],
        displayValues: ['苹果4', '苹果4S', ...., '艾派mini3'],
        className: 'picker-items-col-normal'
    }],
    defaultValue: ['iPhone 5S']
}
ReactDOM.render(
    <div>
        <h3>显示toolbar的picker</h3>
        <FormItem>
            <Picker {...opt2} placeholder="picker 选择1" />
        </FormItem>
    </div>
, document.getElementById('container'));

多列选项的picker

import { Input,Picker,FormItem } from '@ali/msui-react';
const opt3 = {
    toolbar: true,
    toolbarTitle: '请选择姓名',
    showClearBtn: true,
    cols: [{
        values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
    },
    {
        values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby']
    },
    {
        values: ['先生', '小姐']
    }],
    defaultValue: ['孙', '燕姿', '小姐'],
    onClose: function() {
        console.log('closed')
    },
    onChange: function (picker, values, displayValues) {
        console.log(values, displayValues)
    }
}
  
ReactDOM.render(
    <div>
        <h3>多个值的picker</h3>
        <FormItem>
            <Picker {...opt3} placeholder="picker 选择2" />
        </FormItem>
    </div>
, document.getElementById('container'));