Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。

合理的默认选项能让用户减少操作次数，提升效率。

选项的排列顺序要依据当前上下文情景而定，例如衣服尺码按从小到大的顺序排列，而不是根据衣服尺码的首字母在字母表的顺序排列。

滚轮选择器控制在五列以内。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在五列以内。

使用相对概念增强感知。比起绝对的“某年某月日”，用“今天”、“昨天”等相对概念，能更快的激发人对时间的感知。

如果选项非常多，而且选项本身比较复杂难理解需要辅助的解释，建议用容纳更多的选项的其他形式，例如日历或者新页面。

安装

import { Picker } from 'vux'

export default {

components: {

Picker

}

}

// 在入口文件全局引入

import Vue from 'vue'

import { Picker } from 'vux'

Vue.component('picker', Picker)

请确保列表项的value值是字符串，使用数字会出错。

如果你的业务接口返回数字值为数字，需要你先处理成字符串；同样，获取到值时为字符串，你需要自己转换成数字。

非联动情况下，列表数据格式示例：

// data

[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']]

// 或者使用 name => value 的形式

[[{

name: '2019届5班',

value: '1'

}, {

name: '2019届4班',

value: '2'

}]]

// value

['小米', '小米1']

联动时，列表数据格式示例：

// data

[{

name: '中国',

value: 'china',

parent: '0' // 为一级时可以不写 parent，但是此时允许为数字 0、空字符串或者字符串 '0'

}, {

name: '美国',

value: 'USA',

parent: '0'

}, {

name: '广东',

value: 'china001',

parent: 'china'

}, {

name: '广西',

value: 'china002',

parent: 'china'

}, {

name: '美国001',

value: 'usa001',

parent: 'USA'

}, {

name: '美国002',

value: 'usa002',

parent: 'USA'

}, {

name: '广州',

value: 'gz',

parent: 'china001'

}, {

name: '深圳',

value: 'sz',

parent: 'china001'

}, {

name: '广西001',

value: 'gx001',

parent: 'china002'

}, {

name: '广西002',

value: 'gx002',

parent: 'china002'

}, {

name: '美国001_001',

value: '0003',

parent: 'usa001'

}, {

name: '美国001_002',

value: '0004',

parent: 'usa001'

}, {

name: '美国002_001',

value: '0005',

parent: 'usa002'

}, {

name: '美国002_002',

value: '0006',

parent: 'usa002'

}]

属性

名字

类型

默认值

说明

版本要求

value

array

表单值，使用 v-model 绑定

—

data

array

选项列表数据

—

columns

number

指定联动模式下的列数，当不指定时表示非联动

—

fixed-columns

number

指定显示多少列，隐藏多余的

—

column-width

array

定义每一列宽度，只需要定义除最后一列宽度，最后一列自动宽度， 比如对于3列选择，可以这样：[1/2, 1/5]

v2.2.0

事件

名字

参数

说明

版本要求

@on-change

(value)

选择值变化时触发

—

方法

名字

参数

说明

版本要求

getNameValues

根据 value 获取字面值

v2.3.1