mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-09-14 08:19:44 +08:00
73 lines
1.1 KiB
Markdown
73 lines
1.1 KiB
Markdown
# Form
|
|
|
|
### Install
|
|
|
|
```js
|
|
import Vue from 'vue';
|
|
import { Form } from 'vant';
|
|
|
|
Vue.use(Form);
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Basic Usage
|
|
|
|
```html
|
|
<van-form @submit="onSubmit" @failed="onFailed">
|
|
<van-field
|
|
v-model="username"
|
|
name="Username"
|
|
label="Username"
|
|
placeholder="Username"
|
|
:rules="[{ required: true, message: 'Username is required' }]"
|
|
/>
|
|
<van-field
|
|
v-model="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="info">Submit</van-button>
|
|
</div>
|
|
</van-form>
|
|
```
|
|
|
|
```js
|
|
export default {
|
|
data() {
|
|
return {
|
|
username: '',
|
|
password: '',
|
|
};
|
|
},
|
|
methods: {
|
|
onSubmit(values) {
|
|
console.log('submit', values);
|
|
},
|
|
onFailed(errorInfo) {
|
|
console.log('failed', errorInfo);
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
| Attribute | Description | Type | Default |
|
|
|------|------|------|------|
|
|
|
|
### Events
|
|
|
|
| Event | Description | Arguments |
|
|
|
|
### Slots
|
|
|
|
| Name | Description |
|
|
|------|------|
|