Vant Picker 选择器分析

发布时间：2023-04-20 11:29:06 所属栏目：教程来源：

导读：提供多个选项集合供用户选择，支持单列选择和多列级联，通常与弹出层组件配合使用

引入
import Vue from 'vue';
import { Picker } from 'vant';

Vue.use(Picker);
基础用法
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;
}
}
};

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!