diff --git a/docs/examples-docs/en-US/actionsheet.md b/docs/examples-docs/en-US/actionsheet.md
new file mode 100644
index 000000000..5e05ae841
--- /dev/null
+++ b/docs/examples-docs/en-US/actionsheet.md
@@ -0,0 +1,165 @@
+<script>
+export default {
+  data() {
+    return {
+      show1: false,
+      show2: false,
+      show3: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handleActionClick(item) {
+      console.log(item);
+    }
+  }
+}
+</script>
+
+## Actionsheet
+
+### Install
+``` javascript
+import { Actionsheet } from 'vant';
+
+Vue.component(Actionsheet.name, Actionsheet);
+```
+
+### Usage
+
+#### Basic Usage
+
+需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
+
+:::demo Basic Usage
+```html
+<van-button @click="show1 = true">弹出actionsheet</van-button>
+<van-actionsheet v-model="show1" :actions="actions1">
+</van-actionsheet>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show1: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handleActionClick(item) {
+      console.log(item);
+    }
+  }
+}
+```
+:::
+
+#### 带取消按钮的 Actionsheet
+
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
+
+:::demo 带取消按钮的 Actionsheet
+```html
+<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
+<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+</van-actionsheet>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show2: false,
+      actions1: [
+        {
+          name: '微信安全支付',
+          className: 'actionsheet-wx',
+          callback: this.handleActionClick
+        },
+        {
+          name: '支付宝支付',
+          loading: true
+        },
+        {
+          name: '信用卡支付'
+        },
+        {
+          name: '其他支付方式'
+        }
+      ]
+    };
+  }
+}
+```
+:::
+
+#### 带标题的 Actionsheet
+
+如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
+
+:::demo 带标题的 Actionsheet
+```html
+<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
+<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+  <p>一些内容</p>
+</van-actionsheet>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| actions | 行动按钮数组 | `Array` | `[]` | |
+| title | 标题 | `String` | | |
+| cancelText | 取消按钮文案 | `String` | | |
+| overlay | 是否显示遮罩 | `Boolean` | | |
+| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
+
+### actions
+
+
+`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| key | Description |
+|-----------|-----------|
+| name | 标题 |
+| subname | 二级标题 |
+| className | 为对应列添加特殊的`class` |
+| loading | 是否是`loading`状态 |
+| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
diff --git a/docs/examples-docs/en-US/address-edit.md b/docs/examples-docs/en-US/address-edit.md
new file mode 100644
index 000000000..b07d00cd4
--- /dev/null
+++ b/docs/examples-docs/en-US/address-edit.md
@@ -0,0 +1,142 @@
+<script>
+import { Toast } from 'packages';
+import areaList from '../../mock/area.json';
+
+export default {
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+};
+</script>
+
+## AddressEdit
+
+### Install
+``` javascript
+import { AddressEdit } from 'vant';
+
+Vue.component(AddressEdit.name, AddressEdit);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-address-edit
+  :area-list="areaList"
+  :show-postal="true"
+  :show-set-default="true"
+  :show-search-result="true"
+  :search-result="searchResult"
+  @save="onSave"
+  @delete="onDelete"
+  @change-detail="onChangeDetail"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| areaList | 地区列表 | `Object` | - | - |
+| addressInfo | 收货人信息 | `Object` | `{}` | - |
+| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
+
+### Data Structure
+
+#### addressInfo Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| province | 省份 | `String` |
+| city | 城市 | `String` |
+| county | 区县 | `String` |
+| address_detail | 详细地址 | `String` |
+| area_code | 地区编码，通过省市区选择获取 | `String` |
+| postal_code | 邮政编码 | `String` |
+| is_default | 是否为默认地址 | `String` |
+
+#### searchResult Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| name | 地名 | `String` |
+| address | 详细地址 | `String` |
+
+#### 省市县列表Data Structure
+请参考 [Area](#/zh-CN/component/area) 组件。
diff --git a/docs/examples-docs/en-US/address-list.md b/docs/examples-docs/en-US/address-list.md
new file mode 100644
index 000000000..38eedfe1c
--- /dev/null
+++ b/docs/examples-docs/en-US/address-list.md
@@ -0,0 +1,122 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        },
+        {
+          id: '3',
+          name: '王五',
+          tel: '1320000000',
+          address: '浙江省杭州市滨江区江南大道 15 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+}
+</script>
+
+## AddressList
+
+### Install
+``` javascript
+import { AddressList } from 'vant';
+
+Vue.component(AddressList.name, AddressList);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-address-list
+  v-model="chosenAddressId"
+  :list="list"
+  @add="onAdd"
+  @edit="onEdit"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中地址的 id | String | - | - |
+| list | 地址列表 | Array | `[]` | - |
+| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+
+### Data Structure
+#### 地址列表字段说明
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| address | 收货地址 | `String` |
diff --git a/docs/examples-docs/en-US/area.md b/docs/examples-docs/en-US/area.md
new file mode 100644
index 000000000..322c650e1
--- /dev/null
+++ b/docs/examples-docs/en-US/area.md
@@ -0,0 +1,133 @@
+<script>
+import AreaList from '../../mock/area.json';
+
+export default {
+  data() {
+    return {
+      areaList: AreaList
+    }
+  }
+};
+</script>
+
+## Area
+
+### Install
+
+``` javascript
+import { Area } from 'vant';
+
+Vue.component(Area.name, Area);
+```
+
+### Usage
+
+#### Basic Usage
+
+要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
+
+:::demo Basic Usage
+```html
+<van-area :area-list="areaList"></van-area>
+
+<script>
+import AreaList from '../../mock/area.json';
+
+export default {
+  data() {
+    return {
+      areaList: AreaList
+    }
+  }
+};
+</script>
+```
+:::
+
+#### 选中省市县
+
+如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
+
+:::demo 选中省市县
+```html
+<van-area :area-list="areaList" value="110101"></van-area>
+```
+:::
+
+#### 配置显示列
+
+可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
+
+:::demo 配置显示列
+```html
+<van-area :area-list="areaList" :columns-num="2"></van-area>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| value | 当前选中的省市区`code` | `String` | - | |
+| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | |
+| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | |
+
+### Event
+
+| Event | Description | 回调参数 |
+|-----------|-----------|-----------|
+| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
+| cancel | 点击取消按钮时 | - |
+
+### Data Structure
+
+#### 省市县列表Data Structure
+
+整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
+
+每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
+
+`AreaList`具体格式如下：
+```javascript
+{
+  province_list: {
+    110000: '北京市',
+    120000: '天津市'
+  },
+  city_list: {
+    110100: '北京市',
+    110200: '县',
+    120100: '天津市',
+    120200: '县'
+  },
+  county_list: {
+    110101: '东城区',
+    110102: '西城区',
+    110105: '朝阳区',
+    110106: '丰台区'
+    120101: '和平区',
+    120102: '河东区',
+    120103: '河西区',
+    120104: '南开区',
+    120105: '河北区',
+    // ....
+  }
+}
+```
+
+#### 点击完成时返回的Data Structure
+返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
+
+`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
+```javascript
+[{
+  code: '110000',
+  name: '北京市'
+}, {
+  code: '110100',
+  name: '北京市'
+},{
+  code: '110101',
+  name: '东城区'
+}]
+```
diff --git a/docs/examples-docs/en-US/badge.md b/docs/examples-docs/en-US/badge.md
new file mode 100644
index 000000000..2429ed5c5
--- /dev/null
+++ b/docs/examples-docs/en-US/badge.md
@@ -0,0 +1,67 @@
+<script>
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
+</script>
+
+## Badge
+
+### Install
+``` javascript
+import { Badge } from 'vant';
+
+Vue.component(Badge.name, Badge);
+```
+
+### Usage
+
+#### Basic Usage
+Use `active-key` prop to set index of chosen 'badge'
+
+:::demo Basic Usage
+```html
+<van-badge-group :active-key="activeKey">
+  <van-badge title="Title" @click="onClick"></van-badge>
+  <van-badge title="Title" @click="onClick" info="8"></van-badge>
+  <van-badge title="Title" @click="onClick" info="99"></van-badge>
+  <van-badge title="Title" @click="onClick" info="199"></van-badge>
+</van-badge-group>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+:::
+
+### BadgeGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| active-key | Index of chosen badge | `String | Number` | `0` | - |
+
+### Badge API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Content | `String` | `''` | - |
+| info | Info Message | `String` | `''` | - |
+| url | Link | `String` | - | - |
diff --git a/docs/examples-docs/en-US/button.md b/docs/examples-docs/en-US/button.md
new file mode 100644
index 000000000..c43fc0b50
--- /dev/null
+++ b/docs/examples-docs/en-US/button.md
@@ -0,0 +1,89 @@
+## Button
+
+### Install
+``` javascript
+import { Button } from 'vant';
+
+Vue.component(Button.name, Button);
+```
+
+### Usage
+
+#### Type
+
+:::demo Type
+```html
+<van-button type="default">Default</van-button>
+<van-button type="primary">Primary</van-button>
+<van-button type="danger">Danger</van-button>
+```
+:::
+
+#### Size
+
+:::demo Size
+```html 
+<van-button size="large">Large</van-button>
+<van-button size="normal">Normal</van-button>
+<van-button size="small">Small</van-button>
+<van-button size="mini">Mini</van-button>
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-button disabled>Diabled</van-button>
+```
+:::
+
+#### Loading
+
+:::demo Loading
+```html 
+<van-button loading></van-button>
+<van-button loading type="primary"></van-button>
+```
+:::
+
+#### Custom Tag
+Use `tag` prop to custom button tag
+
+:::demo Custom Tag
+```html 
+<van-button tag="a" href="https://www.youzan.com" target="_blank">
+  Button
+</van-button>
+```
+:::
+
+#### Action Button
+
+:::demo Action Button
+```html 
+<van-button type="primary" bottom-action>Text</van-button>
+
+<van-row>
+  <van-col span="12">
+    <van-button bottom-action>Text</van-button>
+  </van-col>
+  <van-col span="12">
+    <van-button type="primary" bottom-action>Text</van-button>
+  </van-col>
+</van-row>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `default` | `primary` `danger` |
+| size | Size | `String` | `normal` | `large` `small` `mini` |
+| tag | Tag | `String` | `button` | - |
+| nativeType | Native Type Attribute | `String` | `''` | - |
+| diabled | Whether disable button | `Boolean` | `false` | - |
+| loading | Whether show loading status | `Boolean` | `false` | - |
+| block | Whether to set display block | `Boolean` | `false` | - |
+| bottomAction | Whether to be action button | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/en-US/card.md b/docs/examples-docs/en-US/card.md
new file mode 100644
index 000000000..d16b460fe
--- /dev/null
+++ b/docs/examples-docs/en-US/card.md
@@ -0,0 +1,75 @@
+<script>
+export default {
+  data() {
+    return {
+      imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
+    }
+  }
+}
+</script>
+
+## Card
+
+### Install
+``` javascript
+import { Card } from 'vant';
+
+Vue.component(Card.name, Card);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-card
+  title="Title"
+  desc="Description"
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+/>
+```
+:::
+
+#### Advanced Usage
+Use `slot` to custom content.
+
+:::demo Advanced Usage
+```html
+<van-card
+  title="Title"
+  desc="Description"  
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+>
+  <div slot="footer">
+    <van-button size="mini">Button</van-button>
+    <van-button size="mini">Button</van-button>
+  </div>
+</van-card>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | Left thumb | `String` | - | - |
+| title | Title | `String` | - | - |
+| desc | Description | `String` | - | - |
+| num | Number of goods | `String | Number` | - | - |
+| price | Price of goods | `String | Number` | - | - |
+| centered | Whether content vertical centered | `String` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| title | Custom title |
+| desc | Custom description |
+| tags | Custom tags |
+| thumb | Custom thumb |
+| footer | Custom footer |
diff --git a/docs/examples-docs/en-US/cell-swipe.md b/docs/examples-docs/en-US/cell-swipe.md
new file mode 100644
index 000000000..c5313a6d2
--- /dev/null
+++ b/docs/examples-docs/en-US/cell-swipe.md
@@ -0,0 +1,39 @@
+## CellSwipe
+
+### Install
+``` javascript
+import { CellSwipe } from 'vant';
+
+Vue.component(CellSwipe.name, CellSwipe);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-cell-swipe :right-width="65" :left-width="65">
+  <span slot="left">选择</span>
+  <van-cell-group>
+    <van-cell title="单元格1" value="单元格1内容"></van-cell>
+  </van-cell-group>
+  <span slot="right">删除</span>
+</van-cell-swipe>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
+| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | 自定义显示内容 |
+| left | 左侧滑动内容 |
+| right | 右侧滑动内容 |
diff --git a/docs/examples-docs/en-US/cell.md b/docs/examples-docs/en-US/cell.md
new file mode 100644
index 000000000..9253028a9
--- /dev/null
+++ b/docs/examples-docs/en-US/cell.md
@@ -0,0 +1,105 @@
+<script>
+export default {
+  methods: {
+    handleClick() {
+      console.log('cell click');
+    }
+  }
+};
+</script>
+
+## Cell
+
+### Install
+``` javascript
+import { Cell, CellGroup } from 'vant';
+
+Vue.component(Cell.name, Cell);
+Vue.component(CellGroup.name, CellGroup);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-cell-group>
+  <van-cell title="Title" value="Text"></van-cell>
+  <van-cell title="Title" value="Text" label="Description"></van-cell>
+</van-cell-group>
+```
+:::
+
+#### Value only
+
+:::demo Value only
+```html
+<van-cell-group>
+  <van-cell value="Text"></van-cell>
+</van-cell-group>
+```
+:::
+
+#### Left Icon
+
+:::demo Left Icon
+```html
+<van-cell-group>
+  <van-cell title="Title" icon="location"></van-cell>
+</van-cell-group>
+```
+:::
+
+#### Link
+
+:::demo Link
+```html
+<van-cell-group>
+  <van-cell title="Title" is-link></van-cell>
+  <van-cell title="Title" is-link value="Text"></van-cell>
+</van-cell-group>
+```
+:::
+
+#### Advanced Usage
+
+:::demo Advanced Usage
+```html
+<van-cell-group>
+  <van-cell value="Text" icon="home" is-link>
+    <template slot="title">
+      <span class="van-cell-text">Title</span>
+      <van-tag type="danger">Tag</van-tag>
+    </template>
+  </van-cell>
+  <van-cell title="Title" icon="location" is-link></van-cell>
+  <van-cell title="Title">
+    <template slot="right-icon">
+      <van-icon name="search" class="van-cell__right-icon"></van-icon>
+    </template>
+  </van-cell>
+</van-cell-group>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | Left Icon | `String` | - | - |
+| title | Title | `String` | - | - |
+| value | Right text | `String` | - | - |
+| label | Description below the title | `String` | - | - |
+| url | Link | `String` | - | - |
+| isLink | Whether to show link icon | `Boolean` | `false` | - |
+| required | Whether to show required mark | `Boolean` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| icon | Custom icon |
+| title | Custom title |
+| right-icon | Custom right icon |
diff --git a/docs/examples-docs/en-US/checkbox.md b/docs/examples-docs/en-US/checkbox.md
index aa4e51439..b8937ed26 100644
--- a/docs/examples-docs/en-US/checkbox.md
+++ b/docs/examples-docs/en-US/checkbox.md
@@ -116,9 +116,9 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| name | Checkbox name | `Boolean`  | `false` | - |
-| disabled | Diable checkbox | `Boolean`  | `false` | - |
-| shape | Checkbox shape | `String`  | `round` | `square` |
+| name | Checkbox name | `Boolean` | `false` | - |
+| disabled | Diable checkbox | `Boolean` | `false` | - |
+| shape | Checkbox shape | `String` | `round` | `square` |
 
 ### CheckboxGroup API
 
diff --git a/docs/examples-docs/en-US/contact.md b/docs/examples-docs/en-US/contact.md
new file mode 100644
index 000000000..5ac30d1df
--- /dev/null
+++ b/docs/examples-docs/en-US/contact.md
@@ -0,0 +1,237 @@
+<script>
+export default {
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    onEdit(item) {
+      this.isEdit = true;      
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    onSelect() {
+      this.showList = false;
+    },
+
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+      
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+</script>
+
+## Contact
+通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
+
+### Install
+``` javascript
+import { ContactCard, ContactList, ContactEdit } from 'vant';
+
+Vue.component(ContactCard.name, ContactCard);
+Vue.component(ContactList.name, ContactList);
+Vue.component(ContactEdit.name, ContactEdit);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<!-- 联系人卡片 -->
+<van-contact-card
+  :type="cardType"
+  :name="currentContact.name"
+  :tel="currentContact.tel"
+  @click="showList = true"
+></van-contact-card>
+
+<!-- 联系人列表 -->
+<van-popup v-model="showList" position="bottom">
+  <van-contact-list
+    v-model="chosenContactId"
+    :list="list"
+    @add="onAdd"
+    @edit="onEdit"
+    @select="onSelect"
+  />
+</van-popup>
+
+<!-- 联系人编辑 -->
+<van-popup v-model="showEdit" position="bottom">
+  <van-contact-edit
+    :contact-info="editingContact"
+    :is-edit="isEdit"
+    @save="onSave"
+    @delete="onDelete"
+  />
+</van-popup>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    // 添加联系人
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    // 编辑联系人
+    onEdit(item) {
+      this.isEdit = true;      
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    // 选中联系人
+    onSelect() {
+      this.showList = false;
+    },
+
+    // 保存联系人
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+      
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    // 删除联系人
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+```
+:::
+
+### ContactCard API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type，分为添加和编辑两种样式 | `String` | `add` | `edit` |
+| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
+| name | 联系人姓名 | `String` | - | - |
+| tel | 联系人手机号 | `String` | - | - |
+
+### ContactList API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中联系人的 id | `String | Number` | - | - |
+| addText | 新建按钮文案 | `String` | `新建联系人` | - |
+| list | 联系人列表 | `Array` | `[]` | - |
+
+### ContactList Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
+| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
+
+
+### ContactEdit API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| contactInfo | 联系人信息 | `Object` | `[]` | - |
+| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+
+### ContactEdit Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+
+### Data Structure
+
+#### 联系人Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每位联系人的唯一标识 | `String | Number` |
+| name | 联系人姓名 | `String` |
+| tel | 联系人手机号 | `String` |
diff --git a/docs/examples-docs/en-US/coupon.md b/docs/examples-docs/en-US/coupon.md
new file mode 100644
index 000000000..87658c4fd
--- /dev/null
+++ b/docs/examples-docs/en-US/coupon.md
@@ -0,0 +1,177 @@
+<script>
+import { Toast } from 'packages';
+
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+const discountCoupon = {
+  ...coupon,
+  discount: 88,
+  denominations: 0,
+  origin_condition: 50,
+  value: 12,
+  condition: '下单即享 8.8 折',
+};
+
+const disabledCoupon = {
+  ...coupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+const disabledDiscountCoupon = {
+  ...discountCoupon,
+  avaliable: 0,
+  reason: '未满足使用门槛'
+};
+
+export default {
+  data() {
+    return {
+      showList: false,
+      chosenCoupon: -1,
+      coupons: [coupon, discountCoupon],
+      disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;      
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      Toast('兑换成功');
+      this.coupons.push(coupon);
+    }
+  }
+}
+</script>
+
+## Coupon
+
+### Install
+``` javascript
+import { CouponCell, CouponList } from 'vant';
+
+Vue.component(CouponCell.name, CouponCell);
+Vue.component(CouponList.name, CouponList);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<!-- 优惠券单元格 -->
+<van-coupon-cell
+  :coupons="coupons"
+  :chosen-coupon="chosenCoupon"
+  @click="showList = true"
+></van-coupon-cell>
+
+<!-- 优惠券列表 -->
+<van-popup v-model="showList" position="bottom">
+  <van-coupon-list
+    :coupons="coupons"
+    :chosen-coupon="chosenCoupon"
+    :disabled-coupons="disabledCoupons"
+    @change="onChange"
+    @exchange="onExchange"
+  ></van-coupon-list>
+</van-popup>
+```
+
+```javascript
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+export default {
+  data() {
+    return {
+      chosenCoupon: -1,
+      coupons: [coupon],
+      disabledCoupons: [coupon]
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      this.coupons.push(coupon);
+    }
+  }
+}
+```
+:::
+
+### CouponCell API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 单元格标题 | `String` | `优惠` | - |
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| editable | 能否切换优惠券 | `Boolean` | `true` | - |
+
+### CouponList API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
+| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
+| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
+| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
+| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
+
+### CouponList Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | 优惠券切换回调 | index, 选中优惠券的索引 |
+| exchange | 兑换优惠券回调 | code, 兑换码 |
+
+### Data Structure
+#### 优惠券字段说明
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 优惠券 id | `String` |
+| name | 优惠券名称 | `String` |
+| available | 是否可用, 1:可用,0:不可用 | `Number` |
+| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
+| denominations | 面值（0为折扣券）单位分 | `Number` |
+| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
+| start_at | 	卡有效开始时间 | `Number` |
+| end_at | 卡失效日期 | `Number` |
+| reason | 不可用原因 | `String` |
+| value | 订单优惠金额，单位分 | `Number` |
+| condition | 格式化输出 value | `String` |
diff --git a/docs/examples-docs/en-US/datetime-picker.md b/docs/examples-docs/en-US/datetime-picker.md
new file mode 100644
index 000000000..9564f7a7a
--- /dev/null
+++ b/docs/examples-docs/en-US/datetime-picker.md
@@ -0,0 +1,137 @@
+<script>
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2019, 10, 1),
+      currentDate1: new Date(2018, 0, 1),
+      currentDate2: null,
+      currentDate3: null
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker) {
+      console.log(picker);
+    },
+    handlePickerCancel() {
+      console.log('picker cancel');
+    },
+    handlePickerConfirm() {
+      console.log('picker confirm');
+    }
+  }
+};
+</script>
+
+## DatetimePicker
+
+### Install
+``` javascript
+import { DatetimePicker } from 'vant';
+
+Vue.component(DatetimePicker.name, DatetimePicker);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-datetime-picker
+  v-model="currentDate1"
+  type="datetime"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  :max-date="maxDate"
+  @change="handlePickerChange">  
+</van-datetime-picker>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2019, 10, 1),
+      currentDate: new Date(2018, 0, 1)
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker) {
+      console.log(picker);
+    }
+  }
+};
+```
+:::
+
+#### 选择日期
+
+:::demo 选择日期
+```html
+<van-datetime-picker
+  v-model="currentDate2"
+  type="date"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">  
+</van-datetime-picker>
+```
+:::
+
+#### 选择时间
+
+:::demo 选择时间
+```html
+<van-datetime-picker
+  v-model="currentDate3"
+  type="time"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+  @change="handlePickerChange">
+</van-datetime-picker>
+```
+:::
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
+| type | 组件类型 | String | 'datetime' |  'datetime', 'date', 'time' |
+| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
+| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
+| minHour | 可选的最小小时 | Number | 0 | |
+| maxHour | 可选的最大小时 | Number | 23 | |
+
+### Event
+
+| Event | Description | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当值变化时触发的事件 | picker 实例 |
+| confirm | 点击完成按钮时触发的事件 | 当前 value |
+| cancel | 点击取消按钮时触发的事件 | - |
+
+### change事件
+
+在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
+
+| 函数 | Description |
+|-----------|-----------|
+| getColumnValue(index) | 获取对应列中选中的值 |
+| setColumnValue(index, value) | 设置对应列中选中的值 |
+| getColumnValues(index) | 获取对应列中所有的备选值 |
+| setColumnValues(index, values) | 设置对应列中所有的备选值 |
+| getValues() | 获取所有列中被选中的值，返回一个数组 |
+| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
diff --git a/docs/examples-docs/en-US/dialog.md b/docs/examples-docs/en-US/dialog.md
new file mode 100644
index 000000000..fc4bdb2c7
--- /dev/null
+++ b/docs/examples-docs/en-US/dialog.md
@@ -0,0 +1,124 @@
+<script>
+import { Dialog } from 'packages';
+
+const message = '弹窗内容';
+
+export default {
+  methods: {
+    onClickAlert() {
+      Dialog.alert({
+        title: '标题',
+        message
+      });
+    },
+
+    onClickAlert2() {
+      Dialog.alert({
+        message
+      });
+    },
+
+    onClickConfirm() {
+      Dialog.confirm({
+        title: '标题',
+        message
+      }).catch(action => {
+        console.log(action);
+      });
+    }
+  }
+};
+</script>
+
+## Dialog
+
+### Install
+
+```js
+import { Dialog } from 'vant';
+```
+
+### Usage
+
+#### 消息提示
+
+用于提示一些消息，只包含一个确认按钮
+
+:::demo 消息提示
+```html
+<van-button @click="onClickAlert">Alert</van-button>
+<van-button @click="onClickAlert2">无标题 Alert</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickAlert() {
+      Dialog.alert({
+        title: '标题',
+        message: '弹窗内容'
+      }).then(() => {
+        // on close
+      });
+    },
+
+    onClickAlert2() {
+      Dialog.alert({
+        message: '弹窗内容'
+      }).then(() => {
+        // on close
+      });
+    }
+  }
+};
+```
+:::
+
+#### 消息确认
+
+用于确认消息，包含取消和确认按钮
+
+:::demo 消息确认
+```html
+<van-button @click="onClickConfirm">Confirm</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickConfirm() {
+      Dialog.confirm({
+        title: '标题',
+        message: '弹窗内容'
+      }).then(() => {
+        // on confirm
+      }).catch(() => {
+        // on cancel
+      });
+    }
+  }
+};
+```
+:::
+
+### 方法
+
+| 方法名 | Attribute | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
+| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
+| Dialog.close | - | `void` | 关闭弹窗 |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | `String` | | |
+| message | 内容 | `String` | | |
+| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | |
+| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | |
+| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | |
+| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
+| overlay | 是否展示蒙层 | `Boolean` | `true` | |
+| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
+| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
diff --git a/docs/examples-docs/en-US/field.md b/docs/examples-docs/en-US/field.md
index b00e7f3f8..12be8de48 100644
--- a/docs/examples-docs/en-US/field.md
+++ b/docs/examples-docs/en-US/field.md
@@ -103,13 +103,13 @@ Textarea Filed can be auto resize when has `autosize` prop
 
 | 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`  | - | - |
+| 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
 
diff --git a/docs/examples-docs/en-US/goods-action.md b/docs/examples-docs/en-US/goods-action.md
new file mode 100644
index 000000000..bd62aa344
--- /dev/null
+++ b/docs/examples-docs/en-US/goods-action.md
@@ -0,0 +1,80 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  methods: {
+    onClickMiniBtn() {
+      Toast('点击图标');
+    },
+    onClickBigBtn() {
+      Toast('点击按钮');
+    }
+  }
+}
+</script>
+
+## GoodsAction
+
+### Install
+``` javascript
+import {
+  GoodsAction,
+  GoodsActionBigBtn,
+  GoodsActionMiniBtn
+} from 'vant';
+
+Vue.component(GoodsAction.name, GoodsAction);
+Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
+Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
+```
+
+### Usage
+
+:::demo 
+```html
+<van-goods-action>
+  <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
+    客服
+  </van-goods-action-mini-btn>
+  <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
+    购物车
+  </van-goods-action-mini-btn>
+  <van-goods-action-big-btn @click="onClickBigBtn">
+    加入购物车
+  </van-goods-action-big-btn>
+  <van-goods-action-big-btn @click="onClickBigBtn" primary>
+    立即购买
+  </van-goods-action-big-btn>
+</van-goods-action>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickMiniBtn() {
+      Toast('点击图标');
+    },
+    onClickBigBtn() {
+      Toast('点击按钮');
+    }
+  }
+}
+```
+:::
+
+### API
+
+#### GoodsActionMiniBtn
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
+| iconClass | 图标额外类名 | `String` | `''` | - |
+| url | 跳转链接 | `String` | `javascript:;` | - |
+
+#### GoodsActionBigBtn
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| url | 跳转链接 | `String` | `javascript:;` | - |
+| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/en-US/icon.md b/docs/examples-docs/en-US/icon.md
new file mode 100644
index 000000000..14a480ad3
--- /dev/null
+++ b/docs/examples-docs/en-US/icon.md
@@ -0,0 +1,136 @@
+<script>
+import Vue from 'vue';
+
+const icons = [
+  'close',
+  'location',
+  'clock',
+  'gold-coin',
+  'chat',
+  'exchange',
+  'upgrade',
+  'edit',
+  'contact',
+  'passed',
+  'points',
+  'delete',
+  'records',
+  'logistics',
+  'check',
+  'checked',
+  'gift',
+  'like-o',
+  'like',
+  'qr',
+  'qr-invalid',
+  'shop',
+  'photograph',
+  'add',
+  'add2',
+  'photo',
+  'cart',
+  'arrow',
+  'search',
+  'clear',
+  'success',
+  'fail',
+  'wechat',
+  'alipay',
+  'password-view',
+  'wap-nav',
+  'password-not-view',
+  'wap-home',
+  'ecard-pay',
+  'balance-pay',
+  'peer-pay',
+  'credit-pay',
+  'debit-pay',
+  'other-pay',
+  'cart',
+  'browsing-history',
+  'goods-collect',
+  'shop-collect',
+  'receive-gift',
+  'send-gift',
+  'setting',
+  'coupon',
+  'free-postage',
+  'discount',
+  'birthday-privilege',
+  'member-day-privilege',
+  'balance-details',
+  'cash-back-record',
+  'points-mall',
+  'exchange-record',
+  'pending-payment',
+  'pending-orders',
+  'pending-deliver',
+  'pending-evaluate',
+  'cash-on-deliver',
+  'gift-card-pay',
+  'underway',
+  'point-gift',
+  'after-sale',
+  'edit-data',
+  'question',
+  'description',
+  'card',
+  'gift-card',
+  'coupon',
+  'completed',
+  'value-card'
+];
+
+const IconListConstructor = Vue.extend({
+  render(h) {
+    return (
+      <div>
+        {icons.map(icon => (
+          <van-col span="8">
+            <van-icon name={icon}></van-icon>
+            <span>{icon}</span>
+          </van-col>
+        ))}
+      </div>
+    )
+  }
+});
+
+export default {
+  mounted() {
+    const IconList = new IconListConstructor({
+      el: document.createElement('div')  
+    });
+    const block = document.querySelector('.zan-doc-demo-block');
+    if (block) {
+      block.appendChild(IconList.$el);
+    }
+  }
+};
+</script>
+
+## Icon
+
+### Install
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
+### Usage
+
+#### Basic Usage
+View all usable icons on the right.
+
+:::demo Icon List
+```html
+<van-icon name="success" />
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Icon name | `String` | `''` | - |
diff --git a/docs/examples-docs/en-US/image-preview.md b/docs/examples-docs/en-US/image-preview.md
new file mode 100644
index 000000000..ebebcd7ed
--- /dev/null
+++ b/docs/examples-docs/en-US/image-preview.md
@@ -0,0 +1,52 @@
+<script>
+import { ImagePreview } from 'packages';
+
+export default {
+  methods: {
+    showImagePreview() {
+      ImagePreview([
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]);
+    }
+  }
+};
+</script>
+
+## ImagePreview
+
+### Install
+
+```js
+import { ImagePreview } from 'vant';
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-button @click="showImagePreview">Show</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showImagePreview() {
+      ImagePreview([
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]);
+    }
+  }
+};
+```
+:::
+
+### 方法参数
+
+| Attribute | Description | Type |
+|-----------|-----------|-----------|
+| imageUrls | Image URL list | `Array` |
diff --git a/docs/examples-docs/en-US/layout.md b/docs/examples-docs/en-US/layout.md
index 60608f88f..5095cb847 100644
--- a/docs/examples-docs/en-US/layout.md
+++ b/docs/examples-docs/en-US/layout.md
@@ -62,5 +62,5 @@ Set grid spacing using `gutter` attribute. The default value is 0
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | 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` | - |
+| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
+| prefix | className prefix | `String` | `van` | - |
diff --git a/docs/examples-docs/en-US/lazyload.md b/docs/examples-docs/en-US/lazyload.md
new file mode 100644
index 000000000..f9bc2a2df
--- /dev/null
+++ b/docs/examples-docs/en-US/lazyload.md
@@ -0,0 +1,122 @@
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+
+## Lazyload
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Lazyload } from 'vant';
+
+Vue.use(Lazyload, options);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<img v-for="img in imageList" v-lazy="img">
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+:::
+
+#### Background Image
+Use `v-lazy:background-image` to set background url, and declare the height of the container.
+
+:::demo Background Image
+```html
+<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      backgroundImageList: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+:::
+
+#### Lazyload Component
+
+:::demo Lazyload Component
+```html
+<lazy-component>
+  <img v-for="img in componentImageList" v-lazy="img">
+</lazy-component>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      componentImageList: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+:::
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | Src of the image while loading | `String` | - | - |
+| error | Src of the image upon load fail | `String` | - | - |
+| preload | Proportion of pre-loading height | `String` | - | - |
+| attempt | Attempts count | `Number` | `3` | |
+| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - |
+| adapter | Dynamically modify the attribute of element | `Object` | - | - |
+| filter | The image's listener filter | `Object` | - | - |
+| lazyComponent | Lazyload component | `Boolean` | `false` | - |
+
+See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload)
diff --git a/docs/examples-docs/en-US/loading.md b/docs/examples-docs/en-US/loading.md
new file mode 100644
index 000000000..dbc2f2382
--- /dev/null
+++ b/docs/examples-docs/en-US/loading.md
@@ -0,0 +1,35 @@
+## Loading
+
+### Install
+``` javascript
+import { Loading } from 'vant';
+
+Vue.component(Loading.name, Loading);
+```
+
+### Usage
+
+#### Solid color
+
+:::demo Solid color
+```html
+<van-loading type="circle" color="black"></van-loading>
+<van-loading type="circle" color="white"></van-loading>
+```
+:::
+
+#### Gradient color
+
+:::demo Gradient color
+```html
+<van-loading type="gradient-circle" color="black"></van-loading>
+<van-loading type="gradient-circle" color="white"></van-loading>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| color | Color | `String` | `black` | `black` `white` |
+| type | Type | `String` | `gradient-circle` | `gradient-circle` `circle` |
diff --git a/docs/examples-docs/en-US/nav-bar.md b/docs/examples-docs/en-US/nav-bar.md
new file mode 100644
index 000000000..753fddb55
--- /dev/null
+++ b/docs/examples-docs/en-US/nav-bar.md
@@ -0,0 +1,51 @@
+## NavBar
+
+### Install
+``` javascript
+import { NavBar } from 'vant';
+
+Vue.component(NavBar.name, NavBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-nav-bar
+  title="Title"
+  left-text="Back"
+  right-text="Button"
+  left-arrow
+/>
+```
+:::
+
+#### Advanced Usage
+
+:::demo Advanced Usage
+```html
+<van-nav-bar title="Title" left-text="Back" left-arrow>
+  <van-icon name="search" slot="right" />
+</van-nav-bar>
+```
+:::
+
+
+### API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | `''` | - |
+| left-text | Left Text | `String` | `''` | - |
+| right-text | Right Text | `String` | `''` | - |
+| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
+| fixed | Whether to fixed top | `Boolean` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| title | Custom title |
+| left | Custom left side content |
+| right | Custom right side content |
\ No newline at end of file
diff --git a/docs/examples-docs/en-US/notice-bar.md b/docs/examples-docs/en-US/notice-bar.md
new file mode 100644
index 000000000..5b8d9fc69
--- /dev/null
+++ b/docs/examples-docs/en-US/notice-bar.md
@@ -0,0 +1,57 @@
+## NoticeBar
+
+### Install
+``` javascript
+import { NoticeBar } from 'vant';
+
+Vue.component(NoticeBar.name, NoticeBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-notice-bar text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily." />
+```
+:::
+
+#### Disable scroll
+
+:::demo Disable scroll
+```html
+<van-notice-bar :scrollable="false">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+:::
+
+#### Mode
+
+:::demo Mode
+```html
+<van-notice-bar mode="closeable">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+
+<van-notice-bar mode="link">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| mode | Mode | String | `''` | `closeable` `link` |
+| delay | Animation delay (s) | Number | `1` | - |
+| speed | Scroll speed (px) | Number | `40` | - |
+| scrollable | Whether to scroll content | Boolean | `true` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click | Triggered when click notice bar | - |
diff --git a/docs/examples-docs/en-US/number-keyboard.md b/docs/examples-docs/en-US/number-keyboard.md
index a8eec6e62..b718f2807 100644
--- a/docs/examples-docs/en-US/number-keyboard.md
+++ b/docs/examples-docs/en-US/number-keyboard.md
@@ -75,12 +75,12 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| show | Whether to show keyboard | `Boolean`  | - | - |
+| 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` | - |
+| 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
 
diff --git a/docs/examples-docs/en-US/panel.md b/docs/examples-docs/en-US/panel.md
new file mode 100644
index 000000000..7bd4b1e0b
--- /dev/null
+++ b/docs/examples-docs/en-US/panel.md
@@ -0,0 +1,51 @@
+## Panel
+
+### Install
+``` javascript
+import { Panel } from 'vant';
+
+Vue.component(Panel.name, Panel);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-panel title="Title" desc="Description" status="Status">
+  <div>Panel Content</div>
+</van-panel>
+```
+:::
+
+#### Advanced Usage
+
+:::demo Advanced Usage
+```html
+<van-panel title="Title" desc="Description" status="Status">
+  <div>Panel Content</div>
+  <div slot="footer">
+    <van-button size="small">Button</van-button>
+    <van-button size="small" type="danger">Button</van-button>
+  </div>
+</van-panel>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | - | - |
+| desc | Description | `String` | - | - |
+| status | Status | `String` | - | - |
+
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| header | Custom header |
+| footer | Custom footer |
diff --git a/docs/examples-docs/en-US/password-input.md b/docs/examples-docs/en-US/password-input.md
index af90f5a41..3671faf64 100644
--- a/docs/examples-docs/en-US/password-input.md
+++ b/docs/examples-docs/en-US/password-input.md
@@ -76,7 +76,7 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| value | Password value | `String`  | `''` | - |
+| value | Password value | `String` | `''` | - |
 | length | Maxlength of password | `Number` | `6` | - |
 | info | Bottom info | `String` | - | - |
 | errorInfo | Bottom error info | `String` | - | - |
diff --git a/docs/examples-docs/en-US/picker.md b/docs/examples-docs/en-US/picker.md
new file mode 100644
index 000000000..a821ab06a
--- /dev/null
+++ b/docs/examples-docs/en-US/picker.md
@@ -0,0 +1,173 @@
+<script>
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      title: '地区选择',
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+</script>
+
+## Picker
+
+### Install
+``` javascript
+import { Picker } from 'vant';
+
+Vue.component(Picker.name, Picker);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
+```
+
+```javascript
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+```
+:::
+
+#### 带toolbar的Picker
+
+:::demo 带toolbar的Picker
+```html
+<van-picker
+  :title="title"
+  :columns="pickerColumns"
+  show-toolbar
+  @change="handlePickerChange"
+  @cancel="handlePickerCancel"
+  @confirm="handlePickerConfirm"
+></van-picker>
+```
+
+```javascript
+const citys = {
+  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
+  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+};
+
+export default {
+  data() {
+    return {
+      title: '地区选择',
+      pickerColumns: [
+        {
+          values: Object.keys(citys),
+          className: 'column1'
+        },
+        {
+          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    handlePickerChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    },
+    handlePickerCancel() {
+      alert('picker cancel');
+    },
+    handlePickerConfirm() {
+      alert('picker confirm');
+    }
+  }
+};
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
+| itemHeight | 选中元素区高度 | `Number` | `44` | |
+| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
+| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
+| title | 在toolbar上显示的标题文字 | `String` | | |
+
+### columns
+
+`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+
+| key | Description |
+|-----------|-----------|
+| values | 列中对应的备选值 |
+| defaultIndex | 初始选中值的索引，默认为0 |
+| className | 为对应列添加特殊的`class` |
+
+### change事件
+
+在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
+
+| 函数 | Description |
+|-----------|-----------|
+| getColumnValue(index) | 获取对应列中选中的值 |
+| setColumnValue(index, value) | 设置对应列中选中的值 |
+| getColumnValues(index) | 获取对应列中所有的备选值 |
+| setColumnValues(index, values) | 设置对应列中所有的备选值 |
+| getValues() | 获取所有列中被选中的值，返回一个数组 |
+| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
diff --git a/docs/examples-docs/en-US/popup.md b/docs/examples-docs/en-US/popup.md
new file mode 100644
index 000000000..ce6764582
--- /dev/null
+++ b/docs/examples-docs/en-US/popup.md
@@ -0,0 +1,136 @@
+<script>
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false,
+      popupShow5: false
+    }
+  },
+
+  watch: {
+    popupShow3(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow3 = false;
+        }, 2000);
+      }
+    }
+  },
+
+  methods: {
+    showDialog() {
+      Dialog.confirm({
+        title: 'confirm标题',
+        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
+      }).then((action) => {
+        console.log(action);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
+
+## Popup
+
+### Install
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
+### Usage
+
+#### Basic Usage
+
+`popup`默认情况下是从中间弹出。
+
+:::demo Basic Usage
+```html
+<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
+<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
+  从中间弹出popup
+</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      popupShow1: false
+    }
+  }
+};
+```
+:::
+
+#### 从不同位置弹出层
+
+可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
+
+:::demo 从不同位置弹出层
+```html
+<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
+<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
+  <van-button @click="showDialog">弹出dialog</van-button>
+</van-popup>
+
+<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
+<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
+  更新成功
+</van-popup>
+
+<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
+<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
+  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
+</van-popup>
+
+
+<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
+<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
+  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
+</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      popupShow1: false,
+      popupShow2: false,
+      popupShow3: false,
+      popupShow4: false
+    }
+  },
+
+  watch: {
+    popupShow2(val) {
+      if (val) {
+        setTimeout(() => {
+          this.popupShow2 = false;
+        }, 2000);
+      }
+    }
+  }
+};
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
+| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
+| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
+| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
+| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
+| transition | 弹出层的`transition` | `String` | `popup-slide` | |
+| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
diff --git a/docs/examples-docs/en-US/progress.md b/docs/examples-docs/en-US/progress.md
new file mode 100644
index 000000000..dbd3b1f28
--- /dev/null
+++ b/docs/examples-docs/en-US/progress.md
@@ -0,0 +1,56 @@
+## Progress
+
+### Install
+``` javascript
+import { Progress } from 'vant';
+
+Vue.component(Progress.name, Progress);
+```
+
+### Usage
+
+#### Basic Usage
+
+进度条默认为蓝色，使用`percentage`属性来设置当前进度
+
+:::demo Basic Usage
+```html
+<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="100"></van-progress>
+```
+:::
+
+
+#### 进度条置灰
+
+:::demo 进度条置灰
+```html
+<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="100"></van-progress>
+```
+:::
+
+
+#### 样式定制
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+:::demo 样式定制
+```html
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| inactive | 是否置灰 | `Boolean` | `false` | |
+| percentage | 进度百分比 | `Number` | `false` | `0-100` |
+| pivotText | 文字显示 | `String` | 百分比文字 | - |
+| color | 进度条颜色 | `String` | `#38f` | hexvalue |
+| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
diff --git a/docs/examples-docs/en-US/pull-refresh.md b/docs/examples-docs/en-US/pull-refresh.md
new file mode 100644
index 000000000..4256162bd
--- /dev/null
+++ b/docs/examples-docs/en-US/pull-refresh.md
@@ -0,0 +1,93 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    }
+  },
+
+  watch: {
+    isLoading() {
+      if (this.isLoading) {
+        setTimeout(() => {
+          Toast('刷新成功');
+          this.isLoading = false;
+          this.count++;
+        }, 500);
+      }
+    }
+  },
+
+  mounted() {
+    const head = document.querySelector('.van-pull-refresh__head');
+    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh 下拉刷新</h1>');
+  }
+}
+</script>
+
+## PullRefresh
+
+### Install
+``` javascript
+import { PullRefresh } from 'vant';
+
+Vue.component(PullRefresh.name, PullRefresh);
+```
+
+### Usage
+
+:::demo  
+```html
+<!-- 通过 v-model 控制加载状态 -->
+<van-pull-refresh v-model="isLoading">
+  <p>刷新次数: {{ count }}</p>
+</van-pull-refresh>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    }
+  },
+
+  watch: {
+    isLoading() {
+      if (this.isLoading) {
+        setTimeout(() => {
+          Toast('刷新成功');
+          this.isLoading = false;
+          this.count++;
+        }, 500);
+      }
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否在加载中 | `Boolean` | - | - |
+| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
+| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
+| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
+| animationDuration | 动画时长 | `Number` | `300` | - |
+| headHeight | 顶部内容高度 | `Number` | `50` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | 自定义内容 |
+| normal | 非下拉状态时顶部内容 |
+| pulling | 下拉过程中顶部内容 |
+| loosing | 释放过程中顶部内容 |
+| loading | 加载过程中顶部内容 |
diff --git a/docs/examples-docs/en-US/search.md b/docs/examples-docs/en-US/search.md
new file mode 100644
index 000000000..2f8635192
--- /dev/null
+++ b/docs/examples-docs/en-US/search.md
@@ -0,0 +1,101 @@
+<script>
+export default {
+  data() {
+    return {
+      search: '',
+      basicSearch: '',
+      slotSearch: ''
+    };
+  },
+
+  methods: {
+    goSearch() {
+      alert(this.search);
+    },
+    goSlotSearch() {
+      alert(this.slotSearch);
+    },
+    handleCancel() {
+      alert('cancel');
+    }
+  }
+};
+</script>
+
+## Search
+
+### Install
+``` javascript
+import { Search } from 'vant';
+
+Vue.component(Search.name, Search);
+```
+
+### Usage
+
+#### Basic Usage
+
+`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
+
+:::demo Basic Usage
+```html
+<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search>
+```
+:::
+
+#### 监听对应事件
+
+`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
+
+Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
+
+:::demo 监听对应事件
+```html
+<form action="/">
+  <van-search
+    placeholder="请输入商品名称"
+    v-model="search"
+    :show-action="true"
+    @search="goSearch"
+    @cancel="handleCancel"></van-search>
+</form>
+```
+:::
+
+#### 自定义行动按钮
+
+`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
+
+:::demo 自定义行动按钮
+```html
+<van-search
+  v-model="slotSearch"
+  :show-action="true"
+  @search="goSlotSearch">
+  <template slot="action">
+    <div class="demo-search-action" @click="goSlotSearch">搜索</div>
+  </template>    
+</van-search>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| placeholder | `input`的`placeholder`文案 | `String` | | |
+| background | 搜索框背景色 | `String` |     `#f2f2f2` |  所有浏览器支持的颜色描述 |
+| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` |     false | |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| cancel | 取消搜索 | - |
+| search | 确定搜索 | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
diff --git a/docs/examples-docs/en-US/sku.md b/docs/examples-docs/en-US/sku.md
new file mode 100644
index 000000000..c50044ad9
--- /dev/null
+++ b/docs/examples-docs/en-US/sku.md
@@ -0,0 +1,227 @@
+## Sku
+
+<script>
+import data from '../../mock/sku';
+
+const goods = data.goods_info;
+goods.picture = goods.picture[0];
+
+export default {
+  data() {
+    return {
+      showBase: false,
+      showCustomAction: false,
+      sku: data.sku,
+      goods: goods,
+      goodsId: data.goods_id,
+      quota: data.quota,
+      quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
+      initialSku: {
+        s1: '30349',
+        s2: '1193'
+      }
+    }
+  },
+
+  methods: {
+    handleBuyClicked(data) {
+      alert(JSON.stringify(data));
+    },
+    handleAddCartClicked(data) {
+      alert(JSON.stringify(data));
+    },
+    handlePointClicked() {
+      alert('积分兑换');
+    }
+  }
+}
+</script>
+
+### Install
+```javascript
+import { Sku } from 'vant';
+
+Vue.component(Sku.name, Sku);
+```
+
+### Usage
+#### Basic Usage
+:::demo 
+```html
+<template>
+  <div class="sku-container">
+    <van-sku
+      v-model="showBase"
+      :sku="sku"
+      :goods="goods"
+      :goods-id="goodsId"
+      :hide-stock="sku.hide_stock"
+      :quota="quota"
+      :quota-used="quotaUsed"
+      :reset-stepper-on-hide="resetStepperOnHide"
+      :disable-stepper-input="disableStepperInput"
+      @buy-clicked="handleBuyClicked"
+      @add-cart="handleAddCartClicked"
+    >
+    </van-sku>
+    <van-button type="primary" @click="showBase = true" block>基础用法</van-button>
+  </d>
+</template>
+```
+:::
+
+#### 自定义sku slot区块
+:::demo 
+```html
+<template>
+  <div class="sku-container">
+    <van-sku
+      v-model="showCustomAction"
+      stepper-title="我要买"
+      :sku="sku"
+      :goods="goods"
+      :goods-id="goodsId"
+      :hide-stock="sku.hide_stock"
+      :show-add-cart-btn="true"
+      :quota="quota"
+      :quota-used="quotaUsed"
+      :reset-stepper-on-hide="true"
+      :initial-sku="initialSku"
+      @buy-clicked="handleBuyClicked"
+      @add-cart="handleAddCartClicked"
+    >
+      <!-- 隐藏sku messages -->
+      <template slot="sku-messages"></template>
+      <!-- 自定义sku actions -->
+      <template slot="sku-actions" slot-scope="props">
+        <div class="van-sku-actions">
+          <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+            积分兑换
+          </button>
+          <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+          <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+            买买买
+          </button>
+        </div>
+      </template>
+    </van-sku>
+    <van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
+  </d>
+</template>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否显示sku | Boolean | false |    是 |
+| sku | 商品sku数据 | Object | - |    是 |
+| goods | 商品信息 | Object | - |  是 |
+| goodsId | 商品id | String/Number | - |  是 |
+| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
+| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true |  否 |
+| quota | 限购数(0表示不限购) | Number | 0 |  否 |
+| quotaUsed | 已经购买过的数量 | Number | 0 |  否 |
+| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false |  否 |
+| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
+| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' |  否 |
+| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - |  否 |
+| buy-clicked | 点击购买回调 | Function(skuData: Object) | - |  否 |
+
+### slots
+sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
+
+| 名称 | Description | 
+|-----------|-----------|
+| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
+| sku-group | 商品sku展示区 |
+| extra-sku-group | 额外商品sku展示区，一般用不到 |
+| sku-stepper | 商品数量选择区 |
+| sku-messages | 商品留言区 |
+| sku-actions | 操作按钮区 |
+
+#### Data Structure
+#### sku对象结构
+```javascript
+"sku": {
+    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
+    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
+    "tree": [{ 
+        "k": "颜色", // skuKeyName：规格类目名称 
+        "v": [{
+            "id": "30349", // skuValueId：规格值id 
+            "name": "红色", // skuValueName：规格值名称 
+            "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
+        }, {
+            "id": "1215",
+            "name": "蓝色",
+            "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
+        }],
+        "k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id 
+    }, ...],
+    // 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
+    "list": [{
+        "id": 2259, // skuId，下单时后端需要
+        "price": 100, // 价格（单位分）
+        "s1": "1215", // 规格类目k_s为s1的对应规格值id
+        "s2": "1193",  // 规格类目k_s为s2的对应规格值id
+        "s3": "0", // 最多包含3个规格值，为0表示不存在该规格
+        "stock_num": 110 // 当前sku组合对应的库存
+    }, ...],
+    "price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
+    "stock_num": 227, // 商品总库存
+    "collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
+    "none_sku": false, // 是否无规格商品
+    "messages": [{ // 商品留言
+        "datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
+        "multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
+        "name": "留言", // 留言名称
+        "type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
+        "required": "1" // 是否必填 “1”表示必填
+    }, ...],
+    "hide_stock": false // 是否隐藏剩余库存
+},
+```
+
+#### goods对象结构
+```javascript
+"goods": {
+    // 商品标题
+    "title": "测试商品", 
+    // 默认商品sku缩略图
+    "picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
+},
+```
+
+#### 添加购物车和点击购买回调函数接收的skuData对象结构
+```javascript
+skuData: {
+  // 商品id
+  goodsId:"946755",
+  // 留言信息
+  messages: {
+    message_0:"12",
+    message_1:"",
+    ... // 有几个留言就有几条
+  },
+  // 另一种格式的留言，key不同
+  cartMessages: {
+    '留言1': 'xxxx',
+    ... // key是message的name
+  },
+  // 选择的商品数量
+  selectedNum:1,
+  // 选择的sku组合
+  selectedSkuComb: {
+    id:2257,
+    price:100,
+    s1:"30349",
+    s2:"1193",
+    s3:"0",
+    stock_num:111
+  }
+}
+```
diff --git a/docs/examples-docs/en-US/stepper.md b/docs/examples-docs/en-US/stepper.md
new file mode 100644
index 000000000..19df9b89d
--- /dev/null
+++ b/docs/examples-docs/en-US/stepper.md
@@ -0,0 +1,68 @@
+<script>
+export default {
+  data() {
+    return {
+      stepper1: 1,
+      stepper2: null,
+    };
+  }
+};
+</script>
+
+## Stepper
+
+### Install
+``` javascript
+import { Stepper } from 'vant';
+
+Vue.component(Stepper.name, Stepper);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-stepper v-model="stepper1"></van-stepper>
+<p class="curr-stepper">当前值：{{ stepper1 }}</p>
+```
+:::
+
+#### Disabled
+通过设置`disabled`属性来禁用 stepper
+
+:::demo 禁用状态
+```html
+<van-stepper v-model="stepper1" disabled></van-stepper>
+```
+:::
+
+#### Advanced Usage
+
+默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
+
+:::demo Advanced Usage
+```html
+<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
+<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| min | 最小值 | `String | Number` | `1` | - |
+| max | 最大值 | `String | Number` | - | - |
+| defaultValue | Default | `String | Number` | `1` | - |
+| step | 步数 | `String | Number` | `1` | - |
+| disabled | 是否禁用 | `Boolean` | `false` | - | 
+| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前组件的值 |
+| overlimit | 点击不可用的按钮时触发 | - |
diff --git a/docs/examples-docs/en-US/steps.md b/docs/examples-docs/en-US/steps.md
new file mode 100644
index 000000000..172fb68e2
--- /dev/null
+++ b/docs/examples-docs/en-US/steps.md
@@ -0,0 +1,137 @@
+<script>
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      this.active = ++this.active % 4;
+    }
+  }
+}
+</script>
+
+## Steps
+
+### Install
+``` javascript
+import { Step, Steps } from 'vant';
+
+Vue.component(Step.name, Step);
+Vue.component(Steps.name, Steps);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-steps :active="active">
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
+
+<van-button @click="nextStep">下一步</van-button>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  },
+
+  methods: {
+    nextStep() {
+      this.active = ++this.active % 4;
+    }
+  }
+}
+```
+:::
+
+#### 物流描述
+
+通过`title`和`description`属性来定义物流描述信息
+
+:::demo 物流描述
+```html
+<van-steps
+  :active="active"
+  icon="logistics"
+  icon-class="steps-success"
+  title="等待商家发货"
+  description="物流描述"
+>
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>
+</van-steps>
+```
+:::
+
+#### 竖向步骤条
+
+可以通过设置`direction`属性来改变步骤条的显示方式
+
+:::demo 竖向步骤条
+```html
+<van-steps direction="vertical" :active="0" active-color="#f60">
+  <van-step>
+    <h3>【城市】物流状态1</h3>
+    <p>2016-07-12 12:40</p>
+  </van-step>
+  <van-step>
+    <h3>【城市】物流状态2</h3>
+    <p>2016-07-11 10:00</p>
+  </van-step>
+  <van-step>
+    <h3>快件已发货</h3>
+    <p>2016-07-10 09:30</p>
+  </van-step>
+</van-steps>
+```
+:::
+
+### #### Advanced Usage
+使用`slot`增加自定义内容
+
+:::demo Advanced Usage
+```html
+<van-steps :active="active" title="等待商家发货">
+  <van-icon slot="icon" name="location"></van-icon>
+  <p slot="message-extra">物流进度</p>
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>  
+</van-steps>
+```
+:::
+
+### Steps API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| active | 当前步骤，起始值为0 | `Number` | | |
+| icon | 当前步骤的icon | `String` | | |
+| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
+| title | 当前步骤从标题 | `String` | | |
+| description | 当前步骤描述 | `String` | | |
+| direction | 显示方向 | `String` | `horizontal` | `vertical` |
+| activeColor | active状态颜色 | `String` | `#06bf04` | |
+
+### Steps Slot
+
+| 名称 | Description |
+|-----------|-----------|
+| icon | 自定义icon区域 |
+| message-extra | 状态栏添加额外的元素 |
diff --git a/docs/examples-docs/en-US/submit-bar.md b/docs/examples-docs/en-US/submit-bar.md
new file mode 100644
index 000000000..4a4acd884
--- /dev/null
+++ b/docs/examples-docs/en-US/submit-bar.md
@@ -0,0 +1,115 @@
+## SubmitBar
+
+<script>
+import { Toast } from 'packages';
+
+export default {
+  methods: {
+    onClickButton() {
+      Toast('点击按钮');
+    },
+    onClickEditAddress() {
+      Toast('修改地址');
+    }
+  }
+}
+</script>
+
+<style>
+.demo-submit-bar {
+  .van-submit-bar {
+    position: relative;
+  }
+  .van-edit-address {
+    color: #38F;
+  }
+}
+</style>
+
+### Install
+``` javascript
+import { SubmitBar } from 'vant';
+
+Vue.component(SubmitBar.name, SubmitBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-submit-bar
+  :price="3050"
+  button-text="提交订单"
+  @submit="onClickButton"
+/>
+```
+:::
+
+#### Disabled
+禁用状态下不会触发`submit`事件
+
+:::demo 禁用状态
+```html
+<van-submit-bar
+  disabled
+  :price="3050"
+  button-text="提交订单"
+  tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+  @submit="onClickButton"
+/>
+```
+:::
+
+#### Loading
+加载状态下不会触发`submit`事件
+:::demo 加载状态
+```html
+<van-submit-bar
+  loading
+  :price="3050"
+  button-text="提交订单"
+  @submit="onClickButton"
+/>
+```
+:::
+
+#### 
+提示文案中的额外操作和说明
+:::demo 提示文案中添加操作
+```html
+<van-submit-bar
+  :price="3050"
+  button-text="提交订单"
+  @submit="onClickButton"
+>
+  <span slot="tip">
+    您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
+  </span>
+</van-submit-bar>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| price | 价格（单位分） |  `Number` | | 是 |
+| button-text | 按钮文字 | `String` | | 是 |
+| button-type | 按钮类型 |  `String` | `danger` | 否 |
+| tip | 提示文案 |  `String` | | 否 |
+| disabled | 是否禁用按钮 |  `Boolean` | `false` | 否 |
+| loading | 是否显示加载中的按钮 |  `Boolean` | `false` | 否 |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| submit | 按钮点击事件回调 | - |
+
+### Slot
+
+| 名称 | Description |
+|-----------|-----------|
+| tip | 提示文案中的额外操作和说明 |
diff --git a/docs/examples-docs/en-US/swipe.md b/docs/examples-docs/en-US/swipe.md
new file mode 100644
index 000000000..5f80e6ef7
--- /dev/null
+++ b/docs/examples-docs/en-US/swipe.md
@@ -0,0 +1,80 @@
+<script>
+export default {
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ]
+    };
+  }
+};
+</script>
+
+## Swipe
+
+### Install
+``` javascript
+import { Swipe, SwipeItem } from 'vant';
+
+Vue.component(Swipe.name, Swipe);
+Vue.component(SwipeItem.name, SwipeItem);
+```
+
+### Usage
+
+#### Basic Usage
+通过`autoplay`属性设置自动轮播间隔
+
+:::demo Basic Usage
+```html
+<van-swipe :autoplay="3000">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+</van-swipe>
+```
+:::
+
+#### 图片懒加载
+配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载
+
+:::demo 图片懒加载
+```html
+<van-swipe>
+  <van-swipe-item v-for="(image, index) in images" :key="index">
+    <img v-lazy="image" />
+  </van-swipe-item>
+</van-swipe>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
+| duration | 动画时长，单位为 ms | `Number` | `500` | - |
+| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
+
+### 事件
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | 每一页轮播结束后触发 | index, 当前页的索引 |
diff --git a/docs/examples-docs/en-US/switch-cell.md b/docs/examples-docs/en-US/switch-cell.md
new file mode 100644
index 000000000..46c06d361
--- /dev/null
+++ b/docs/examples-docs/en-US/switch-cell.md
@@ -0,0 +1,79 @@
+## SwitchCell
+
+`SwitchCell`组件是对`Switch`和`Cell`组件的封装
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
+
+### Install
+``` javascript
+import { SwitchCell } from 'vant';
+
+Vue.component(SwitchCell.name, SwitchCell);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" title="标题" />
+</van-cell-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+```
+:::
+
+#### Disabled
+通过`disabled`属性可以将组件设置为禁用状态
+
+:::demo 禁用状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :disabled="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+#### Loading
+通过`loading`属性可以将组件设置为加载状态
+
+:::demo 加载状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :loading="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 开关状态 | `Boolean` | | |
+| title | 左侧标题 |  `String` | `''` | |
+| loading | 是否为加载状态 |  `Boolean` | `false` | |
+| disabled | 是否为禁用状态 |  `Boolean` | `false` | |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | 开关状态切换回调 | checked: 是否选中开关 |
\ No newline at end of file
diff --git a/docs/examples-docs/en-US/switch.md b/docs/examples-docs/en-US/switch.md
index b42062673..6868d48fd 100644
--- a/docs/examples-docs/en-US/switch.md
+++ b/docs/examples-docs/en-US/switch.md
@@ -102,8 +102,8 @@ export default {
 | 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` | - |
+| loading | Whether to show loading icon | `Boolean` | `false` | - |
+| disabled | Disable switch | `Boolean` | `false` | - |
 
 ### Event
 
diff --git a/docs/examples-docs/en-US/tab.md b/docs/examples-docs/en-US/tab.md
new file mode 100644
index 000000000..1cd92a810
--- /dev/null
+++ b/docs/examples-docs/en-US/tab.md
@@ -0,0 +1,230 @@
+<script>
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.active = 3;
+    }, 1000);
+  },
+  methods: {
+    popalert() {
+      alert('haha')
+    },
+
+    handleTabClick(index) {
+      alert(index);
+    }
+  }
+};
+</script>
+
+## Tab
+
+### Install
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+### Usage
+
+#### Basic Usage
+
+默认情况下是启用第一个`tab`。
+
+:::demo Basic Usage
+```html
+<van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+</van-tabs>
+```
+:::
+
+#### active特定tab
+
+可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
+
+:::demo Basic Usage
+```html
+<van-tabs :active="active">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+</van-tabs>
+```
+:::
+
+#### 设置切换tab的动画时间
+
+通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
+
+:::demo 设置切换tab的动画时间
+```html
+<van-tabs :duration="0.6">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+</van-tabs>
+```
+:::
+
+#### 横向滚动tab
+
+默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
+
+:::demo 横向滚动tab
+```html
+<van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+  <van-tab title="选项五">内容五</van-tab>
+  <van-tab title="选项六">内容六</van-tab>
+  <van-tab title="选项七">内容七</van-tab>
+  <van-tab title="选项八">内容八</van-tab>
+</van-tabs>
+```
+:::
+
+#### 禁用tab
+
+在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
+
+:::demo 禁用tab
+```html
+<van-tabs>
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    popalert() {
+      alert('haha')
+    }
+  }
+};
+```
+:::
+
+#### card样式
+
+`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
+
+:::demo card样式
+```html
+<van-tabs type="card">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+</van-tabs>
+```
+:::
+<style>
+  .custom-tabwrap .van-tab-active {
+    color: #20a0ff;
+  }
+  .custom-tabwrap .van-tabs-nav-bar {
+    background: #20a0ff;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+</style>
+
+#### 自定义样式
+
+可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
+
+:::demo 自定义样式
+```html
+<van-tabs active="2" class="custom-tabwrap">
+    <van-tab title="选项一" class="custom-pane">内容一</van-tab>
+    <van-tab title="选项二" class="custom-pane">内容二</van-tab>
+    <van-tab title="选项三" class="custom-pane">内容三</van-tab>
+    <van-tab title="选项四" class="custom-pane">内容四</van-tab>
+</van-tabs>
+
+<style>
+  .custom-tabwrap .van-tab-active {
+    color: #20a0ff;
+  }
+  .custom-tabwrap .van-tabs-nav-bar {
+    background: #20a0ff;
+  }
+  .custom-pane {
+    text-align: center;
+    height: 50px;
+    line-height: 50px;
+  }
+</style>
+```
+:::
+
+#### click事件
+
+可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
+
+:::demo click事件
+```html
+<van-tabs @click="handleTabClick">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+  <van-tab title="选项四">内容四</van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    handleTabClick(index) {
+      alert(index);
+    }
+  }
+};
+```
+:::
+
+### van-tabs API
+
+| Attribute | Description | Type | Default | 可选 |
+|-----------|-----------|-----------|-------------|-------------|
+| classtype | 两种UI | `String` | `line` |     `line`, `card` |
+| active | 默认激活的tab | `String`, `Number` | `0` | |
+| navclass | tabs的内部nav上的自定义classname | `String` | | |
+| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
+
+
+### van-tab API
+
+| Attribute | Description | Type | Default | 可选 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | tab的标题 | `String` | | |
+| disabled | 是否禁用这个tab | `Boolean` | `false` | |
+
+### van-tabs Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click | 某个tab点击事件 | index：点击的`tab`的索引 |
+| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
+
diff --git a/docs/examples-docs/en-US/tabbar.md b/docs/examples-docs/en-US/tabbar.md
new file mode 100644
index 000000000..effb13e1e
--- /dev/null
+++ b/docs/examples-docs/en-US/tabbar.md
@@ -0,0 +1,98 @@
+## Tabbar
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    }
+  }
+}
+</script>
+
+### Install
+``` javascript
+import { Tabbar, TabbarItem } from 'vant';
+
+Vue.component(Tabbar.name, Tabbar);
+Vue.component(TabbarItem.name, TabbarItem);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="shop">标签</van-tabbar-item>
+  <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+```
+:::
+
+#### 自定义图标
+通过 icon slot 自定义图标
+
+:::demo 自定义图标
+```html
+<van-tabbar v-model="active2">
+  <van-tabbar-item icon="shop">
+    <span>自定义</span>
+    <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
+  </van-tabbar-item>
+  <van-tabbar-item icon="chat">标签</van-tabbar-item>
+  <van-tabbar-item icon="records">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active2: 0,
+      icon: {
+        normal: '//img.yzcdn.cn/1.png',
+        active: '//img.yzcdn.cn/2.png'
+      }
+    }
+  }
+}
+```
+:::
+
+### Tabbar API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中标签的索引 | `Number` | - | - |
+
+### Tabbar Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | 切换标签时触发 | active: 当前选中标签 |
+
+### TabbarItem API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
+| dot | 是否显示小红点 | `Boolean` | - | - |
diff --git a/docs/examples-docs/en-US/tag.md b/docs/examples-docs/en-US/tag.md
new file mode 100644
index 000000000..080fdda91
--- /dev/null
+++ b/docs/examples-docs/en-US/tag.md
@@ -0,0 +1,59 @@
+## Tag
+
+### Install
+``` javascript
+import { Tag } from 'vant';
+
+Vue.component(Tag.name, Tag);
+```
+
+### Usage
+
+#### Basic Usage
+通过 type 属性控制 Tag 颜色，默认为灰色
+:::demo Basic Usage
+```html
+<van-tag>标签</van-tag>
+<van-tag type="danger">标签</van-tag>
+<van-tag type="success">标签</van-tag>
+<van-tag type="primary">标签</van-tag>
+```
+:::
+
+#### 空心样式
+设置`plain`属性设置为空心样式
+
+:::demo 空心样式
+```html
+<van-tag plain>标签</van-tag>
+<van-tag plain type="danger">标签</van-tag>
+<van-tag plain type="primary">标签</van-tag>
+<van-tag plain type="success">标签</van-tag>
+```
+:::
+
+#### 标记样式
+通过`mark`设置为标记样式
+
+:::demo 标记样式
+```html
+<van-tag mark>标签</van-tag>
+<van-tag mark type="danger">标签</van-tag>
+<van-tag mark type="primary">标签</van-tag>
+<van-tag mark type="success">标签</van-tag>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `''`| `primary` `success` `danger` |
+| plain | 是否为空心样式 | `Boolean` | `false` | |
+| mark | 是否为标记样式 | `Boolean` | `false` | |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | 自定义 Tag 显示内容 |
diff --git a/docs/examples-docs/en-US/toast.md b/docs/examples-docs/en-US/toast.md
new file mode 100644
index 000000000..ee3c47aa6
--- /dev/null
+++ b/docs/examples-docs/en-US/toast.md
@@ -0,0 +1,158 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  methods: {
+    showToast() {
+      Toast('我是提示文案，建议不超过十五字~');
+    },
+    showLoadingToast() {
+      Toast.loading();
+    },
+    showSuccessToast() {
+      Toast.success('成功文案');
+    },
+    showFailToast() {
+      Toast.fail('失败文案');
+    },
+    showCustomizedToast(duration) {
+      const toast = Toast.loading({
+        duration: 0,  
+        forbidClick: true,
+        message: '倒计时 3 秒'
+      });
+
+      let second = 3;
+      const timer = setInterval(() => {
+        second--;
+        if (second) {
+          toast.message = `倒计时 ${second} 秒`;
+        } else {
+          clearInterval(timer);
+          Toast.clear();
+        }
+      }, 1000);
+    }
+  }
+};
+</script>
+
+## Toast
+
+### Install
+
+```javascript
+import { Toast } from 'vant';
+```
+
+### Usage
+
+#### 文字提示
+
+:::demo 文字提示
+```html
+<van-button @click="showToast">文字提示</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showToast() {
+      Toast('我是提示文案，建议不超过十五字~');
+    }
+  }
+}
+```
+:::
+
+#### 加载提示
+
+:::demo 加载提示
+```html
+<van-button @click="showLoadingToast">加载提示</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showLoadingToast() {
+      Toast.loading();
+    }
+  }
+}
+```
+:::
+
+#### 成功/失败提示
+
+:::demo 成功/失败提示
+```html
+<van-button @click="showSuccessToast">成功提示</van-button>
+<van-button @click="showFailToast">失败提示</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showSuccessToast() {
+      Toast.success('成功文案');
+    },
+    showFailToast() {
+      Toast.fail('失败文案');
+    }
+  }
+}
+```
+:::
+
+#### Advanced Usage
+
+:::demo Advanced Usage
+```html
+<van-button @click="showCustomizedToast">#### Advanced Usage</van-button>
+```
+
+```javascript
+export default {
+  methods: {
+    showCustomizedToast() {
+      const toast = Toast.loading({
+        duration: 0,       // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        message: '倒计时 3 秒'
+      });
+
+      let second = 3;
+      const timer = setInterval(() => {
+        second--;
+        if (second) {
+          toast.message = `倒计时 ${second} 秒`;
+        } else {
+          clearInterval(timer);
+          Toast.clear();
+        }
+      }, 1000);
+    }
+  }
+};
+```
+:::
+
+### 方法
+
+| 方法名 | Attribute | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| Toast | `options | message` | toast 实例 | 展示提示 |
+| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
+| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
+| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
+| Toast.clear | - | `void` | 关闭提示 |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
+| message | 内容 | `String` | `''` | - |
+| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
+| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
diff --git a/docs/examples-docs/en-US/tree-select.md b/docs/examples-docs/en-US/tree-select.md
new file mode 100644
index 000000000..165afce10
--- /dev/null
+++ b/docs/examples-docs/en-US/tree-select.md
@@ -0,0 +1,168 @@
+<script>
+
+export default {
+  data() {
+    return {
+      items: [{
+        text: '所有城市',
+        children: [{
+          text: '杭州',
+          id: 1001
+        }, {
+          text: '温州',
+          id: 1002
+        }, {
+          text: '海南',
+          id: 1100
+        }, {
+          text: '宁波',
+          id: 1003
+        }, {
+          text: '义乌',
+          id: 1004
+        }, {
+          text: '无锡',
+          id: 1011
+        }, {
+          text: '常州',
+          id: 1012
+        }, {
+          text: '大连',
+          id: 1031
+        }, {
+          text: '诸暨',
+          id: 1005
+        }]
+      }, {
+        text: '浙江',
+        children: [{
+          text: '杭州',
+          id: 1001
+        }, {
+          text: '温州',
+          id: 1002
+        }, {
+          text: '宁波',
+          id: 1003
+        }, {
+          text: '义乌',
+          id: 1004
+        }]
+      }, {
+        text: '江苏',
+        children: [{
+          text: '无锡',
+          id: 1011
+        }, {
+          text: '常州',
+          id: 1012
+        }]
+      }],
+      mainActiveIndex: 0,
+      activeId: 1001
+    };
+  },
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      console.log(data);
+      this.activeId = data.id;
+    }
+  }
+}
+</script>
+
+## TreeSelect
+
+### Install
+``` javascript
+import { TreeSelect } from 'vant';
+
+Vue.component(TreeSelect.name, TreeSelect);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-tree-select
+  :items="items"
+  :main-active-index="mainActiveIndex"
+  :active-id="activeId"
+  @navclick="onNavClick"
+  @itemclick="onItemClick"
+></van-tree-select>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      items: items,
+      // 左侧高亮元素的index
+      mainActiveIndex: 0,
+      // 被选中元素的id
+      activeId: 1001
+    };
+  },
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      console.log(data);
+      this.activeId = data.id;
+    }
+  }
+}
+```
+:::
+
+### API
+
+#### 传入参数
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| items | 分类显示所需的数据，具体数据结构可看 数据结构 |  Array | [] | |
+| mainActiveIndex | 左侧导航高亮的索引 |  Number | 0 | |
+| activeId | 右侧选择项，高亮的数据id |  Number | 0 | |
+
+#### 事件
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| navclick | 左侧导航点击时，触发的事件 |  index：被点击的导航的索引 |
+| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
+
+### Data Structure
+#### items 分类显示所需数据的数据结构
+`items` 整体为一个数组，数组内包含一系列描述分类的 object。
+
+每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
+```javascript
+[
+  {
+    // 导航名称
+    text: '所有城市',
+    // 该导航下所有的可选项
+    children: [
+      {
+        // 可选项的名称
+        text: '温州',
+        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
+        id: 1002
+      },
+      {
+        // 可选项的名称
+        text: '杭州',
+        // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
+        id: 1001
+      }
+    ]
+  }
+]
+```
diff --git a/docs/examples-docs/en-US/uploader.md b/docs/examples-docs/en-US/uploader.md
new file mode 100644
index 000000000..635adaf3a
--- /dev/null
+++ b/docs/examples-docs/en-US/uploader.md
@@ -0,0 +1,57 @@
+<script>
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};  
+</script>
+
+## Uploader
+
+### Install
+``` javascript
+import { Uploader } from 'vant';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<div class="uploader-container">
+  <van-uploader :after-read="logContent">
+    <van-icon name="photograph"></van-icon>
+  </van-uploader>
+</div>
+```
+
+```javascript
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};  
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
+| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
+| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
+| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | 自定义上传显示图标 |
diff --git a/docs/examples-docs/en-US/waterfall.md b/docs/examples-docs/en-US/waterfall.md
new file mode 100644
index 000000000..a23ee8eea
--- /dev/null
+++ b/docs/examples-docs/en-US/waterfall.md
@@ -0,0 +1,121 @@
+## Waterfall
+
+### Install
+
+#### 全局注册
+
+`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
+
+```js
+import Vue from 'vue';
+import { Waterfall } from 'vant';
+
+Vue.use(Waterfall);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+
+```js
+import { Waterfall } from 'vant';
+
+export default {
+  directives: {
+    WaterfallLower: Waterfall('lower'),
+    WaterfallUpper: Waterfall('upper')
+  }
+};
+```
+
+### Usage
+
+<script>
+import { Waterfall } from 'packages';
+
+export default {
+  data() {
+    return {
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      loading: false,
+      finished: false
+    };
+  },
+  directives: {
+    WaterfallLower: Waterfall('lower'),
+    WaterfallUpper: Waterfall('upper')
+  },
+  methods: {
+    loadMore() {
+      if (this.list.length >= 50) {
+        this.finished = true;
+        return;
+      }
+
+      this.loading = true;
+      setTimeout(() => {
+        let lastNumber = this.list[this.list.length - 1];
+        for (let i = 0; i < 5; i ++) {
+          lastNumber += 1;
+          this.list.push(lastNumber);
+        }
+        this.loading = false;
+      }, 200);
+    }
+  },
+  computed: {
+    isWaterfallDisabled() {
+      return this.loading || this.finished;
+    }
+  }
+};
+</script>
+
+<style>
+.demo-waterfall {
+  ul {
+    max-height: 360px;
+    overflow: scroll;
+    border-top: 1px solid #e5e5e5;
+  }
+  li {
+    line-height: 50px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    text-align: center;
+  }
+  .page-desc {
+    padding: 5px 0;
+    line-height: 1.4;
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+  }
+}
+</style>
+
+#### Basic Usage
+使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
+
+注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
+:::demo Basic Usage
+```html
+<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
+<ul
+  v-waterfall-lower="loadMore"
+  waterfall-disabled="isWaterfallDisabled"
+  waterfall-offset="400">
+  <li v-for="(item, index) in list">{{ item }}</li>
+</ul>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
+| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
+| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | |
+| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |
+
diff --git a/docs/examples-docs/zh-CN/image-preview.md b/docs/examples-docs/zh-CN/image-preview.md
index 962cfd7af..5a5b337ba 100644
--- a/docs/examples-docs/zh-CN/image-preview.md
+++ b/docs/examples-docs/zh-CN/image-preview.md
@@ -4,6 +4,11 @@
     margin-left: 15px;
   }
 }
+.van-image-preview {
+  img {
+    pointer-events: none;
+  }
+}
 </style>
 
 <script>
diff --git a/docs/examples-docs/zh-CN/lazyload.md b/docs/examples-docs/zh-CN/lazyload.md
index 5f23a0792..312af0331 100644
--- a/docs/examples-docs/zh-CN/lazyload.md
+++ b/docs/examples-docs/zh-CN/lazyload.md
@@ -15,6 +15,11 @@
     background-repeat: no-repeat;
     box-sizing: border-box;
   }
+
+  .zan-doc-demo-block__title,
+  .zan-doc-demo-block__subtitle {
+    padding-left: 0;
+  }
 }
 </style>
 
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 9c575bce2..a52174038 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 module.exports = {
-  "zh-CN": {
+  'zh-CN': {
     header: {
       Github: 'https://github.com/youzan/vant',
       English: '#/en-US/'
@@ -8,30 +8,31 @@ module.exports = {
     footer: {
       github: 'https://github.com/youzan/vant',
       nav: {
-        'React': 'https://www.youzanyun.com/zanui/react',
-        '微信小程序': 'https://github.com/youzan/zanui-weapp',
-        '意见反馈': 'https://github.com/youzan/vant/issues',
-        '开发指南': 'https://github.com/youzan/vant/blob/dev/docs/examples-docs/zh-CN/contribute.md'
+        React: 'https://www.youzanyun.com/zanui/react',
+        微信小程序: 'https://github.com/youzan/zanui-weapp',
+        意见反馈: 'https://github.com/youzan/vant/issues',
+        开发指南:
+          'https://github.com/youzan/vant/blob/dev/docs/examples-docs/zh-CN/contribute.md'
       }
     },
     nav: [
       {
-        "name": "开发指南",
-        "groups": [
+        name: '开发指南',
+        groups: [
           {
-            "list": [
+            list: [
               {
-                "path": "/quickstart",
-                "title": "快速上手",
+                path: '/quickstart',
+                title: '快速上手',
                 noExample: true
               },
               {
-                "title": "业务组件",
-                "link": "/zanui/captain/component/quickstart"
+                title: '业务组件',
+                link: '/zanui/captain/component/quickstart'
               },
               {
-                "path": "/changelog",
-                "title": "更新日志",
+                path: '/changelog',
+                title: '更新日志',
                 noExample: true
               }
             ]
@@ -39,215 +40,215 @@ module.exports = {
         ]
       },
       {
-        "name": "组件",
-        "showInMobile": true,
-        "groups": [
+        name: '组件',
+        showInMobile: true,
+        groups: [
           {
-            "groupName": "基础组件",
-            "list": [
+            groupName: '基础组件',
+            list: [
               {
-                "path": "/layout",
-                "title": "Layout - 布局"
+                path: '/layout',
+                title: 'Layout - 布局'
               },
               {
-                "path": "/badge",
-                "title": "Badge - 徽章"
+                path: '/badge',
+                title: 'Badge - 徽章'
               },
               {
-                "path": "/button",
-                "title": "Button - 按钮"
+                path: '/button',
+                title: 'Button - 按钮'
               },
               {
-                "path": "/card",
-                "title": "Card - 卡片"
+                path: '/card',
+                title: 'Card - 卡片'
               },
               {
-                "path": "/cell",
-                "title": "Cell - 单元格"
+                path: '/cell',
+                title: 'Cell - 单元格'
               },
               {
-                "path": "/icon",
-                "title": "Icon - 图标"
+                path: '/icon',
+                title: 'Icon - 图标'
               },
               {
-                "path": "/image-preview",
-                "title": "ImagePreview - 图片预览"
+                path: '/image-preview',
+                title: 'ImagePreview - 图片预览'
               },
               {
-                "path": "/lazyload",
-                "title": "Lazyload - 图片懒加载"
+                path: '/lazyload',
+                title: 'Lazyload - 图片懒加载'
               },
               {
-                "path": "/loading",
-                "title": "Loading - 加载"
+                path: '/loading',
+                title: 'Loading - 加载'
               },
               {
-                "path": "/nav-bar",
-                "title": "NavBar - 导航栏"
+                path: '/nav-bar',
+                title: 'NavBar - 导航栏'
               },
               {
-                "path": "/notice-bar",
-                "title": "NoticeBar - 通告栏"
+                path: '/notice-bar',
+                title: 'NoticeBar - 通告栏'
               },
               {
-                "path": "/panel",
-                "title": "Panel - 面板"
+                path: '/panel',
+                title: 'Panel - 面板'
               },
               {
-                "path": "/popup",
-                "title": "Popup - 弹出层"
+                path: '/popup',
+                title: 'Popup - 弹出层'
               },
               {
-                "path": "/progress",
-                "title": "Progress - 进度条"
+                path: '/progress',
+                title: 'Progress - 进度条'
               },
               {
-                "path": "/search",
-                "title": "Search - 搜索"
+                path: '/search',
+                title: 'Search - 搜索'
               },
               {
-                "path": "/stepper",
-                "title": "Stepper - 步进器"
+                path: '/stepper',
+                title: 'Stepper - 步进器'
               },
               {
-                "path": "/steps",
-                "title": "Steps - 步骤条"
+                path: '/steps',
+                title: 'Steps - 步骤条'
               },
               {
-                "path": "/swipe",
-                "title": "Swipe - 轮播"
+                path: '/swipe',
+                title: 'Swipe - 轮播'
               },
               {
-                "path": "/tab",
-                "title": "Tab - 标签页"
+                path: '/tab',
+                title: 'Tab - 标签页'
               },
               {
-                "path": "/tabbar",
-                "title": "Tabbar - 标签栏"
+                path: '/tabbar',
+                title: 'Tabbar - 标签栏'
               },
               {
-                "path": "/tag",
-                "title": "Tag - 标记"
+                path: '/tag',
+                title: 'Tag - 标记'
               },
               {
-                "path": "/waterfall",
-                "title": "Waterfall - 瀑布流"
+                path: '/waterfall',
+                title: 'Waterfall - 瀑布流'
               }
             ]
           },
           {
-            "groupName": "表单",
-            "list": [
+            groupName: '表单',
+            list: [
               {
-                "path": "/checkbox",
-                "title": "Checkbox - 复选框"
+                path: '/checkbox',
+                title: 'Checkbox - 复选框'
               },
               {
-                "path": "/field",
-                "title": "Field - 输入框"
+                path: '/field',
+                title: 'Field - 输入框'
               },
               {
-                "path": "/number-keyboard",
-                "title": "NumberKeyboard - 数字键盘"
+                path: '/number-keyboard',
+                title: 'NumberKeyboard - 数字键盘'
               },
               {
-                "path": "/password-input",
-                "title": "PasswordInput - 密码输入框"
+                path: '/password-input',
+                title: 'PasswordInput - 密码输入框'
               },
               {
-                "path": "/radio",
-                "title": "Radio - 单选框"
+                path: '/radio',
+                title: 'Radio - 单选框'
               },
               {
-                "path": "/switch",
-                "title": "Switch - 开关"
+                path: '/switch',
+                title: 'Switch - 开关'
               },
               {
-                "path": "/uploader",
-                "title": "Uploader - 图片上传"
+                path: '/uploader',
+                title: 'Uploader - 图片上传'
               }
             ]
           },
           {
-            "groupName": "操作反馈",
-            "list": [
+            groupName: '操作反馈',
+            list: [
               {
-                "path": "/actionsheet",
-                "title": "Actionsheet - 行动按钮"
+                path: '/actionsheet',
+                title: 'Actionsheet - 行动按钮'
               },
               {
-                "path": "/datetime-picker",
-                "title": "DatetimePicker - 时间选择"
+                path: '/datetime-picker',
+                title: 'DatetimePicker - 时间选择'
               },
               {
-                "path": "/dialog",
-                "title": "Dialog - 弹出框"
+                path: '/dialog',
+                title: 'Dialog - 弹出框'
               },
               {
-                "path": "/picker",
-                "title": "Picker - 选择器"
+                path: '/picker',
+                title: 'Picker - 选择器'
               },
               {
-                "path": "/pull-refresh",
-                "title": "PullRefresh - 下拉刷新"
+                path: '/pull-refresh',
+                title: 'PullRefresh - 下拉刷新'
               },
               {
-                "path": "/toast",
-                "title": "Toast - 轻提示"
+                path: '/toast',
+                title: 'Toast - 轻提示'
               }
             ]
           },
           {
-            "groupName": "高阶组件",
-            "list": [
+            groupName: '高阶组件',
+            list: [
               {
-                "path": "/cell-swipe",
-                "title": "CellSwipe - 滑动单元格"
+                path: '/cell-swipe',
+                title: 'CellSwipe - 滑动单元格'
               },
               {
-                "path": "/switch-cell",
-                "title": "SwitchCell - 开关单元格"
+                path: '/switch-cell',
+                title: 'SwitchCell - 开关单元格'
               },
               {
-                "path": "/tree-select",
-                "title": "TreeSelect - 分类选择"
-              },
+                path: '/tree-select',
+                title: 'TreeSelect - 分类选择'
+              }
             ]
           },
           {
-            "groupName": "业务组件",
-            "list": [
+            groupName: '业务组件',
+            list: [
               {
-                "path": "/address-edit",
-                "title": "AddressEdit - 地址编辑"
+                path: '/address-edit',
+                title: 'AddressEdit - 地址编辑'
               },
               {
-                "path": "/address-list",
-                "title": "AddressList - 地址列表"
+                path: '/address-list',
+                title: 'AddressList - 地址列表'
               },
               {
-                "path": "/area",
-                "title": "Area - 省市区选择"
+                path: '/area',
+                title: 'Area - 省市区选择'
               },
               {
-                "path": "/contact",
-                "title": "Contact - 联系人"
+                path: '/contact',
+                title: 'Contact - 联系人'
               },
               {
-                "path": "/coupon",
-                "title": "Coupon - 优惠券选择器"
+                path: '/coupon',
+                title: 'Coupon - 优惠券选择器'
               },
               {
-                "path": "/goods-action",
-                "title": "GoodsAction - 商品页行动点"
+                path: '/goods-action',
+                title: 'GoodsAction - 商品页行动点'
               },
               {
-                "path": "/submit-bar",
-                "title": "SubmitBar - 提交订单栏"
+                path: '/submit-bar',
+                title: 'SubmitBar - 提交订单栏'
               },
               {
-                "path": "/sku",
-                "title": "Sku - 商品规格弹层"
+                path: '/sku',
+                title: 'Sku - 商品规格弹层'
               }
             ]
           }
@@ -255,85 +256,256 @@ module.exports = {
       }
     ]
   },
-  "en-US": {
+  'en-US': {
     header: {
       Github: 'https://github.com/youzan/vant',
-      '中文': '#/zh-CN'
+      中文: '#/zh-CN'
     },
     footer: {
       github: 'https://github.com/youzan/vant',
       nav: {
-        'React': 'https://www.youzanyun.com/zanui/react',
-        'Weapp': 'https://github.com/youzan/zanui-weapp',
-        'Feedback': 'https://github.com/youzan/vant/issues',
-        'Contribute': 'https://github.com/youzan/vant/blob/dev/docs/examples-docs/en-US/contribute.md'
+        React: 'https://www.youzanyun.com/zanui/react',
+        Weapp: 'https://github.com/youzan/zanui-weapp',
+        Feedback: 'https://github.com/youzan/vant/issues',
+        Contribute:
+          'https://github.com/youzan/vant/blob/dev/docs/examples-docs/en-US/contribute.md'
       }
     },
     nav: [
       {
-        "name": "Essentials",
-        "groups": [
+        name: 'Essentials',
+        groups: [
           {
-            "list": [
+            list: [
               {
-                "path": "/quickstart",
-                "title": "Getting Started",
+                path: '/quickstart',
+                title: 'Getting Started',
                 noExample: true
               },
               {
-                "path": "/changelog",
-                "title": "Changelog",
+                path: '/changelog',
+                title: 'Changelog',
                 noExample: true
               }
             ]
           }
         ]
       },
-      // translation needed
       {
-        "name": "Components",
-        "showInMobile": true,
-        "groups": [
+        name: 'Components',
+        showInMobile: true,
+        groups: [
           {
-            "groupName": "Base Components",
-            "list": [
+            groupName: 'Basic Components',
+            list: [
               {
-                "path": "/layout",
-                "title": "Layout"
+                path: '/layout',
+                title: 'Layout'
+              },
+              {
+                path: '/badge',
+                title: 'Badge'
+              },
+              {
+                path: '/button',
+                title: 'Button'
+              },
+              {
+                path: '/card',
+                title: 'Card'
+              },
+              {
+                path: '/cell',
+                title: 'Cell'
+              },
+              {
+                path: '/icon',
+                title: 'Icon'
+              },
+              {
+                path: '/image-preview',
+                title: 'ImagePreview'
+              },
+              {
+                path: '/lazyload',
+                title: 'Lazyload'
+              },
+              {
+                path: '/loading',
+                title: 'Loading'
+              },
+              {
+                path: '/nav-bar',
+                title: 'NavBar'
+              },
+              {
+                path: '/notice-bar',
+                title: 'NoticeBar'
+              },
+              {
+                path: '/panel',
+                title: 'Panel'
+              },
+              {
+                path: '/popup',
+                title: 'Popup'
+              },
+              {
+                path: '/progress',
+                title: 'Progress'
+              },
+              {
+                path: '/search',
+                title: 'Search'
+              },
+              {
+                path: '/stepper',
+                title: 'Stepper'
+              },
+              {
+                path: '/steps',
+                title: 'Steps'
+              },
+              {
+                path: '/swipe',
+                title: 'Swipe'
+              },
+              {
+                path: '/tab',
+                title: 'Tab'
+              },
+              {
+                path: '/tabbar',
+                title: 'Tabbar'
+              },
+              {
+                path: '/tag',
+                title: 'Tag'
+              },
+              {
+                path: '/waterfall',
+                title: 'Waterfall'
               }
             ]
           },
           {
-            "groupName": "Form",
-            "list": [
+            groupName: 'Form Components',
+            list: [
               {
-                "path": "/checkbox",
-                "title": "Checkbox"
+                path: '/checkbox',
+                title: 'Checkbox'
               },
               {
-                "path": "/field",
-                "title": "Field"
+                path: '/field',
+                title: 'Field'
               },
               {
-                "path": "/number-keyboard",
-                "title": "NumberKeyboard"
+                path: '/number-keyboard',
+                title: 'NumberKeyboard'
               },
               {
-                "path": "/password-input",
-                "title": "PasswordInput"
+                path: '/password-input',
+                title: 'PasswordInput'
               },
               {
-                "path": "/radio",
-                "title": "Radio"
+                path: '/radio',
+                title: 'Radio'
               },
               {
-                "path": "/switch",
-                "title": "Switch"
+                path: '/switch',
+                title: 'Switch'
+              },
+              {
+                path: '/uploader',
+                title: 'Uploader'
               }
             ]
           },
+          {
+            groupName: 'Action Components',
+            list: [
+              {
+                path: '/actionsheet',
+                title: 'Actionsheet'
+              },
+              {
+                path: '/datetime-picker',
+                title: 'DatetimePicker'
+              },
+              {
+                path: '/dialog',
+                title: 'Dialog'
+              },
+              {
+                path: '/picker',
+                title: 'Picker'
+              },
+              {
+                path: '/pull-refresh',
+                title: 'PullRefresh'
+              },
+              {
+                path: '/toast',
+                title: 'Toast'
+              }
+            ]
+          },
+          {
+            groupName: 'Advanced Components',
+            list: [
+              {
+                path: '/cell-swipe',
+                title: 'CellSwipe'
+              },
+              {
+                path: '/switch-cell',
+                title: 'SwitchCell'
+              },
+              {
+                path: '/tree-select',
+                title: 'TreeSelect'
+              }
+            ]
+          },
+          {
+            groupName: 'Business Components',
+            list: [
+              {
+                path: '/address-edit',
+                title: 'AddressEdit'
+              },
+              {
+                path: '/address-list',
+                title: 'AddressList'
+              },
+              {
+                path: '/area',
+                title: 'Area'
+              },
+              {
+                path: '/contact',
+                title: 'Contact'
+              },
+              {
+                path: '/coupon',
+                title: 'Coupon'
+              },
+              {
+                path: '/goods-action',
+                title: 'GoodsAction'
+              },
+              {
+                path: '/submit-bar',
+                title: 'SubmitBar'
+              },
+              {
+                path: '/sku',
+                title: 'Sku'
+              }
+            ]
+          }
         ]
       }
     ]
   }
-}
+};