[Document] add form components english document (#199)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

docs/examples-docs/en-US/changelog.md

@@ -1,13 +1,13 @@
 ## Changelog
 
-## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
+### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
 `2017-10-11`
 
 **Bug Fixes**
 
 - fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
 
-## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
+### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
 `2017-10-11`
 
 **Improvements**
@@ -18,7 +18,7 @@
 - fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
 - fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
 
-## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
+### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
 `2017-10-09`
 
 **Improvements**

docs/examples-docs/en-US/checkbox.md

@@ -0,0 +1,139 @@
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+
+## Checkbox
+
+### Install
+``` javascript
+import { Checkbox, CheckboxGroup } from 'vant';
+
+Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checkbox1: true
+    };
+  }
+};
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
+```
+:::
+
+#### CheckboxGroup
+When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
+
+:::demo CheckboxGroup
+```html
+<van-checkbox-group v-model="result">
+  <van-checkbox
+    v-for="(item, index) in list"
+    :key="index"
+    :name="item"
+  >
+    Checkbox {{ item }}
+  </van-checkbox>
+</van-checkbox-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+```
+:::
+
+#### Inside a Cell
+
+:::demo Inside a Cell
+```html
+<van-checkbox-group v-model="result">
+  <van-cell-group>
+    <van-cell v-for="(item, index) in list" :key="index">
+      <van-checkbox :name="item">Checkbox{{ item }}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    };
+  }
+};
+```
+:::
+
+### Checkbox API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Checkbox name | `Boolean`  | `false` | - |
+| disabled | Diable checkbox | `Boolean`  | `false` | - |
+| shape | Checkbox shape | `String`  | `round` | `square` |
+
+### CheckboxGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Disable all checkboxes | `Boolean` | `false` | - |
+
+### Checkbox Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
+
+### CheckboxGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |

docs/examples-docs/en-US/field.md

@@ -0,0 +1,126 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      password: '',
+      username: '',
+      message: ''
+    };
+  }
+};
+</script>
+
+## Field
+
+### Install
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
+### Usage
+
+#### Basic Usage
+The value of filed is bound with v-model.
+
+:::demo Basic Usage
+```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="Username"></van-field>
+</van-cell-group>
+```
+:::
+
+#### Custom Type
+Use `type` prop to custom diffrent type fileds.
+
+:::demo Custom Type
+```html
+<van-cell-group>
+  <van-field
+    v-model="username"
+    label="Username"
+    icon="clear"
+    placeholder="Username"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
+  <van-field
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Password"
+    required>
+  </van-field>
+</van-cell-group>
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-cell-group>
+  <van-field value="Disabled" label="Username" disabled></van-field>
+</van-cell-group>
+```
+:::
+
+#### Error Info
+
+:::demo Error Info
+```html
+<van-cell-group>
+  <van-field label="Username" placeholder="Username" error></van-field>
+</van-cell-group>
+```
+:::
+
+#### Auto resize
+Textarea Filed can be auto resize when has `autosize` prop
+
+:::demo Auto resize
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    label="Message"
+    type="textarea"
+    placeholder="Message"
+    rows="1"
+    autosize
+  >
+  </van-field>
+</van-cell-group>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Filed type | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | Filed value | `String`  | - | - |
+| label | Filed label | `String`  | - | - |
+| disabled | Disable field  | `Boolean`  | `false` | - |
+| error | Whether to show error info | `Boolean`  | `false` | - |
+| autosize | Textarea auto resize | `Boolean`  | `false` | - |
+| icon | Right side Icon name | `String`  | - | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| focus | Triggered when filed get focused | - |
+| blur | Triggered when blur filed | - |
+| click-icon | Triggered when click the icon of filed | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| icon | Custom icon |

docs/examples-docs/en-US/layout.md

@@ -1,27 +1,3 @@
-<style>
-.demo-layout {
-  .van-row {
-    padding: 0 15px;
-  }
-  .van-col {
-    color: #fff;
-    font-size: 13px;
-    line-height: 30px;
-    text-align: center;
-    margin-bottom: 10px;
-    background-clip: content-box;
-
-    &:nth-child(odd) {
-      background-color: #39a9ed;
-    }
-
-    &:nth-child(even) {
-      background-color: #66c6f2;
-    }
-  }
-}
-</style>
-
 ## Layout
 
 Quickly and easily create layouts with `van-row` and `van-col`
@@ -36,7 +12,7 @@ Vue.component(Col.name, Col);
 
 ### Usage
 
-#### Basic
+#### Basic Usage
 
 Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
 
@@ -77,14 +53,14 @@ Set grid spacing using `gutter` attribute. The default value is 0
 ### API
 
 #### Row
-| Attribute       | Description      | Type       | Default       | Accepted Values       |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | gutter | grid spacing（px） | `String | Number` | - | - |
 | prefix | className prefix | `String` | `van` | - |
 
 #### Column
-| Attribute       | Description      | Type       | Default       | Accepted Values       |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| span | number of column the grid spans | `String | Number`  | - | - |
+| span | number of column the grid spans | `String | Number` | - | - |
 | offset | number of spacing on the left side of the grid | `String | Number` | -  | - |
 | prefix | className prefix | `String`  | `van` | - |

docs/examples-docs/en-US/number-keyboard.md

@@ -0,0 +1,93 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  data() {
+    return {
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast('Input: ' + value);
+    },
+    onDelete() {
+      Toast('Delete');
+    }
+  }
+}
+</script>
+
+## NumberKeyboard
+
+### Install
+``` javascript
+import { NumberKeyboard } from 'vant';
+
+Vue.component(NumberKeyboard.name, NumberKeyboard);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-button @touchstart.native.stop="showKeyboard = true">
+  ShowKeyboard
+</van-button>
+
+<van-button @touchstart.native.stop="showKeyboard = false">
+  HideKeyboard
+</van-button>
+
+<van-number-keyboard
+  :show="showKeyboard"
+  @blur="showKeyboard = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('delete');
+    }
+  }
+}
+```
+:::
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| show | Whether to show keyboard | `Boolean`  | - | - |
+| title | Keyboard title | `String` | - | - |
+| extraKey | Content of bottom left key | `String`  | `''` | - |
+| zIndex | Keyboard z-index | `Number`  | `100` | - |
+| transition | Whether to show transition animation | `Boolean`  | `true` | - |
+| showDeleteKey | Whether to show delete button | `Boolean`  | `true` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| input | Triggered when keydown | key: Content of the key |
+| delete | Triggered when press delete key | - |
+| blur | Triggered when blur keyboard | - |
+| show | Triggered when keyboard is fully displayed. | - |
+| hide | Triggered when keyboard is fully hidden. | - |

docs/examples-docs/en-US/password-input.md

@@ -0,0 +1,88 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+</script>
+
+## PasswordInput
+The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
+
+### Install
+``` javascript
+import { PasswordInput, NumberKeyBoard } from 'vant';
+
+Vue.component(PasswordInput.name, PasswordInput);
+Vue.component(NumberKeyBoard.name, NumberKeyBoard);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<!-- PasswordInput -->
+<van-password-input
+  :value="value"
+  info="Some tips"
+  @focus="showKeyboard = true"
+></van-password-input>
+
+<!-- NumberKeyboard -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+></van-number-keyboard>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| value | Password value | `String`  | `''` | - |
+| length | Maxlength of password | `Number` | `6` | - |
+| info | Bottom info | `String` | - | - |
+| errorInfo | Bottom error info | `String` | - | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| focus | Triggered when input get focused | - |

docs/examples-docs/en-US/quickstart.md

@@ -10,7 +10,7 @@ npm i vant -S
 
 ### Usage
 
-#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
 ```bash
 # Install babel-plugin-import
 npm i babel-plugin-import -D

docs/examples-docs/en-US/radio.md

@@ -0,0 +1,131 @@
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>
+
+## Radio
+
+### Install
+``` javascript
+import { Radio } from 'vant';
+
+Vue.component(Radio.name, Radio);
+```
+
+### Usage
+
+#### Basic Usage
+Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
+
+:::demo Basic Usage
+```html
+<div class="van-radios">
+  <van-radio name="1" v-model="radio1">Radio 1</van-radio>
+  <van-radio name="2" v-model="radio1">Radio 2</van-radio>
+</div>
+```
+```javascript
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  }
+};
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<div class="van-radios">
+  <van-radio name="1" v-model="radio2" disabled>Disabled</van-radio>
+  <van-radio name="2" v-model="radio2" disabled>Disabled and checked</van-radio>
+</div>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio2: '2'
+    }
+  }
+};
+```
+:::
+
+#### RadioGroup
+When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
+
+:::demo RadioGroup
+```html
+<div class="van-radios">
+  <van-radio-group v-model="radio3">
+    <van-radio name="1">Radio 1</van-radio>
+    <van-radio name="2">Radio 2</van-radio>
+  </van-radio-group>
+</div>
+```
+  
+```javascript
+export default {
+  data() {
+    return {
+      radio3: '1'
+    }
+  }
+};
+```
+:::
+
+#### With Cell
+
+:::demo With Cell
+```html
+<van-radio-group v-model="radio4">
+  <van-cell-group>
+    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
+    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio4: '1'
+    }
+  }
+};
+```
+:::
+
+### Radio API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable radio | `Boolean` | `false` | - |
+| name | Radio name | `Boolean` | `false` | - |
+
+### RadioGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable all radios | `Boolean` | `false` | - |
+
+### RadioGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |

docs/examples-docs/en-US/switch.md

@@ -0,0 +1,112 @@
+<script>
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      checked: true,
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: 'Confirm',
+        confirmButtonText: 'ok',
+        cancelButtonText: 'cancel',
+        message: 'Are you sure to toggle switch?'
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};
+</script>
+
+## Switch
+
+### Install
+``` javascript
+import { Switch } from 'vant';
+
+Vue.component(Switch.name, Switch);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-switch v-model="checked" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    };
+  }
+};  
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-switch v-model="checked" disabled />
+```
+:::
+
+#### Loading
+
+
+:::demo Loading
+```html
+<van-switch v-model="checked" loading />
+```
+:::
+
+#### Advanced usage
+:::demo Advanced usage
+```html
+<van-switch :value="checked2" @input="onInput" />
+```
+```js
+export default {
+  data() {
+    return {
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: 'Confirm',
+        message: 'Are you sure to toggle switch?'
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};  
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Check status of Switch | `Boolean` | `false` | - |
+| loading | Whether to show loading icon | `Boolean`  | `false` | - |
+| disabled | Disable switch | `Boolean`  | `false` | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when check status changed | checked: is switch checked |

docs/examples-docs/zh-CN/changelog.md

@@ -1,13 +1,13 @@
 ## 更新日志
 
-## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
+### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
 `2017-10-11`
 
 **Bug Fixes**
 
 - 修复 Search 样式问题 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
 
-## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
+### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
 `2017-10-11`
 
 **Improvements**
@@ -19,7 +19,7 @@
 - 修复 windows 下项目编译失败的问题 [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
 
 
-## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
+### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
 `2017-10-09`
 
 **Improvements**

docs/examples-docs/zh-CN/checkbox.md

@@ -24,12 +24,6 @@ export default {
       ],
       result: ['a', 'b']
     };
-  },
-
-  watch: {
-    result(val) {
-      console.log(val);
-    }
   }
 };
 </script>
@@ -38,9 +32,10 @@ export default {
 
 ### 使用指南
 ``` javascript
-import { Checkbox } from 'vant';
+import { Checkbox, CheckboxGroup } from 'vant';
 
 Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
 ```
 
 ### 代码演示
@@ -50,7 +45,7 @@ Vue.component(Checkbox.name, Checkbox);
 
 :::demo 基础用法
 ```html
-<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
+<van-checkbox v-model="checkbox1">复选框 1</van-checkbox>
 ```
 
 ```javascript
@@ -66,29 +61,17 @@ export default {
 
 #### 禁用状态
 
-设置`disabled`属性即可，此时`Checkbox`不能点击。
-
 :::demo 禁用状态
 ```html
-<van-checkbox v-model="checkbox2" disabled>复选框2</van-checkbox>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      checkbox2: true
-    };
-  }
-};
+<van-checkbox v-model="checkbox2" disabled>复选框 2</van-checkbox>
 ```
 :::
 
-#### Checkbox组
+#### Checkbox 组
 
-需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
+需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
 
-:::demo Checkbox组
+:::demo Checkbox 组
 ```html
 <van-checkbox-group v-model="result">
   <van-checkbox
@@ -96,7 +79,7 @@ export default {
     :key="index"
     :name="item"
   >
-    复选框{{ item }}
+    复选框 {{ item }}
   </van-checkbox>
 </van-checkbox-group>
 ```
@@ -108,20 +91,14 @@ export default {
       list: ['a', 'b', 'c'],
       result: ['a', 'b']
     };
-  },
-
-  watch: {
-    result(val) {
-      console.log(val);
-    }
   }
 };
 ```
 :::
 
-#### 与Cell组件一起使用
+#### 与 Cell 组件一起使用
 
-此时你需要再引入`Cell`和`CellGroup`组件。
+此时你需要再引入`Cell`和`CellGroup`组件
 
 :::demo 与Cell组件一起使用
 ```html
@@ -148,7 +125,7 @@ export default {
 
 ### Checkbox API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | name | 标识 Checkbox 名称 | `Boolean`  | `false` | - |
 | disabled | 是否禁用单选框 | `Boolean`  | `false` | - |
@@ -156,18 +133,18 @@ export default {
 
 ### CheckboxGroup API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
 
 ### Checkbox Event
 
-| 事件名称       | 说明      | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |
 
 ### CheckboxGroup Event
 
-| 事件名称       | 说明      | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |

docs/examples-docs/zh-CN/field.md

@@ -10,7 +10,7 @@ export default {
     return {
       value: '',
       password: '',
-      username: 'zhangmin',
+      username: '',
       message: ''
     };
   }
@@ -19,7 +19,7 @@ export default {
 
 ## Field 输入框
 
-表单中`input`或`textarea`的输入框。
+`input`或`textarea`的输入框。
 
 ### 使用指南
 ``` javascript
@@ -109,7 +109,7 @@ Vue.component(Field.name, Field);
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | type | 输入框类型 | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
 | value | 输入框的值 | `String`  | - | - |
@@ -121,7 +121,7 @@ Vue.component(Field.name, Field);
 
 ### Event
 
-| 事件名称       | 说明      | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | focus | 输入框聚焦时触发 | - |
 | blur | 输入框失焦时触发 | - |
@@ -129,6 +129,6 @@ Vue.component(Field.name, Field);
 
 ### Slot
 
-| name       | 描述      |
+| name | 描述 |
 |-----------|-----------|
 | icon | 自定义icon |

docs/examples-docs/zh-CN/layout.md

@@ -77,13 +77,13 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
 ### API
 
 #### Row
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
 | prefix | className 前缀 | `String` | `van` | - |
 
 #### Column
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | span | 列元素宽度 | `String | Number`  | - | - |
 | offset | 列元素偏移距离 | `String | Number` | -  | - |

docs/examples-docs/zh-CN/number-keyboard.md

@@ -84,7 +84,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | show | 是否显示键盘 | `Boolean`  | - | - |
-| title | 键盘标题 | `String` | `安全输入键盘` | - |
+| title | 键盘标题 | `String` | - | - |
 | extraKey | 左下角按键内容 | `String`  | `''` | - |
 | zIndex | 键盘 z-index | `Number`  | `100` | - |
 | transition | 是否开启过场动画 | `Boolean`  | `true` | - |
@@ -92,7 +92,7 @@ export default {
 
 ### Event
 
-| 事件名       | 说明      | 参数       |
+| 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
 | input | 点击按键时触发 | key: 按键内容 |
 | delete | 点击删除键时触发 | - |

docs/examples-docs/zh-CN/password-input.md

@@ -77,12 +77,12 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | value | 密码值 | `String`  | `''` | - |
-| length | 密码长度 | `Number` | `6` | - |
+| length | 密码最大长度 | `Number` | `6` | - |
 | info | 输入框下方提示 | `String` | - | - |
 | errorInfo | 输入框下方错误提示 | `String` | - | - |
 
 ### Event
 
-| 事件名       | 说明      | 参数       |
+| 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
 | focus | 输入框聚焦时触发 | - |

docs/examples-docs/zh-CN/radio.md

@@ -41,8 +41,8 @@ Vue.component(Radio.name, Radio);
 :::demo 基础用法
 ```html
 <div class="van-radios">
-  <van-radio name="1" v-model="radio1">单选框1</van-radio>
-  <van-radio name="2" v-model="radio1">单选框2</van-radio>
+  <van-radio name="1" v-model="radio1">单选框 1</van-radio>
+  <van-radio name="2" v-model="radio1">单选框 2</van-radio>
 </div>
 ```
 ```javascript
@@ -87,8 +87,8 @@ export default {
 ```html
 <div class="van-radios">
   <van-radio-group v-model="radio3">
-    <van-radio name="1">单选框1</van-radio>
-    <van-radio name="2">单选框2</van-radio>
+    <van-radio name="1">单选框 1</van-radio>
+    <van-radio name="2">单选框 2</van-radio>
   </van-radio-group>
 </div>
 ```
@@ -104,11 +104,11 @@ export default {
 ```
 :::
 
-#### 与Cell组件一起使用
+#### 与 Cell 组件一起使用
 
 此时你需要再引入`Cell`和`CellGroup`组件。
 
-:::demo 与Cell组件一起使用
+:::demo 与 Cell 组件一起使用
 ```html
 <van-radio-group v-model="radio4">
   <van-cell-group>
@@ -131,19 +131,19 @@ export default {
 
 ### Radio API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | `Boolean`  | `false` |   |
-| name | 根据这个来判断radio是否选中 | `Boolean`  | `false` |   |
+| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
+| name | 根据这个来判断 radio 是否选中 | `Boolean`  | `false` | - |
 
 ### RadioGroup API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| disabled | 是否禁用单选框 | `Boolean`  | `false` |   |
+| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
 
 ### RadioGroup Event
 
-| 事件名称       | 说明      | 回调参数 |
+| 事件名称 | 说明 | 回调参数 |
 |-----------|-----------|-----------|
 | change | 当绑定值变化时触发的事件 | 当前组件的值 |

docs/examples-docs/zh-CN/switch.md

@@ -1,17 +1,8 @@
 <style>
 .demo-switch {
   .van-switch {
-    float: left;
     margin: 0 15px;
   }
-
-  &__text {
-    display: inline-block;
-    line-height: 32px;
-    float: left;
-    font-size: 14px;
-    color: #333;
-  }
 }
 </style>
 
@@ -21,21 +12,19 @@ import Dialog from 'packages/dialog';
 export default {
   data() {
     return {
-      switchState1: true,
-      switchState2: false,
-      switchStateTrue: true,
-      switchStateFalse: false
+      checked: true,
+      checked2: true
     };
   },
+
   methods: {
-    updateState(newState) {
-      const state = newState ? '打开' : '关闭';
+    onInput(checked) {
       Dialog.confirm({
         title: '提醒',
-        message: '是否' + state + '开关？'
-      }).then((action) => {
-        this.switchState2 = newState;
-      }, (error) => {});
+        message: '是否切换开关？'
+      }).then(() => {
+        this.checked2 = checked;
+      });
     }
   }
 };  
@@ -56,107 +45,72 @@ Vue.component(Switch.name, Switch);
 
 :::demo 基础用法
 ```html
-<van-row>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchState1"></van-switch>
-    <div class="demo-switch__text">{{ switchState1 ? ' 打开' : '关闭' }}</div>
-  </van-col>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
-    <div class="demo-switch__text">{{ switchState2 ? ' 打开' : '关闭' }}</div>
-  </van-col>
-</van-row>
+<van-switch v-model="checked" />
 ```
 
 ```javascript
 export default {
   data() {
     return {
-      switchState1: true,
-      switchState2: false
+      checked: true
     };
-  },
-  methods: {
-    updateState(newState) {
-      const state = newState ? '打开' : '关闭';
-      Dialog.confirm({
-        title: '提醒',
-        message: '是否' + state + '开关？'
-      }).then((action) => {
-        this.switchState2 = newState;
-      }, (error) => {
-      });
-    }
   }
 };  
 ```
 :::
 
 #### 禁用状态
-
-设置`disabled`属性为`true`，此时开关不可点击。
-
 :::demo 禁用状态
 ```html
-<van-row>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" disabled></van-switch>
-    <div class="demo-switch__text">打开</div>
-  </van-col>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" disabled></van-switch>
-    <div class="demo-switch__text">关闭</div>
-  </van-col>
-</van-row>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      switchStateTrue: true,
-      switchStateFalse: false
-    };
-  }
-};  
+<van-switch v-model="checked" disabled />
 ```
 :::
 
-#### loading状态
-
-设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
-
-:::demo loading状态
+#### 加载状态
+:::demo 加载状态
 ```html
-<van-row>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateTrue" loading></van-switch>
-    <div class="demo-switch__text">打开</div>
-  </van-col>
-  <van-col span="12">
-    <van-switch class="some-customized-class" v-model="switchStateFalse" loading></van-switch>
-    <div class="demo-switch__text">关闭</div>
-  </van-col>
-</van-row>
+<van-switch v-model="checked" loading />
 ```
+:::
 
-```javascript
+#### 高级用法
+:::demo 高级用法
+```html
+<van-switch :value="checked2" @input="onInput" />
+```
+```js
 export default {
   data() {
     return {
-      switchStateTrue: true,
-      switchStateFalse: false
+      checked2: true
     };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: '提醒',
+        message: '是否切换开关？'
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
   }
-};  
+}; 
 ```
 :::
 
+
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 开关状态 | `Boolean`  | `false`          | `true`, `false`    |
-| loading | loading状态 | `Boolean`  | `false`          | `true`, `false`    |
-| disabled | 禁用状态 | `Boolean`  | `false`          | `true`, `false`    |
-| onChange | 开关状态切换回调(默认则改变开关状态) | `Function`  | -          | - |
+| v-model | 开关选中状态 | `Boolean`  | `false` | - |
+| loading | 是否为加载状态 | `Boolean`  | `false` | - |
+| disabled | 是否为禁用状态 | `Boolean`  | `false` | - |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | 开关状态切换回调 | checked: 是否选中开关 |

docs/examples-docs/zh-CN/uploader.md

@@ -47,15 +47,14 @@ export default {
 ```
 :::
 
-
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String`  | `dataUrl`          | `dataUrl`, `text`         |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean`  | `false`          |           |
-| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function`  |           |  |
-| after-read | 文件读完之后回调此函数，参数为{file:'选择的文件',content:'读的内容'} | `Function`  |           |  |
+| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
+| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
+| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
+| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
 
 ### Slot