# Form
### Install
```js
import { createApp } from 'vue';
import { Form } from 'vant';
const app = createApp();
app.use(Form);
```
## Usage
### Basic Usage
```html
<van-form @submit="onSubmit">
<van-field
v-model="state.username"
name="Username"
label="Username"
placeholder="Username"
:rules="[{ required: true, message: 'Username is required' }]"
/>
<van-field
v-model="state.password"
type="password"
name="Password"
label="Password"
placeholder="Password"
:rules="[{ required: true, message: 'Password is required' }]"
/>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
Submit
</van-button>
</div>
</van-form>
```
```js
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
username: '',
password: '',
});
const onSubmit = (values) => {
console.log('submit', values);
};
return {
state,
onSubmit,
};
},
};
```
### Validate Rules
```html
<van-form validate-first @failed="onFailed">
<van-field
v-model="state.value1"
name="pattern"
placeholder="USe pattern"
:rules="[{ pattern, message: 'Error message' }]"
/>
<van-field
v-model="state.value2"
name="validator"
placeholder="Use validator"
:rules="[{ validator, message: 'Error message' }]"
/>
<van-field
v-model="state.value3"
name="asyncValidator"
placeholder="Use async validator"
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
/>
<div style="margin: 16px;">
<van-button round block type="primary" native-type="submit">
Submit
</van-button>
</div>
</van-form>
```
```js
import { reactive } from 'vue';
import { Toast } from 'vant';
export default {
setup() {
const state = reactive({
value1: '',
value2: '',
value3: '',
});
const pattern = /\d{6}/;
const validator = (val) => /1\d{10}/.test(val);
const asyncValidator = (val) =>
new Promise((resolve) => {
Toast.loading('Validating...');
setTimeout(() => {
Toast.clear();
resolve(/\d{6}/.test(val));
}, 1000);
});
const onFailed = (errorInfo) => {
console.log('failed', errorInfo);
};
return {
state,
pattern,
onFailed,
validator,
asyncValidator,
};
},
};
```
### Field Type - Switch
```html
<van-field name="switch" label="Switch">
<template #input>
<van-switch v-model="checked" size="20" />
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const checked = ref(false);
return { checked };
},
};
```
### Field Type - Checkbox
```html
<van-field name="checkbox" label="Checkbox">
<template #input>
<van-checkbox v-model="checked" shape="square" />
</template>
</van-field>
<van-field name="checkboxGroup" label="CheckboxGroup">
<template #input>
<van-checkbox-group v-model="groupChecked" direction="horizontal">
<van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
<van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
</van-checkbox-group>
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const checked = ref(false);
const groupChecked = ref([]);
return {
checked,
groupChecked,
};
},
};
```
### Field Type - Radio
```html
<van-field name="radio" label="Radio">
<template #input>
<van-radio-group v-model="checked" direction="horizontal">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio>
</van-radio-group>
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const checked = ref('1');
return { checked };
},
};
```
### Field Type - Stepper
```html
<van-field name="stepper" label="Stepper">
<template #input>
<van-stepper v-model="value" />
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref(1);
return { value };
},
};
```
### Field Type - Rate
```html
<van-field name="rate" label="Rate">
<template #input>
<van-rate v-model="value" />
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref(3);
return { value };
},
};
```
### Field Type - Slider
```html
<van-field name="slider" label="Slider">
<template #input>
<van-slider v-model="value" />
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref(50);
return { value };
},
};
```
### Field Type - Uploader
```html
<van-field name="uploader" label="Uploader">
<template #input>
<van-uploader v-model="value" />
</template>
</van-field>
```
```js
import { ref } from 'vue';
export default {
setup() {
const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
return { value };
},
};
```
### Field Type - Picker
```html
<van-field
readonly
clickable
name="picker"
:value="state.value"
label="Picker"
placeholder="Select city"
@click="state.showPicker = true"
/>
<van-popup v-model:show="state.showPicker" position="bottom">
<van-picker
:columns="columns"
@confirm="onConfirm"
@cancel="state.showPicker = false"
/>
</van-popup>
```
```js
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value: '',
showPicker: false,
});
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
columns,
onConfirm,
};
},
};
```
### Field Type - DatetimePicker
```html
<van-field
readonly
clickable
name="datetimePicker"
:value="state.value"
label="Datetime Picker"
placeholder="Select time"
@click="state.showPicker = true"
/>
<van-popup v-model:show="state.showPicker" position="bottom">
<van-datetime-picker
type="time"
@confirm="onConfirm"
@cancel="state.showPicker = false"
/>
</van-popup>
```
```js
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value: '',
showPicker: false,
});
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
onConfirm,
};
},
};
```
### Field Type - Area
```html
<van-field
readonly
clickable
name="area"
:value="state.value"
label="Area Picker"
placeholder="Select area"
@click="state.showArea = true"
/>
<van-popup v-model:show="state.showArea" position="bottom">
<van-area
:area-list="areaList"
@confirm="onConfirm"
@cancel="state.showArea = false"
/>
</van-popup>
```
```js
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value: '',
showArea: false,
});
const onConfirm = (value) => {
state.showArea = false;
state.value = values
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
};
return {
state,
areaList: {},
onConfirm,
};
},
};
```
### Field Type - Calendar
```html
<van-field
readonly
clickable
name="calendar"
:value="state.value"
label="Calendar"
placeholder="Select date"
@click="state.showCalendar = true"
/>
<van-calendar v-model="state.showCalendar" @confirm="onConfirm" />
```
```js
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value: '',
showCalendar: false,
});
const onConfirm = (date) => {
state.value = `${date.getMonth() + 1}/${date.getDate()}`;
state.showCalendar = false;
};
return {
state,
onConfirm,
};
},
};
```
## API
### Props
|
没有合适的资源?快使用搜索试试~ 我知道了~
Vant移动端组件库 v3.0.0
共1078个文件
js:280个
md:190个
ts:163个
7 下载量 141 浏览量
2020-12-28
13:26:51
上传
评论
收藏 22.09MB ZIP 举报
温馨提示
为您提供Vant移动端组件库下载,Vant 是一套轻量、可靠的移动端组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。特性:1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持国际化7、支持 TS8、支持 SSR建议搭配 webpack,babel 使用 Vant,这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-
资源详情
资源评论
资源推荐
收起资源包目录
Vant移动端组件库 v3.0.0 (1078个子文件)
.editorconfig 214B
.eslintignore 25B
.eslintignore 25B
.eslintignore 25B
.eslintignore 4B
.eslintignore 4B
.eslintrc 43B
.gitignore 150B
.gitignore 123B
.gitignore 123B
.gitignore 44B
changelog-commit.hbs 325B
changelog-main.hbs 149B
changelog-header.hbs 92B
下载说明.htm 3KB
index.html 1KB
index.html 1KB
area.js 103KB
vant.config.js 19KB
index.js 14KB
index.js 13KB
lazy.js 12KB
index.legacy.js 12KB
index.js 11KB
index.js 10KB
index.legacy.js 10KB
props.legacy.js 10KB
index.legacy.js 10KB
index.js 10KB
index.legacy.js 9KB
index.js 8KB
index.legacy.js 8KB
index.legacy.js 8KB
PickerColumn.js 8KB
index.legacy.js 8KB
index.js 8KB
DatePicker.js 7KB
util.js 7KB
index.js 7KB
index.legacy.js 7KB
ImagePreviewItem.js 6KB
index.js 6KB
index.legacy.js 6KB
Month.js 6KB
index.js 6KB
date-picker.legacy.js 6KB
index.legacy.js 6KB
index.js 6KB
index.legacy.js 6KB
index.js 5KB
index.js 5KB
index.spec.js 5KB
Dialog.js 5KB
prop.legacy.js 5KB
index.legacy.js 5KB
index.legacy.js 5KB
listener.js 5KB
field-type.legacy.js 5KB
index.js 5KB
ImagePreview.js 5KB
codepoints.js 5KB
index.js 5KB
index.legacy.js 5KB
index.js 4KB
index.js 4KB
index.js 4KB
TimePicker.js 4KB
index.legacy.js 4KB
index.legacy.js 4KB
index.legacy.js 4KB
cascade.legacy.js 4KB
index.legacy.js 4KB
index.legacy.js 4KB
index.legacy.js 4KB
index.js 4KB
index.js 4KB
config.js 4KB
index.js 4KB
index.legacy.js 4KB
index.js 4KB
index.legacy.js 4KB
index.spec.js 4KB
index.legacy.js 4KB
index.legacy.js 3KB
index.legacy.js 3KB
directive.js 3KB
time-picker.legacy.js 3KB
index.js 3KB
index.spec.js 3KB
index.spec.js 3KB
index.js 3KB
index.spec.js 3KB
index.js 3KB
methods.legacy.js 3KB
index.js 3KB
index.legacy.js 3KB
index.js 3KB
index.spec.js 3KB
index.js 3KB
index.legacy.js 3KB
共 1078 条
- 1
- 2
- 3
- 4
- 5
- 6
- 11
weixin_38545463
- 粉丝: 6
- 资源: 931
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- DMP3120L-VB一款SOT23封装P-Channel场效应MOS管
- BEG模型原始论文:C-Pack: Packaged Resources To Advance General Chinese
- 测试平台项目代码web
- DMN3070SSN-VB一款SOT23封装N-Channel场效应MOS管
- JAVA+SQL电子通讯录带系统托盘(参考文献+源代码).zip
- DMN3052L-7-F-VB一款SOT23封装N-Channel场效应MOS管
- 111111111111111
- 粒子群算法与遗传算法的对比&串行混合优化仿真 - 基于Rastrigin测试函数 博文对应的代码
- 建设.apk
- DMN3051L-7-F-VB一款SOT23封装N-Channel场效应MOS管
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0