Vant Picker 选择器
提供多个选项集合供选择,单列选择和多列级联,通常与 组件配合使用
import Vue from 'vue'; import { Picker } from 'vant'; Vue.use(Picker);
Picker 组件通过columns配置选项数据,columns是包含字符串或对象的数组
<van-picker :columns="columns" @change="onChange" />
import { Toast } from 'vant'; export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] }; }, methods: { onChange(picker, value, index) { Toast(`当前值:${value}, 当前索引:${index}`); } } };
单列选择时,可以通过default-index设置初始选中项的索引
<van-picker :columns="columns" :default-index="2" />
设置show-toolbar后会展示顶部操作栏,点击确认按钮触发confirm事件,点击取消按钮触发cancel事件
<van-picker show-toolbar title="" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
import { Toast } from 'vant'; export default { data() { return { columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] } }, methods: { onConfirm(value, index) { Toast(`当前值:${value}, 当前索引:${index}`); }, onCancel() { Toast('取消'); } } };
通过columns可以配置多列选择
<van-picker show-toolbar title="" :columns="columns" />
export default { data() { return { columns: [ // 第一列 { values: ['周一', '周二', '周三', '周四', '周五'], defaultIndex: 2 }, // 第二列 { values: ['上午', '下午', '晚上'], defaultIndex: 1 } ] }; } };
使用columns的children字段可以实现选项级联的(从 2.4.5 版本开始)
<van-picker show-toolbar title="" :columns="columns" />
export default { data() { return { columns: [{ text: '浙江', children: [{ text: '杭州', children: [{ text: '西湖区' }, { text: '余杭区' }] }, { text: '温州', children: [{ text: '鹿城区' }, { text: '瓯海区' }] }] }, { text: '福建', children: [{ text: '福州', children: [{ text: '鼓楼区' }, { text: '台江区' }] }, { text: '厦门', children: [{ text: '思明区' }, { text: '海沧区' }] }] }] }; } };
选项可以为对象结构,通过设置 disabled 来禁用该选项
<van-picker :columns="columns" />
export default { data() { return { columns: [ { text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' } ] }; } };
通过 Picker 上的实例可以更灵活地控制选择器,比如使用setColumnValues实现多列联动
<van-picker :columns="columns" @change="onChange" />
const citys = { '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'], '福建': ['福州', '厦门', '莆田', '三明', '泉州'] }; export default { data() { return { columns: [ { values: Object.keys(citys) }, { values: citys['浙江'] } ] }; }, methods: { onChange(picker, values) { picker.setColumnValues(1, citys[values[0]]); } } };
若选择器数据是异步的,可以通过 loading 加载
<van-picker :columns="columns" :loading="loading" />
export default { data() { return { columns: [], loading: true }; }, created() { setTimeout(() => { this.loading = false; this.columns = ['选项']; }, 1000); } };
在实际场景中,Picker 通常作为用于辅助表单填写,可以搭配 Popup 和 Field 实现该
<van-field readonly clickable label="城市" :value="value" placeholder="选择城市" @click="showPicker = true" /> <van-popup v-model="showPicker" position="bottom"> <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" /> </van-popup>
export default { data() { return { value: '', showPicker: false, columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'] } }, methods: { onConfirm(value) { this.value = value; this.showPicker = false; } } };
API@H__79@
当选择器有多列时,事件回调参数会返回数组
当传入多列数据时,columns为对象数组,数组中的每对象配置每一列,每一列有以下key
通过 ref 可以到 Picker 实例并实例,详见
常见问题@H__79@
参见。