一款操作简单的列表选择器，支持单列、多列，

vue-picker-mobile

一款操作简单的移动端列表选择器，支持单列、多列，联动、非联动，配有详细的Demo

DEMO examples 单列 -------------默认值----------VS----:height="40" :className="redColor"

两列 -------------非联动----------VS-----------联动-------------

多列 -------------非联动----------VS-----------联动-------------VS-----------时间列表-----------

Installation NPM

Install the package

npm install vue-picker-mobile --save

import VuePickerMobile from 'vue-picker-mobile' Vue.use(VuePickerMobile)

<VuePickerMobile/>

Props/Options list Type: Array Default: []

列表的数据源,不同类型的数据操作略有差别，使用时请参考github

单列（包含两种数据格式） 两列非联动（包含两种数据格式） 两列联动 多列非联动（包含两种数据格式） 多列联动 日期

注：为方便使用，修改了非联动模式的数据传递方式，如单列可传：['小学', '初中', '高中', '本科', '硕士', '博士'] (版本号 > 0.1.84)

isShow Type: Boolean Default: false

是否展示下拉列表

defaultValue(非必填) Type: [String, Number, Array] Default: `` 列表的默认滚动位置 不传默认值时，列表默认值均为第一项 支持字符串或者数组 单列时字符串数组均可，多列时以下设置均可: '3'、['3']、['3', 'C']、['3', 'C', 'B']、['3', 'C', 'B', 'A'] 当默认值个数小于列数时，没有默认值的列第一项为默认值 当默认值没匹配到列表值并且为数字时，认为该数字为当前列表的索引，其索引指向值为默认值

注：默认值是和{label:'一年级',value:'grade1'} 中的value一致的

isMulti(非必填) Type: Boolean Default: false

列表是单列还是多列

isRelate(非必填) Type: Boolean Default: false

列表是否联动，数据源是否有包含关系

height(非必填) Type: Number Default: 34

定义每一行的宽度 默认值为34px

className(非必填) Type: String Default: ``

会动态每一行上添加一个自定义类名，来进行字体格式等的修改

Events onChange(res)

当数据有变动时，均会触发该事件，res为[{}...{}],可根据自身需要获取展示结果，本demo中展示位

onChange(res){ let r = []; res.map(i => {r.push(i.label)}); this.result = r.join('-'); console.log('app-----res-----:', r.join('-')); } Update 0.1.99

添加examples

0.1.94

修改文件目录，规范发布方式

0.1.85

修改数据源格式的限制，之前数据源格式固定，如单列为：

export const single_label_value = [ { label: '小学', value: 0, }, { label: '初中', // disabled: true, value: 1, }, { label: '高中', // disabled: true, value: 2, }, { label: '本科', value: 3, }, { label: '硕士', value: 4, }, { label: '博士', value: 5, }];

此时存在一一映射的value,但是很多时候我们的label和value是一致的，所以本次扩展以下格式:

export const single_only_value = ['小学', '初中', '高中', '本科', '硕士', '博士'];

上面的两种数据格式，除了返回的value不同，其他都一样。需要注意的是

本次修改只是对非联动的数据进行扩展，联动数据还使用原有格式 请按照以上数据源的格式进行数据处理，否则会发生错误 0.1.83

修改对默认值的限制，之前默认值是必传的，现在默认值可传多种格式

不管多少列，如果没有默认值则默认第一项 如果有默认值，但是默认值个数少于列数，则缺失的默认值自动默认为第一项 默认值单个时可以为字符串，多于一个请设置为数组 0.1.81

修改npmjs主页说明，以及图片显示不出来的问题

0.1.8

添加props: height className

height可自定义列表的高度 className 可从外部动态为每一列添加一个自定义类名 感谢

如果使用过程中有什么bug，非常感谢您能提出来，以便我能快速修复