[Doc] english document of all action components (#260)

* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components
2025-04-06 03:57:59 +08:00 · 2017-10-26 08:38:13 -05:00 · 2017-10-26 08:38:13 -05:00 · a7d8379514
commit a7d8379514
parent 0cae221d5c
10 changed files with 191 additions and 299 deletions
--- 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 |
--- 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**
--- 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 | - |
--- 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` | - |
--- 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 |
--- 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 |
--- 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>
 ```
--- 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**
--- 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

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