docs(Field): add basic usage document

This commit is contained in:
陈嘉涵
2020-02-10 15:54:29 +08:00
parent cb83240372
commit 0e23124c3a
5 changed files with 194 additions and 54 deletions
+61
View 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>