docs(Field): add basic usage document

src/form/README.md

@@ -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

src/form/README.zh-CN.md

@@ -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

src/form/demo/BasicUsage.vue

@@ -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>

src/form/demo/FieldType.vue

@@ -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>

src/form/demo/index.vue

@@ -1,64 +1,18 @@
 <template>
   <demo-section>
-    <demo-block :title="$t('basicUsage')">
+    <basic-usage />
-      <van-form @submit="onSubmit">
+    <field-type />
-        <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>
   </demo-section>
 </template>
 
 <script>
+import BasicUsage from './BasicUsage';
+import FieldType from './FieldType';
+
 export default {
-  i18n: {
+  components: {
-    'zh-CN': {},
+    BasicUsage,
-    'en-US': {},
+    FieldType,
-  },
-
-  data() {
-    return {
-      username: '',
-      password: '',
-      agree: true,
-    };
-  },
-
-  methods: {
-    onSubmit(values) {
-      console.log(values);
-    },
   },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-form {
-  .van-button {
-    margin: 15px 0 0 15px;
-  }
-}
-</style>