vue界面,用vant组件,给3个van-field(分别是性别,城市,入学年份) 添加弹出选择并且返回值到文本中,请写出代码
时间: 2024-05-08 07:19:27 浏览: 73
在vant中使用时间选择器和popup弹出层的操作
以下是示例代码,可供参考:
```html
<template>
<van-field v-model="gender" label="性别" readonly @click="showGenderPicker" />
<van-field v-model="city" label="城市" readonly @click="showCityPicker" />
<van-field v-model="enrollmentYear" label="入学年份" readonly @click="showYearPicker" />
</template>
<script>
import { Picker } from 'vant';
export default {
components: {
[Picker.name]: Picker,
},
data() {
return {
gender: '',
city: '',
enrollmentYear: '',
genderOptions: ['男', '女'],
cityOptions: [
{ text: '北京', value: '北京' },
{ text: '上海', value: '上海' },
{ text: '广州', value: '广州' },
{ text: '深圳', value: '深圳' },
],
yearOptions: ['2020', '2019', '2018', '2017', '2016'],
};
},
methods: {
showGenderPicker() {
Picker({
title: '请选择性别',
columns: [
{
values: this.genderOptions,
},
],
onConfirm: (value) => {
this.gender = value[0];
},
});
},
showCityPicker() {
Picker({
title: '请选择城市',
columns: [
{
values: this.cityOptions,
},
],
onConfirm: (value) => {
this.city = value[0];
},
});
},
showYearPicker() {
Picker({
title: '请选择入学年份',
columns: [
{
values: this.yearOptions,
},
],
onConfirm: (value) => {
this.enrollmentYear = value[0];
},
});
},
},
};
</script>
```
阅读全文