Picker 选择器

介绍

选择器组件通常与 弹出层 组件配合使用

引入

  1. import{Picker}from'vant';
  2. Vue.use(Picker);

代码演示

基础用法

对于单列选择器,传入数值格式的 columns 即可,同时可以监听选项改变的 change 事件

  1. <van-picker :columns="columns" @change="onChange"/>
  1. exportdefault{
  2. data(){
  3. return{
  4. columns:['杭州','宁波','温州','嘉兴','湖州']
  5. };
  6. },
  7. methods:{
  8. onChange(picker, value, index){
  9. Toast(`当前值:${value}, 当前索引:${index}`);
  10. }
  11. }
  12. };

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值

  1. <van-picker
  2. :columns="columns"
  3. :default-index="2"
  4. @change="onChange"
  5. />

展示顶部栏

通常选择器组件会传入show-toolbar属性以展示顶部操作栏,并可以监听对应的confirmcancel事件

  1. <van-picker
  2. show-toolbar
  3. title="标题"
  4. :columns="columns"
  5. @cancel="onCancel"
  6. @confirm="onConfirm"
  7. />
  1. exportdefault{
  2. data(){
  3. return{
  4. columns:['杭州','宁波','温州','嘉兴','湖州']
  5. }
  6. },
  7. methods:{
  8. onConfirm(value, index){
  9. Toast(`当前值:${value}, 当前索引:${index}`);
  10. },
  11. onCancel(){
  12. Toast('取消');
  13. }
  14. }
  15. };

搭配弹出层使用

  1. <van-field
  2. readonly
  3. clickable
  4. label="城市"
  5. :value="value"
  6. placeholder="选择城市"
  7. @click="showPicker = true"
  8. />
  9. <van-popupv-model="showPicker"position="bottom">
  10. <van-picker
  11. show-toolbar
  12. :columns="columns"
  13. @cancel="showPicker = false"
  14. @confirm="onConfirm"
  15. />
  16. </van-popup>
  1. exportdefault{
  2. data(){
  3. return{
  4. value:'',
  5. showPicker:false,
  6. columns:['杭州','宁波','温州','嘉兴','湖州']
  7. }
  8. },
  9. methods:{
  10. onConfirm(value){
  11. this.value = value;
  12. this.showPicker =false;
  13. }
  14. }
  15. };

禁用选项

选项可以为对象结构,通过设置 disabled 来禁用该选项

  1. <van-picker :columns="columns"/>
  1. exportdefault{
  2. data(){
  3. return{
  4. columns:[
  5. { text:'杭州', disabled:true},
  6. { text:'宁波'},
  7. { text:'温州'}
  8. ]
  9. };
  10. }
  11. };

多列联动

  1. <van-picker :columns="columns" @change="onChange"/>
  1. const citys ={
  2. '浙江':['杭州','宁波','温州','嘉兴','湖州'],
  3. '福建':['福州','厦门','莆田','三明','泉州']
  4. };
  5. exportdefault{
  6. data(){
  7. return{
  8. columns:[
  9. {
  10. values:Object.keys(citys),
  11. className:'column1'
  12. },
  13. {
  14. values: citys['浙江'],
  15. className:'column2',
  16. defaultIndex:2
  17. }
  18. ]
  19. };
  20. },
  21. methods:{
  22. onChange(picker, values){
  23. picker.setColumnValues(1, citys[values[0]]);
  24. }
  25. }
  26. };

加载状态

若选择器数据是异步获取的,可以通过 loading 属性显示加载提示

  1. <van-picker :columns="columns"loading/>

API

Props

参数说明类型默认值版本
columns对象数组,配置每一列显示的数据Array[]-
show-toolbar是否显示顶部栏Booleanfalse-
toolbar-position顶部栏位置,可选值为bottomStringtop2.0.0
title顶部栏标题String''-
loading是否显示加载状态Booleanfalse-
value-key选项对象中,文字对应的 keyStringtext-
item-height选项高度Number44-
confirm-button-text确认按钮文字String确认-
cancel-button-text取消按钮文字String取消-
visible-item-count可见的选项个数Number5-
default-index单列选择器的默认选中项索引,多列选择器请参考下方的 Columns 配置Number01.6.9

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数

事件名说明回调参数
confirm点击完成按钮时触发单列:选中值,选中值对应的索引多列:所有列选中值,所有列选中值对应的索引
cancel点击取消按钮时触发单列:选中值,选中值对应的索引多列:所有列选中值,所有列选中值对应的索引
change选项改变时触发单列:Picker 实例,选中值,选中值对应的索引多列:Picker 实例,所有列选中值,当前列对应的索引

Slots

名称说明
title自定义标题内容

Columns 数据结构

当传入多列数据时,columns为一个对象数组,数组中的每一个对象配置每一列,每一列有以下key

key说明
values列中对应的备选值
defaultIndex初始选中项的索引,默认为 0
className为对应列添加额外的class

方法

通过 ref 可以获取到 picker 实例并调用实例方法

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项

Picker 选择器 - 图1