帮我写一份vue2+vant2的新增表单页面,表单内容有姓名、电话、性别、地址、头像
时间: 2024-01-27 19:05:53 浏览: 79
好的,以下是一个简单的 vue2 vant2 新增表单页面的代码示例,表单内容包括姓名、电话、性别、地址、头像:
```vue
<template>
<div>
<van-form @submit="onSubmit">
<van-field v-model="form.name" label="姓名" placeholder="请输入姓名" />
<van-field v-model="form.phone" label="电话" placeholder="请输入电话" />
<van-radio-group v-model="form.gender" label="性别">
<van-radio name="male" label="男">男</van-radio>
<van-radio name="female" label="女">女</van-radio>
</van-radio-group>
<van-field v-model="form.address" label="地址" placeholder="请输入地址" />
<van-uploader v-model="form.avatar" label="头像" :before-read="beforeRead" :after-read="afterRead" />
<van-button round type="primary" native-type="submit">提交</van-button>
</van-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
phone: '',
gender: '',
address: '',
avatar: ''
}
}
},
methods: {
onSubmit() {
// 提交表单
},
beforeRead(file) {
// 上传前的处理
},
afterRead(file) {
// 上传成功后的处理
}
}
}
</script>
```
这里使用了 vant2 的组件,包括 `van-form` 表单、`van-field` 输入框、`van-radio-group` 单选框、`van-uploader` 上传组件和 `van-button` 按钮。其中,`van-uploader` 组件用于上传头像图片,需要在 `beforeRead` 和 `afterRead` 方法中进行上传前处理和上传成功后处理。
阅读全文