lm-picker

    1.0.2 • Public • Published

    picker

    • 作者:quying
    • 邮箱:qy9404@163.com
    • 版本:1.0.1

    介绍

    react picker component

    安装

    lm-* 组件使用 npm 进行管理,命名空间统一为 lm-,请使用以下命令进行组件安装。

    npm i lm-picker --save
    
    • 如果你还没有安装 npm,可通过以下方式进行 安装
    • 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

    使用

    样例文档

    • 待开发

    使用

    最少配置参数为:

    • 插入Picker 子元素增加内容
    <MultiPicker
      selectedValue={this.state.value}
      onValueChange={this.onChange}
    >
      <Picker>
        <div value="1">one</div>
        <div value="2">two</div>
        <div value="3">three</div>
        <div value="4">four</div>
        <div value="5">five</div>
        <div value="6">six</div>
        <div value="7">seven</div>
        <div value="8">eight</div>
      </Picker>
      <Picker>
        <div value="11">eleven</div>
        <div value="12">twelve</div>
        <div value="13">thirteen</div>
        <div value="14">fourteen</div>
        <div value="15">fifteen</div>
        <div value="16">sixteen</div>
        <div value="17">seventeen</div>
        <div value="18">eighteen</div>
      </Picker>
    </MultiPicker>
     

    Cascader

    const data = [
      {
        label: '北京',
        value: '01',
        children: [
          {
            label: '东城区',
            value: '01-1',
          },
          {
            label: '西城区',
            value: '01-2',
          },
          {
            label: '崇文区',
            value: '01-3',
          },
          {
            label: '宣武区',
            value: '01-4',
          },
        ],
      },
      {
        label: '浙江',
        value: '02',
        children: [
          {
            label: '杭州',
            value: '02-1',
            children: [
              {
                label: '西湖区',
                value: '02-1-1',
              },
              {
                label: '上城区',
                value: '02-1-2',
              },
              {
                label: '江干区',
                value: '02-1-3',
              },
              {
                label: '下城区',
                value: '02-1-4',
              },
            ],
          },
          {
            label: '宁波',
            value: '02-2',
            children: [
              {
                label: 'xx区',
                value: '02-2-1',
              },
              {
                label: 'yy区',
                value: '02-2-2',
              },
            ],
          },
          {
            label: '温州',
            value: '02-3',
          },
          {
            label: '嘉兴',
            value: '02-4',
          },
          {
            label: '湖州',
            value: '02-5',
          },
          {
            label: '绍兴',
            value: '02-6',
          },
        ],
      },
    ];
    <Cascader 
        cols={ COL }
        value={ this.state.value }
        data={ globalData } 
        onChange={ this.onChange } />

    配置参数

    Picker

    Prop Type Default Description
    selectedValue string/number 0 选中项的key值
    disabled bool false 是否可选
    onValueChange function undefined 选中项改变的回调函数
    selectedClassName string undefined 选中项的样式类名

    MultiPicker

    Prop Type Default Description
    selectedValue array [] 选中项的key值合集
    disabled bool false 是否可选
    onValueChange function undefined 选中项改变的回调函数

    Cascader

    Prop Type Default Description
    col number 3 列数
    value array [] 选中项的key值合集
    disabled bool false 是否可选
    data array undefined 数据集合
    onChange function undefined 选中项改变的回调函数

    注意事项

    • 组件注意事项

    开发调试

    进入项目目录后,使用 node 命令启动服务

    npm run start
    

    打包发布可通过 node 命令执行

    npm run build
    npm publish
    

    相关资料

    Changelog

    0.1.0

    1. init

    0.1.1

    修改package.json dependencies

    0.1.4

    • move lm-popup to devDependencies in package.json
    • update lm-popup
    • optimize demo

    0.1.5

    • fix the flash of mask gradient

    0.2.0

    • upgrade to react 16

    1.0.0

    • update css

    1.0.1

    • upgrade README

    1.0.2

    • upgrade css

    Install

    npm i lm-picker

    DownloadsWeekly Downloads

    11

    Version

    1.0.2

    License

    none

    Unpacked Size

    47.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • davidfeng
    • lizhenjiang01
    • yingq