demo url demo source code edit document component source code

Picker是指提供多个选项集合供用户选择其中一项的控件。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'
}]

API

Props

name	type	default	description	required version
value	array		picker value, use `v-model` for binding	--
data	array		array list	--
columns	number		how many columns in chained-mode	--
fixed-columns	number		how many columns will show	--
column-width	array		custom width for each picker column, for example for a 3-column picker: [1/2, 1/5]	v2.2.0

Events

name	params	description	required version
@on-change	`(value)`	emits when value is changed	--

Functions

name	params	description	required version
getNameValues		get labels of current value	v2.3.1

Contributors

Total commits quantity: 45，Total contributors quantity: 8

ftium4 airyland maii iLeo weiheli wg 项振兴万刚

Changelog

Releases

v2.9.0 [enhance] show warning when picker value is not a string #2568
v2.7.9 [fix] fix typo item_class => itemClass #2457
v2.7.8 [fix] Fix chain mode get value is wrong when the children is empty data.
v2.7.3 [enhance] add development tip for chained-mode picker without specifying prop:columns
v2.7.0 [change] picker move distance do not respect html[data-dpr] by default #2082 #1979
v2.6.2 [enhance] scroll distance respects html[data-dpr] #1979
v2.3.1 [feature] Add getNameValues Method #1418
v2.2.1-rc.3 [fix] Fix no re-rendering when value is set to empty array. #1230
v2.1.1-rc.7 [enhance] Support PC mouse drag #1039 @michael829
v2.4.1 [fix] Fix a bug caused by unexpected end of json value #1584

VUX

Picker

Install

Props

Events

Functions

Contributors

Releases