mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-08 05:29:45 +08:00
docs(Field): add basic usage document
This commit is contained in:
陈嘉涵
parent
cb83240372
commit
0e23124c3a
@ -13,6 +13,48 @@ Vue.use(Form);
|
||||
|
||||
### 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
|
||||
|
||||
@ -13,6 +13,48 @@ Vue.use(Form);
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info">提交</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
|
||||
|
||||
61
src/form/demo/BasicUsage.vue
Normal file
61
src/form/demo/BasicUsage.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="$t('username')"
|
||||
:rules="[{ required: true, message: $t('requireUsername') }]"
|
||||
:placeholder="$t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="$t('password')"
|
||||
:rules="[{ required: true, message: $t('requirePassword') }]"
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
requireUsername: '请填写用户名',
|
||||
requirePassword: '请填写密码',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
requireUsername: 'Username is required',
|
||||
requirePassword: 'Password is required',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
41
src/form/demo/FieldType.vue
Normal file
41
src/form/demo/FieldType.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<demo-block :title="$t('fieldType')">
|
||||
<van-form>
|
||||
<van-field
|
||||
name="checkbox"
|
||||
:label="$t('checkbox')"
|
||||
:rules="[{ required: true, message: $t('requireCheckbox') }]"
|
||||
>
|
||||
<van-checkbox v-model="checkbox" slot="input" shape="square" />
|
||||
</van-field>
|
||||
<div style="margin: 16px;">
|
||||
<van-button type="info" round block>{{ $t('submit') }}</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
checkbox: '复选框',
|
||||
fieldType: '表单项类型',
|
||||
requireCheckbox: '请勾选复选框',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
checkbox: 'Checkbox',
|
||||
fieldType: 'Field Type',
|
||||
requireCheckbox: 'Checkbox is required',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkbox: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,64 +1,18 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
label="username"
|
||||
:rules="[{ required: true, message: 'username is required' }]"
|
||||
placeholder="username"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
label="password"
|
||||
:rules="[{ required: true, message: 'password is required' }]"
|
||||
placeholder="password"
|
||||
/>
|
||||
<van-field
|
||||
name="agree"
|
||||
label="agree"
|
||||
:rules="[{ required: true, message: 'need agree' }]"
|
||||
>
|
||||
<van-checkbox v-model="agree" slot="input" shape="square" />
|
||||
</van-field>
|
||||
<van-button type="primary">submit</van-button>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
<basic-usage />
|
||||
<field-type />
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicUsage from './BasicUsage';
|
||||
import FieldType from './FieldType';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {},
|
||||
'en-US': {},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
agree: true,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log(values);
|
||||
},
|
||||
components: {
|
||||
BasicUsage,
|
||||
FieldType,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-form {
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user