diff --git a/docs/examples-docs/en-US/actionsheet.md b/docs/examples-docs/en-US/actionsheet.md
index b85edf8f1..987efa494 100644
--- a/docs/examples-docs/en-US/actionsheet.md
+++ b/docs/examples-docs/en-US/actionsheet.md
@@ -1,33 +1,23 @@
 <script>
+import { Toast } from 'packages/index';
+
 export default {
   data() {
     return {
       show1: false,
       show2: false,
       show3: false,
-      actions1: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.handleActionClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
+      actions: [
+        { name: 'Option1', callback: this.onClick },
+        { name: 'Option2' },
+        { name: 'Option3', loading: true }
       ]
     };
   },
 
   methods: {
-    handleActionClick(item) {
-      console.log(item);
+    onClick(item) {
+      Toast(item.name);
     }
   }
 }
@@ -45,14 +35,12 @@ Vue.component(Actionsheet.name, Actionsheet);
 ### Usage
 
 #### Basic Usage
-
-需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
+Use `actions` prop to set options of actionsheet. 
 
 :::demo Basic Usage
 ```html
-<van-button @click="show1 = true">弹出actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions1">
-</van-actionsheet>
+<van-button @click="show1 = true">Show Actionsheet</van-button>
+<van-actionsheet v-model="show1" :actions="actions" />
 ```
 
 ```javascript
@@ -60,83 +48,40 @@ export default {
   data() {
     return {
       show1: false,
-      actions1: [
-        {
-          name: '微信安全支付',
-          className: 'actionsheet-wx',
-          callback: this.handleActionClick
-        },
-        {
-          name: '支付宝支付',
-          loading: true
-        },
-        {
-          name: '信用卡支付'
-        },
-        {
-          name: '其他支付方式'
-        }
+      actions: [
+        { name: 'Option1', callback: this.onClick },
+        { name: 'Option2' },
+        { name: 'Option3', loading: true }
       ]
     };
   },
 
   methods: {
-    handleActionClick(item) {
-      console.log(item);
+    onClick(item) {
+      Toast(item.name);
     }
   }
 }
 ```
 :::
 
-#### 带取消按钮的 Actionsheet
+#### Actionsheet with cancel button
 
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
-
-:::demo 带取消按钮的 Actionsheet
+:::demo Actionsheet with cancel button
 ```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: '其他支付方式'
-        }
-      ]
-    };
-  }
-}
+<van-button @click="show2 = true">Show Actionsheet with cancel button</van-button>
+<van-actionsheet v-model="show2" :actions="actions" cancel-text="Cancel" />
 ```
 :::
 
-#### 带标题的 Actionsheet
+#### Actionsheet with title
+Actionsheet will get another style if there is a `title` prop.
 
-如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
-
-:::demo 带标题的 Actionsheet
+:::demo Actionsheet with title
 ```html
-<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
-<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
-  <p>一些内容</p>
+<van-button @click="show3 = true">Show Actionsheet with title</van-button>
+<van-actionsheet v-model="show3" title="Title">
+  <p>Content</p>
 </van-actionsheet>
 ```
 :::
@@ -145,21 +90,18 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | `Array` | `[]` | - |
-| title | 标题 | `String` | - | - |
-| cancelText | 取消按钮文案 | `String` | - | - |
-| overlay | 是否显示遮罩 | `Boolean` | - | - |
-| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
+| actions | Options | `Array` | `[]` | - |
+| title | Title | `String` | - | - |
+| cancelText | Text of cancel button | `String` | - | - |
+| overlay | Whether to show overlay | `Boolean` | - | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
 
-### actions
-
-
-`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+### Data struct of actions
 
 | key | Description |
 |-----------|-----------|
-| name | 标题 |
-| subname | 二级标题 |
-| className | 为对应列添加特殊的`class` |
-| loading | 是否是`loading`状态 |
-| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
+| name | Title |
+| subname | Subtitle |
+| className | className for the option |
+| loading | Whether to be loading status |
+| callback | Triggered when click option |
diff --git a/docs/examples-docs/en-US/changelog.md b/docs/examples-docs/en-US/changelog.md
index f890e2cd3..990ab710e 100644
--- a/docs/examples-docs/en-US/changelog.md
+++ b/docs/examples-docs/en-US/changelog.md
@@ -1,6 +1,6 @@
 ## Changelog
 
-## [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
+### [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
 `2017-10-26`
 
 **Improvements**
diff --git a/docs/examples-docs/en-US/datetime-picker.md b/docs/examples-docs/en-US/datetime-picker.md
index 103907b90..0abf3590a 100644
--- a/docs/examples-docs/en-US/datetime-picker.md
+++ b/docs/examples-docs/en-US/datetime-picker.md
@@ -1,4 +1,6 @@
 <script>
+import { Toast } from 'packages/index';
+
 export default {
   data() {
     return {
@@ -10,18 +12,6 @@ export default {
       currentDate2: null,
       currentDate3: null
     };
-  },
-
-  methods: {
-    handlePickerChange(picker) {
-      console.log(picker);
-    },
-    handlePickerCancel() {
-      console.log('picker cancel');
-    },
-    handlePickerConfirm() {
-      console.log('picker confirm');
-    }
   }
 };
 </script>
@@ -48,8 +38,7 @@ Vue.component(DatetimePicker.name, DatetimePicker);
   :max-hour="maxHour"
   :min-date="minDate"
   :max-date="maxDate"
-  @change="handlePickerChange">  
-</van-datetime-picker>
+/>
 ```
 
 ```javascript
@@ -62,20 +51,14 @@ export default {
       maxDate: new Date(2019, 10, 1),
       currentDate: new Date(2018, 0, 1)
     };
-  },
-
-  methods: {
-    handlePickerChange(picker) {
-      console.log(picker);
-    }
   }
 };
 ```
 :::
 
-#### 选择日期
+#### Date Picker
 
-:::demo 选择日期
+:::demo Date Picker
 ```html
 <van-datetime-picker
   v-model="currentDate2"
@@ -83,14 +66,13 @@ export default {
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
-  @change="handlePickerChange">  
-</van-datetime-picker>
+/>
 ```
 :::
 
-#### 选择时间
+#### Time Picker
 
-:::demo 选择时间
+:::demo Time Picker
 ```html
 <van-datetime-picker
   v-model="currentDate3"
@@ -98,8 +80,7 @@ export default {
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
-  @change="handlePickerChange">
-</van-datetime-picker>
+/>
 ```
 :::
 
@@ -108,30 +89,17 @@ export default {
 
 | 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 | - |
+| type | Picker type | `String` | 'datetime' |  'date', 'time' |
+| minDate | Min date | `Date` | Ten years ago on January 1 | - |
+| maxDate | Max date | `Date` | Ten years later on December 31 | - |
+| minHour | Min hour | `Number` | `0` | - |
+| maxHour | Max hour | `Number` | `23` | - |
+| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
 
 ### Event
 
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
-| change | 当值变化时触发的事件 | picker 实例 |
-| confirm | 点击完成按钮时触发的事件 | 当前 value |
-| cancel | 点击取消按钮时触发的事件 | - |
-
-### change事件
-
-在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
-
-| 函数 | Description |
-|-----------|-----------|
-| getColumnValue(index) | 获取对应列中选中的值 |
-| setColumnValue(index, value) | 设置对应列中选中的值 |
-| getColumnValues(index) | 获取对应列中所有的备选值 |
-| setColumnValues(index, values) | 设置对应列中所有的备选值 |
-| getValues() | 获取所有列中被选中的值，返回一个数组 |
-| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
+| change | Triggered when value changed | picker: picker instance |
+| confirm | Triggered when click confirm button | value: current value |
+| cancel | Triggered when click cancel button | - |
diff --git a/docs/examples-docs/en-US/dialog.md b/docs/examples-docs/en-US/dialog.md
index f7a53e34a..97f8d5ac6 100644
--- a/docs/examples-docs/en-US/dialog.md
+++ b/docs/examples-docs/en-US/dialog.md
@@ -1,27 +1,31 @@
 <script>
 import { Dialog } from 'packages';
 
-const message = '弹窗内容';
+const message = 'Content';
 
 export default {
   methods: {
     onClickAlert() {
       Dialog.alert({
-        title: '标题',
-        message
+        message,
+        title: 'Title',
+        confirmButtonText: 'ok'
       });
     },
 
     onClickAlert2() {
       Dialog.alert({
-        message
+        message,
+        confirmButtonText: 'ok'
       });
     },
 
     onClickConfirm() {
       Dialog.confirm({
-        title: '标题',
-        message
+        title: 'Title',
+        message,
+        confirmButtonText: 'ok',
+        cancelButtonText: 'cancel'
       }).catch(action => {
         console.log(action);
       });
@@ -40,14 +44,13 @@ import { Dialog } from 'vant';
 
 ### Usage
 
-#### 消息提示
+#### Alert dialog
+Used to prompt for some messages, only including one confirm button
 
-用于提示一些消息，只包含一个确认按钮
-
-:::demo 消息提示
+:::demo Alert dialog
 ```html
 <van-button @click="onClickAlert">Alert</van-button>
-<van-button @click="onClickAlert2">无标题 Alert</van-button>
+<van-button @click="onClickAlert2">Alert without title</van-button>
 ```
 
 ```javascript
@@ -55,8 +58,8 @@ export default {
   methods: {
     onClickAlert() {
       Dialog.alert({
-        title: '标题',
-        message: '弹窗内容'
+        title: 'Title',
+        message: 'Content'
       }).then(() => {
         // on close
       });
@@ -64,7 +67,7 @@ export default {
 
     onClickAlert2() {
       Dialog.alert({
-        message: '弹窗内容'
+        message: 'Content'
       }).then(() => {
         // on close
       });
@@ -74,11 +77,10 @@ export default {
 ```
 :::
 
-#### 消息确认
+#### Confirm dialog
+Used to confirm some messages, including a confirm button and a cancel button
 
-用于确认消息，包含取消和确认按钮
-
-:::demo 消息确认
+:::demo Confirm dialog
 ```html
 <van-button @click="onClickConfirm">Confirm</van-button>
 ```
@@ -88,8 +90,8 @@ export default {
   methods: {
     onClickConfirm() {
       Dialog.confirm({
-        title: '标题',
-        message: '弹窗内容'
+        title: 'Title',
+        message: 'Content'
       }).then(() => {
         // on confirm
       }).catch(() => {
@@ -101,24 +103,24 @@ export default {
 ```
 :::
 
-### 方法
+### Methods
 
-| 方法名 | Attribute | 返回值 | 介绍 |
+| Name | Attribute | Return value | Description |
 |-----------|-----------|-----------|-------------|
-| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
-| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
-| Dialog.close | - | `void` | 关闭弹窗 |
+| Dialog.alert | options | `Promise` | Show alert dialog |
+| Dialog.confirm | options | `Promise` | Show confim dialog |
+| Dialog.close | - | `void` | Close dialog |
 
 ### 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` | - |
+| title | Title | `String` | - | - |
+| message | Message | `String` | - | - |
+| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
+| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
+| confirmButtonText | Confirm button text | `String` |  `确认` | - |
+| cancelButtonText | Cancel button test | `String` | `取消` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
+| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
diff --git a/docs/examples-docs/en-US/picker.md b/docs/examples-docs/en-US/picker.md
index 7da0e09db..b9cfdca2f 100644
--- a/docs/examples-docs/en-US/picker.md
+++ b/docs/examples-docs/en-US/picker.md
@@ -1,23 +1,22 @@
 <script>
 import { Toast } from 'packages/index';
 
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+const states = {
+  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
 };
 
 export default {
   data() {
     return {
-      title: '地区选择',
+      title: 'Title',
       pickerColumns: [
         {
-          values: Object.keys(citys),
+          values: Object.keys(states),
           className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          values: states.Group1,
           className: 'column2'
         }
       ]
@@ -26,13 +25,13 @@ export default {
 
   methods: {
     handlePickerChange(picker, values) {
-      picker.setColumnValues(1, citys[values[0]]);
+      picker.setColumnValues(1, states[values[0]]);
     },
     handlePickerCancel() {
-      Toast('picker cancel');
+      Toast('Cancel');
     },
     handlePickerConfirm() {
-      Toast('picker confirm');
+      Toast('Confirm');
     }
   }
 };
@@ -57,10 +56,9 @@ Vue.component(Picker.name, Picker);
 ```
 
 ```javascript
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+const states = {
+  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
 };
 
 export default {
@@ -68,11 +66,11 @@ export default {
     return {
       pickerColumns: [
         {
-          values: Object.keys(citys),
+          values: Object.keys(states),
           className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          values: states.Group1,
           className: 'column2'
         }
       ]
@@ -88,14 +86,14 @@ export default {
 ```
 :::
 
-#### 带toolbar的Picker
+#### Picker with toolbar
 
-:::demo 带toolbar的Picker
+:::demo Picker with toolbar
 ```html
 <van-picker
+  show-toolbar
   :title="title"
   :columns="pickerColumns"
-  show-toolbar
   @change="handlePickerChange"
   @cancel="handlePickerCancel"
   @confirm="handlePickerConfirm"
@@ -103,23 +101,22 @@ export default {
 ```
 
 ```javascript
-const citys = {
-  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
-  '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
-  '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
+const states = {
+  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
 };
 
 export default {
   data() {
     return {
-      title: '地区选择',
+      title: 'Title',
       pickerColumns: [
         {
-          values: Object.keys(citys),
+          values: Object.keys(states),
           className: 'column1'
         },
         {
-          values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
+          values: states.Group1,
           className: 'column2'
         }
       ]
@@ -131,10 +128,10 @@ export default {
       picker.setColumnValues(1, citys[values[0]]);
     },
     handlePickerCancel() {
-      alert('picker cancel');
+      Toast('Cancel');
     },
     handlePickerConfirm() {
-      alert('picker confirm');
+      Toast('Confirm');
     }
   }
 };
@@ -145,31 +142,28 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
-| itemHeight | 选中元素区高度 | `Number` | `44` | - |
-| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
-| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
-| title | 在toolbar上显示的标题文字 | `String` | - | - |
+| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
+| itemHeight | Item height | `Number` | `44` | - |
+| columns | Columns data | `Array` | - | - |
+| showToolbar | Whether to show toolbar | `Boolean` | `true` | - |
+| title | Toolbar title | `String` | - | - |
 
-### columns
-
-`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
+### Data struct of columns
 
 | key | Description |
 |-----------|-----------|
-| values | 列中对应的备选值 |
-| defaultIndex | 初始选中值的索引，默认为0 |
-| className | 为对应列添加特殊的`class` |
+| values | Value of column |
+| defaultIndex | Default value index |
+| className | ClassName for this column |
 
-### change事件
+### Picker instance
+The first argument of change event's callback function is a picker instance with some methods
 
-在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
-
-| 函数 | Description |
+| Method | Description |
 |-----------|-----------|
-| getColumnValue(index) | 获取对应列中选中的值 |
-| setColumnValue(index, value) | 设置对应列中选中的值 |
-| getColumnValues(index) | 获取对应列中所有的备选值 |
-| setColumnValues(index, values) | 设置对应列中所有的备选值 |
-| getValues() | 获取所有列中被选中的值，返回一个数组 |
-| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
+| getColumnValue(index) | get current value of the column |
+| setColumnValue(index, value) | set current value of the column |
+| getColumnValues(index) | get all values of the column |
+| setColumnValues(index, values) | set all values of the column |
+| getValues() | get current values of all columns |
+| setValues(values) | set current values of all columns |
diff --git a/docs/examples-docs/en-US/pull-refresh.md b/docs/examples-docs/en-US/pull-refresh.md
index 4256162bd..e68df4985 100644
--- a/docs/examples-docs/en-US/pull-refresh.md
+++ b/docs/examples-docs/en-US/pull-refresh.md
@@ -13,7 +13,7 @@ export default {
     isLoading() {
       if (this.isLoading) {
         setTimeout(() => {
-          Toast('刷新成功');
+          Toast('Refresh Success');
           this.isLoading = false;
           this.count++;
         }, 500);
@@ -23,7 +23,7 @@ export default {
 
   mounted() {
     const head = document.querySelector('.van-pull-refresh__head');
-    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh 下拉刷新</h1>');
+    head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh</h1>');
   }
 }
 </script>
@@ -41,9 +41,14 @@ Vue.component(PullRefresh.name, PullRefresh);
 
 :::demo  
 ```html
-<!-- 通过 v-model 控制加载状态 -->
-<van-pull-refresh v-model="isLoading">
-  <p>刷新次数: {{ count }}</p>
+<!-- use v-model to control loading status -->
+<van-pull-refresh
+  v-model="isLoading"
+  pulling-text="Pull to refresh..."
+  loosing-text="Loose to refresh..."
+  loading-text="Loading..."
+>
+  <p>Refresh Count: {{ count }}</p>
 </van-pull-refresh>
 ```
 
@@ -60,7 +65,7 @@ export default {
     isLoading() {
       if (this.isLoading) {
         setTimeout(() => {
-          Toast('刷新成功');
+          Toast('Refresh Success');
           this.isLoading = false;
           this.count++;
         }, 500);
@@ -75,19 +80,19 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 是否在加载中 | `Boolean` | - | - |
-| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
-| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
-| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
-| animationDuration | 动画时长 | `Number` | `300` | - |
-| headHeight | 顶部内容高度 | `Number` | `50` | - |
+| v-model | Loading status | `Boolean` | - | - |
+| pullingText | Text to show when pulling | `String` | `下拉即可刷新...` | - |
+| loosingText | Text to show when loosing | `String` | `释放即可刷新...` | - |
+| loadingText | Text to show when loading | `String` | `加载中...` | - |
+| animationDuration | Animation duration | `Number` | `300` | - |
+| headHeight | Height of head | `Number` | `50` | - |
 
 ### Slot
 
 | name | Description |
 |-----------|-----------|
-| - | 自定义内容 |
-| normal | 非下拉状态时顶部内容 |
-| pulling | 下拉过程中顶部内容 |
-| loosing | 释放过程中顶部内容 |
-| loading | 加载过程中顶部内容 |
+| - | Default slot |
+| normal | Content of head when at normal status |
+| pulling | Content of head when at pulling |
+| loosing | Content of head when at loosing |
+| loading | Content of head when at loading |
diff --git a/docs/examples-docs/zh-CN/actionsheet.md b/docs/examples-docs/zh-CN/actionsheet.md
index c8aab1b84..7c8af18d4 100644
--- a/docs/examples-docs/zh-CN/actionsheet.md
+++ b/docs/examples-docs/zh-CN/actionsheet.md
@@ -8,24 +8,26 @@
     margin-left: 15px;
   }
 
-  .title-actionsheet p {
+  p {
     padding: 20px;
   }
 }
 </style>
 
 <script>
+import { Toast } from 'packages/index';
+
 export default {
   data() {
     return {
       show1: false,
       show2: false,
       show3: false,
-      actions1: [
+      actions: [
         {
           name: '微信安全支付',
           className: 'actionsheet-wx',
-          callback: this.handleActionClick
+          callback: this.onClick
         },
         {
           name: '支付宝支付',
@@ -42,8 +44,8 @@ export default {
   },
 
   methods: {
-    handleActionClick(item) {
-      console.log(item);
+    onClick(item) {
+      Toast(item.name);
     }
   }
 }
@@ -61,14 +63,12 @@ Vue.component(Actionsheet.name, Actionsheet);
 ### 代码演示
 
 #### 基础用法
-
-需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
+需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
 
 :::demo 基础用法
 ```html
-<van-button @click="show1 = true">弹出actionsheet</van-button>
-<van-actionsheet v-model="show1" :actions="actions1">
-</van-actionsheet>
+<van-button @click="show1 = true">弹出 Actionsheet</van-button>
+<van-actionsheet v-model="show1" :actions="actions" />
 ```
 
 ```javascript
@@ -76,11 +76,11 @@ export default {
   data() {
     return {
       show1: false,
-      actions1: [
+      actions: [
         {
           name: '微信安全支付',
           className: 'actionsheet-wx',
-          callback: this.handleActionClick
+          callback: this.onClick
         },
         {
           name: '支付宝支付',
@@ -97,8 +97,8 @@ export default {
   },
 
   methods: {
-    handleActionClick(item) {
-      console.log(item);
+    onClick(item) {
+      Toast(item.name);
     }
   }
 }
@@ -111,8 +111,8 @@ export default {
 
 :::demo 带取消按钮的 Actionsheet
 ```html
-<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
-<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
+<van-button @click="show2 = true">弹出带取消按钮的 Actionsheet</van-button>
+<van-actionsheet v-model="show2" :actions="actions" cancel-text="取消">
 </van-actionsheet>
 ```
 
@@ -121,11 +121,11 @@ export default {
   data() {
     return {
       show2: false,
-      actions1: [
+      actions: [
         {
           name: '微信安全支付',
           className: 'actionsheet-wx',
-          callback: this.handleActionClick
+          callback: this.onClick
         },
         {
           name: '支付宝支付',
@@ -150,8 +150,8 @@ export default {
 
 :::demo 带标题的 Actionsheet
 ```html
-<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
-<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
+<van-button @click="show3 = true">弹出带标题的 Actionsheet</van-button>
+<van-actionsheet v-model="show3" title="支持以下配送方式">
   <p>一些内容</p>
 </van-actionsheet>
 ```
diff --git a/docs/examples-docs/zh-CN/changelog.md b/docs/examples-docs/zh-CN/changelog.md
index 5c8c803a9..92d925e4a 100644
--- a/docs/examples-docs/zh-CN/changelog.md
+++ b/docs/examples-docs/zh-CN/changelog.md
@@ -1,6 +1,6 @@
 ## 更新日志
 
-## [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
+### [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
 `2017-10-26`
 
 **Improvements**
diff --git a/docs/examples-docs/zh-CN/datetime-picker.md b/docs/examples-docs/zh-CN/datetime-picker.md
index f0e39287e..7d664da50 100644
--- a/docs/examples-docs/zh-CN/datetime-picker.md
+++ b/docs/examples-docs/zh-CN/datetime-picker.md
@@ -1,4 +1,6 @@
 <script>
+import { Toast } from 'packages/index';
+
 export default {
   data() {
     return {
@@ -10,18 +12,6 @@ export default {
       currentDate2: null,
       currentDate3: null
     };
-  },
-
-  methods: {
-    handlePickerChange(picker) {
-      console.log(picker);
-    },
-    handlePickerCancel() {
-      console.log('picker cancel');
-    },
-    handlePickerConfirm() {
-      console.log('picker confirm');
-    }
   }
 };
 </script>
@@ -48,8 +38,7 @@ Vue.component(DatetimePicker.name, DatetimePicker);
   :max-hour="maxHour"
   :min-date="minDate"
   :max-date="maxDate"
-  @change="handlePickerChange">  
-</van-datetime-picker>
+/>
 ```
 
 ```javascript
@@ -62,12 +51,6 @@ export default {
       maxDate: new Date(2019, 10, 1),
       currentDate: new Date(2018, 0, 1)
     };
-  },
-
-  methods: {
-    handlePickerChange(picker) {
-      console.log(picker);
-    }
   }
 };
 ```
@@ -83,8 +66,7 @@ export default {
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
-  @change="handlePickerChange">  
-</van-datetime-picker>
+/>
 ```
 :::
 
@@ -98,8 +80,7 @@ export default {
   :min-hour="minHour"
   :max-hour="maxHour"
   :min-date="minDate"
-  @change="handlePickerChange">
-</van-datetime-picker>
+/>
 ```
 :::
 
@@ -108,12 +89,12 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
-| type | 组件类型 | String | 'datetime' |  'datetime', 'date', 'time' |
-| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
-| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
-| minHour | 可选的最小小时 | Number | 0 | - |
-| maxHour | 可选的最大小时 | Number | 23 | - |
+| type | 组件类型 | `String` | 'datetime' |  'date', 'time' |
+| minDate | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
+| maxDate | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
+| minHour | 可选的最小小时 | `Number` | `0` | - |
+| maxHour | 可选的最大小时 | `Number` | `23` | - |
+| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
 
 ### Event
 
diff --git a/docs/examples-docs/zh-CN/picker.md b/docs/examples-docs/zh-CN/picker.md
index 1b7d5e903..e02b85dad 100644
--- a/docs/examples-docs/zh-CN/picker.md
+++ b/docs/examples-docs/zh-CN/picker.md
@@ -93,9 +93,9 @@ export default {
 :::demo 带toolbar的Picker
 ```html
 <van-picker
+  show-toolbar
   :title="title"
   :columns="pickerColumns"
-  show-toolbar
   @change="handlePickerChange"
   @cancel="handlePickerCancel"
   @confirm="handlePickerConfirm"