小程序中用vant写一段用picker选择器选中并呈现数据,类似于表单
时间: 2024-05-25 17:15:56 浏览: 69
微信小程序实现自定义picker选择器弹窗内容
5星 · 资源好评率100%
<template>
<van-form>
<van-field
v-model="name"
label="姓名"
placeholder="请输入姓名"
/>
<van-field
v-model="gender"
label="性别"
placeholder="请选择性别"
readonly
clickable
@click="showGenderPicker = true"
/>
<van-field
v-model="age"
label="年龄"
placeholder="请输入年龄"
type="number"
/>
<van-field
v-model="email"
label="邮箱"
placeholder="请输入邮箱"
type="email"
/>
<van-field
v-model="phone"
label="手机号码"
placeholder="请输入手机号码"
type="tel"
/>
</van-form>
<van-picker
v-model="gender"
title="选择性别"
:columns="genderOptions"
:show-toolbar="true"
:visible-item-count="5"
@confirm="showGenderPicker = false"
@cancel="showGenderPicker = false"
/>
</template>
<script>
export default {
data() {
return {
name: '',
gender: '',
age: null,
email: '',
phone: '',
genderOptions: [
{ text: '男', value: 'male' },
{ text: '女', value: 'female' },
{ text: '其他', value: 'other' }
],
showGenderPicker: false
}
}
}
</script>
阅读全文