[Doc] add english document of all basic components

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

@@ -161,11 +161,11 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| actions | 行动按钮数组 | `Array` | `[]` | |
-| title | 标题 | `String` | | |
-| cancelText | 取消按钮文案 | `String` | | |
-| overlay | 是否显示遮罩 | `Boolean` | | |
-| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
+| actions | 行动按钮数组 | `Array` | `[]` | - |
+| title | 标题 | `String` | - | - |
+| cancelText | 取消按钮文案 | `String` | - | - |
+| overlay | 是否显示遮罩 | `Boolean` | - | - |
+| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
 
 ### actions
 

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

@@ -68,9 +68,9 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| value | 当前选中的省市区`code` | `String` | - | |
-| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | |
-| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | |
+| value | 当前选中的省市区`code` | `String` | - | - |
+| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
+| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
 
 ### Event
 

docs/examples-docs/zh-CN/datetime-picker.md

@@ -108,12 +108,12 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
+| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
 | type | 组件类型 | String | 'datetime' |  'datetime', 'date', 'time' |
-| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
-| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
-| minHour | 可选的最小小时 | Number | 0 | |
-| maxHour | 可选的最大小时 | Number | 23 | |
+| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
+| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
+| minHour | 可选的最小小时 | Number | 0 | - |
+| maxHour | 可选的最大小时 | Number | 23 | - |
 
 ### Event
 

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

@@ -121,12 +121,12 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | `String` | | |
-| message | 内容 | `String` | | |
-| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | |
-| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | |
-| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | |
-| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
-| overlay | 是否展示蒙层 | `Boolean` | `true` | |
-| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
-| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
+| title | 标题 | `String` | - | - |
+| message | 内容 | `String` | - | - |
+| showConfirmButton | 是否展示确认按钮 | `Boolean` |  `true` | - |
+| showCancelButton | 是否展示取消按钮 | `Boolean` |  `false` | - |
+| confirmButtonText | 确认按钮的文案 | `String` |  `确认` | - |
+| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
+| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
+| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
+| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |

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

@@ -144,7 +144,7 @@ export default {
 | loading | 加载时的图片 | `String` | - | - |
 | error | 错误时的图片 | `String` | - | - |
 | preload | 预加载高度的比例 | `String` | - | - |
-| attempt | 尝试次数 | `Number` | `3` | |
+| attempt | 尝试次数 | `Number` | `3` | - |
 | listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
 | adapter | 适配器 | `Object` | - | - |
 | filter | 图片url过滤 | `Object` | - | - |

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

@@ -143,11 +143,11 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
-| itemHeight | 选中元素区高度 | `Number` | `44` | |
-| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
-| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
-| title | 在toolbar上显示的标题文字 | `String` | | |
+| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
+| itemHeight | 选中元素区高度 | `Number` | `44` | - |
+| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
+| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
+| title | 在toolbar上显示的标题文字 | `String` | - | - |
 
 ### columns
 

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

@@ -150,5 +150,5 @@ export default {
 | lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
 | position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
 | closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
-| transition | 弹出层的`transition` | `String` | `popup-slide` | |
+| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
 | preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

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

@@ -57,7 +57,7 @@ Vue.component(Progress.name, Progress);
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `Boolean` | `false` | |
+| inactive | 是否置灰 | `Boolean` | `false` | - |
 | percentage | 进度百分比 | `Number` | `false` | `0-100` |
 | pivotText | 文字显示 | `String` | 百分比文字 | - |
 | color | 进度条颜色 | `String` | `#38f` | hexvalue |

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

@@ -2,29 +2,26 @@
 export default {
   data() {
     return {
-      search: '',
-      basicSearch: '',
-      slotSearch: ''
+      value: '',
     };
   },
 
   methods: {
-    goSearch() {
-      alert(this.search);
+    onSearch() {
+      Toast(this.value);
     },
-    goSlotSearch() {
-      alert(this.slotSearch);
-    },
-    handleCancel() {
-      alert('cancel');
+    onCancel() {
+      Toast('cancel');
     }
   }
 };
 </script>
 
 <style>
-.demo-search-action {
-  padding: 0 10px;
+.demo-search {
+  .van-search__action div {
+    padding: 0 10px;
+  }
 }
 </style>
 
@@ -40,17 +37,15 @@ Vue.component(Search.name, Search);
 ### 代码演示
 
 #### 基础用法
-
 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
 
 :::demo 基础用法
 ```html
-<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search>
+<van-search placeholder="搜索框基础用法" v-model="basicSearch" />
 ```
 :::
 
 #### 监听对应事件
-
 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
 
 Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
@@ -59,28 +54,26 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 ```html
 <form action="/">
   <van-search
+    v-model="value"
     placeholder="请输入商品名称"
-    v-model="search"
     :show-action="true"
-    @search="goSearch"
-    @cancel="handleCancel"></van-search>
+    @search="onSearch"
+    @cancel="onCancel">
+  </van-search>
 </form>
 ```
 :::
 
 #### 自定义行动按钮
-
 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
 
 :::demo 自定义行动按钮
 ```html
 <van-search
-  v-model="slotSearch"
+  v-model="value"
   :show-action="true"
-  @search="goSlotSearch">
-  <template slot="action">
-    <div class="demo-search-action" @click="goSlotSearch">搜索</div>
-  </template>    
+  @search="onSearch">
+  <div slot="action" @click="goSlotSearch">搜索</div>
 </van-search>
 ```
 :::
@@ -89,9 +82,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| placeholder | `input`的`placeholder`文案 | `String` | | |
-| background | 搜索框背景色 | `String` |     `#f2f2f2` |  所有浏览器支持的颜色描述 |
-| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` |     false | |
+| placeholder | `input`的`placeholder`文案 | `String` | - | - |
+| background | 搜索框背景色 | `String` | `#f2f2f2` |  所有浏览器支持的颜色描述 |
+| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
 
 ### Event
 

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

@@ -140,7 +140,7 @@ Vue.component(Sku.name, Sku);
 ### slots
 sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
 
-| 名称 | 说明 | 
+| Name | 说明 | 
 |-----------|-----------|
 | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
 | sku-group | 商品sku展示区 |

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

@@ -3,10 +3,6 @@
   .van-stepper {
     margin-left: 15px;
   }
-
-  .curr-stepper {
-    margin: 15px;
-  }
 }
 </style>
 
@@ -36,8 +32,17 @@ Vue.component(Stepper.name, Stepper);
 
 :::demo 基础用法
 ```html
-<van-stepper v-model="stepper1"></van-stepper>
-<p class="curr-stepper">当前值：{{ stepper1 }}</p>
+<van-stepper v-model="stepper1" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 1
+    }
+  }
+}
 ```
 :::
 
@@ -46,7 +51,7 @@ Vue.component(Stepper.name, Stepper);
 
 :::demo 禁用状态
 ```html
-<van-stepper v-model="stepper1" disabled></van-stepper>
+<van-stepper v-model="stepper1" disabled />
 ```
 :::
 
@@ -56,8 +61,7 @@ Vue.component(Stepper.name, Stepper);
 
 :::demo 高级用法
 ```html
-<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
-<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
+<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
 ```
 :::
 

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

@@ -145,17 +145,17 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| active | 当前步骤，起始值为0 | `Number` | | |
-| icon | 当前步骤的icon | `String` | | |
-| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
-| title | 当前步骤从标题 | `String` | | |
-| description | 当前步骤描述 | `String` | | |
+| active | 当前步骤，起始值为0 | `Number` | - | - |
+| icon | 当前步骤的icon | `String` | - | - |
+| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
+| title | 当前步骤标题 | `String` | - | - |
+| description | 当前步骤描述 | `String` | - | - |
 | direction | 显示方向 | `String` | `horizontal` | `vertical` |
-| activeColor | active状态颜色 | `String` | `#06bf04` | |
+| activeColor | active状态颜色 | `String` | `#06bf04` | - |
 
 ### Steps Slot
 
-| 名称 | 说明 |
+| Name | 说明 |
 |-----------|-----------|
 | icon | 自定义icon区域 |
 | message-extra | 状态栏添加额外的元素 |

docs/examples-docs/zh-CN/submit-bar.md

@@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar);
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| price | 价格（单位分） |  `Number` | | 是 |
-| button-text | 按钮文字 | `String` | | 是 |
+| price | 价格（单位分） |  `Number` | - | 是 |
+| button-text | 按钮文字 | `String` | - | 是 |
 | button-type | 按钮类型 |  `String` | `danger` | 否 |
-| tip | 提示文案 |  `String` | | 否 |
+| tip | 提示文案 |  `String` | - | 否 |
 | disabled | 是否禁用按钮 |  `Boolean` | `false` | 否 |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | 否 |
 
@@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar);
 
 ### Slot
 
-| 名称 | 说明 |
+| Name | 说明 |
 |-----------|-----------|
 | tip | 提示文案中的额外操作和说明 |

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

@@ -67,10 +67,10 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 开关状态 | `Boolean` | | |
-| title | 左侧标题 |  `String` | `''` | |
-| loading | 是否为加载状态 |  `Boolean` | `false` | |
-| disabled | 是否为禁用状态 |  `Boolean` | `false` | |
+| v-model | 开关状态 | `Boolean` | - | - |
+| title | 左侧标题 |  `String` | `''` | - |
+| loading | 是否为加载状态 |  `Boolean` | `false` | - |
+| disabled | 是否为禁用状态 |  `Boolean` | `false` | - |
 
 ### Event
 

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

@@ -234,17 +234,17 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
 |-----------|-----------|-----------|-------------|-------------|
 | classtype | 两种UI | `String` | `line` |     `line`, `card` |
-| active | 默认激活的tab | `String`, `Number` | `0` | |
-| navclass | tabs的内部nav上的自定义classname | `String` | | |
-| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
+| active | 默认激活的tab | `String`, `Number` | `0` | - |
+| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
+| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
 
 
 ### van-tab API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选 |
 |-----------|-----------|-----------|-------------|-------------|
-| title | tab的标题 | `String` | | |
-| disabled | 是否禁用这个tab | `Boolean` | `false` | |
+| title | tab的标题 | `String` | - | - |
+| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
 
 ### van-tabs Event
 

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

@@ -63,8 +63,8 @@ Vue.component(Tag.name, Tag);
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型 | `String` | `''`| `primary` `success` `danger` |
-| plain | 是否为空心样式 | `Boolean` | `false` | |
-| mark | 是否为标记样式 | `Boolean` | `false` | |
+| plain | 是否为空心样式 | `Boolean` | `false` | - |
+| mark | 是否为标记样式 | `Boolean` | `false` | - |
 
 ### Slot
 

docs/examples-docs/zh-CN/tree-select.md

@@ -128,9 +128,9 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构 |  Array | [] | |
-| mainActiveIndex | 左侧导航高亮的索引 |  Number | 0 | |
-| activeId | 右侧选择项，高亮的数据id |  Number | 0 | |
+| items | 分类显示所需的数据，具体数据结构可看 数据结构 |  Array | [] | - |
+| mainActiveIndex | 左侧导航高亮的索引 |  Number | 0 | - |
+| activeId | 右侧选择项，高亮的数据id |  Number | 0 | - |
 
 #### 事件
 | 事件名 | 说明 | 参数 |

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

@@ -4,8 +4,6 @@
 
 #### 全局注册
 
-`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
-
 ```js
 import Vue from 'vue';
 import { Waterfall } from 'vant';
@@ -36,37 +34,25 @@ import { Waterfall } from 'packages';
 export default {
   data() {
     return {
-      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-      loading: false,
-      finished: false
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
     };
   },
+
   directives: {
-    WaterfallLower: Waterfall('lower'),
-    WaterfallUpper: Waterfall('upper')
+    WaterfallLower: Waterfall('lower')
   },
+
   methods: {
     loadMore() {
-      if (this.list.length >= 50) {
-        this.finished = true;
-        return;
-      }
-
-      this.loading = true;
+      this.disabled = true;
       setTimeout(() => {
-        let lastNumber = this.list[this.list.length - 1];
         for (let i = 0; i < 5; i ++) {
-          lastNumber += 1;
-          this.list.push(lastNumber);
+          this.list.push(this.list.length);
         }
-        this.loading = false;
+        this.disabled = false;
       }, 200);
     }
-  },
-  computed: {
-    isWaterfallDisabled() {
-      return this.loading || this.finished;
-    }
   }
 };
 </script>
@@ -103,19 +89,46 @@ export default {
 <p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
 <ul
   v-waterfall-lower="loadMore"
-  waterfall-disabled="isWaterfallDisabled"
+  waterfall-disabled="disabled"
   waterfall-offset="400">
-  <li v-for="(item, index) in list">{{ item }}</li>
+  <li v-for="item in list">{{ item }}</li>
 </ul>
 ```
+
+```js
+export default {
+  data() {
+    return {
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
+    };
+  },
+
+  directives: {
+    WaterfallLower: Waterfall('lower')
+  },
+
+  methods: {
+    loadMore() {
+      this.disabled = true;
+      setTimeout(() => {
+        for (let i = 0; i < 5; i ++) {
+          this.list.push(this.list.length);
+        }
+        this.disabled = false;
+      }, 200);
+    }
+  }
+};
+```
 :::
 
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
-| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
-| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | |
-| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |
+| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
+| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
+| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
+| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |