1. VanForm 表单
van-form 是一个表单容器,用于包裹表单元素,可以通过 van-form 的事件来监听表单提交等操作。
<van-form @submit="onSubmit">
<!-- 表单项 -->
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
<!-- 其他表单项 -->
<!-- 提交按钮 -->
<van-button type="info" native-type="submit">提交</van-button>
</van-form>
2. VanField 输入框
van-field 是一个输入框组件,用于获取用户输入。
<van-field v-model="username" label="用户名" placeholder="请输入用户名" />
3. VanCheckbox 复选框
van-checkbox 是一个复选框组件,用于多项选择。
<van-checkbox v-model="checked" shape="round">同意协议</van-checkbox>
4. VanRadio 单选框
van-radio 是一个单选框组件,用于单项选择。
<van-radio v-model="radio" shape="round" label="1">选项1</van-radio>
<van-radio v-model="radio" shape="round" label="2">选项2</van-radio>
5. VanSwitch 开关
van-switch 是一个开关组件,用于表示开关状态。
<van-switch v-model="switchValue">开关</van-switch>
6. VanPicker 选择器
van-picker 是一个选择器组件,用于从预定义的选项中选择。
<van-picker
show-toolbar
title="选择器"
:columns="columns"
@change="onChange"
>
<van-button slot="right" @click="showPicker">打开</van-button>
</van-picker>
以上只是一小部分 Vant 表单组件的示例。你可以根据项目需求选择不同的组件,以构建出适合你应用的表单。具体的使用方法和配置选项可以查阅 Vant 的官方文档:[Vant 表单组件](https://vant-contrib.gitee.io/vant/v3#/zh-CN/form)。
转载请注明出处:http://www.zyzy.cn/article/detail/5654/Vant