Merge branch 'dev' into fix-datetime-init-value

docs/examples-docs/actionsheet.md

@@ -53,7 +53,14 @@ export default {
 }
 </script>
 
-## ActionSheet 行动按钮
+## Actionsheet 行动按钮
+
+### 使用指南
+``` javascript
+import { Actionsheet } from 'vant';
+
+Vue.component(Actionsheet.name, Actionsheet);
+```
 
 ### 代码演示
 
@@ -106,11 +113,11 @@ export default {
 ```
 :::
 
-#### 带取消按钮的ActionSheet
+#### 带取消按钮的 Actionsheet
 
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
 
-:::demo 带取消按钮的ActionSheet
+:::demo 带取消按钮的 Actionsheet
 ```html
 <van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
 <van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
@@ -149,11 +156,11 @@ export default {
 ```
 :::
 
-#### 带标题的ActionSheet
+#### 带标题的 Actionsheet
 
-如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
+如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
 
-:::demo 带标题的ActionSheet
+:::demo 带标题的 Actionsheet
 ```html
 <van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
 <van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
@@ -170,10 +177,11 @@ export default {
 | title | 标题 | `String`  |  |    |
 | cancelText | 取消按钮文案 | `String`  |  |    |
 | overlay | 是否显示遮罩 | `Boolean`  |  |    |
-| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean`  |  |    |
+| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean`  |  |    |
 
 ### actions
 
+
 `API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
 
 | key       | 说明      |

docs/examples-docs/badge.md

@@ -28,6 +28,13 @@
 
 ## Badge 徽章
 
+### 使用指南
+``` javascript
+import { Badge } from 'vant';
+
+Vue.component(Badge.name, Badge);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/button.md

@@ -1,126 +1,96 @@
 <style>
 .demo-button {
   .van-button {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     user-select: none;
-  }
-  .van-row {
-    padding: 0 15px;
-    margin-bottom: 20px;
-  }
-  .van-col-24 {
-    margin-bottom: 20px;
 
-    &:last-child {
-      margin-bottom: 0;
+    &--large,
+    &--bottom-action {
+      margin-bottom: 15px;
     }
   }
+
+  .zan-doc-demo-block {
+    padding: 0 15px;
+  }
+
+  .zan-doc-demo-block__subtitle {
+    padding-left: 0;
+  }
 }
 </style>
 
 ## Button 按钮
 
+### 使用指南
+``` javascript
+import { Button } from 'vant';
+
+Vue.component(Button.name, Button);
+```
+
 ### 代码演示
 
-#### 按钮功能
+#### 按钮类型
 
-只接受`primary`, `default`, `danger`三种类型，默认`default`。
+支持`default`、`primary`、`danger`三种类型，默认为`default`
 
-:::demo 按钮功能
+:::demo 按钮类型
 ```html
-<van-row>
-  <van-col span="24">
-    <van-button block>default</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="primary" block>primary</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button type="danger" block>danger</van-button>
-  </van-col>
-</van-row>
-```
-:::
-
-#### 禁用状态
-
-在组件上加上`disabled`属性即可，此时按钮不可点击。
-
-:::demo 禁用状态
-```html
-<van-row>
-  <van-col span="24">
-    <van-button disabled block>diabled</van-button>
-  </van-col>
-</van-row>
+<van-button type="default">Default</van-button>
+<van-button type="primary">Primary</van-button>
+<van-button type="danger">Danger</van-button>
 ```
 :::
 
 #### 按钮尺寸
 
-只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
 
 :::demo 按钮尺寸
 ```html 
-<van-row>
-  <van-col span="24">
-    <van-button size="large">large</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="normal">normal</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="small">small</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button size="mini">mini</van-button>
-  </van-col>
-</van-row>
+<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 禁用状态
+```html
+<van-button disabled>Diabled</van-button>
+```
+:::
+
+#### 加载状态
+
+:::demo 加载状态
+```html 
+<van-button loading />
 ```
 :::
 
 #### 自定义按钮标签
 
-按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
+按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
 
 :::demo 自定义按钮标签
 ```html 
-<van-row>
-  <van-col span="24">
-    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
-  </van-col>
-</van-row>
-```
-:::
-
-#### loading按钮
-
-`loading`状态的按钮。
-
-:::demo loading按钮
-```html 
-<van-row>
-  <van-col span="24">
-    <van-button type="primary" loading block>loading</van-button>
-  </van-col>
-  <van-col span="24">
-    <van-button loading block></van-button>
-  </van-col>
-</van-row>
+<van-button tag="a" href="https://www.youzan.com" target="_blank">
+  a 标签按钮
+</van-button>
 ```
 :::
 
 #### 页面底部操作按钮
 
-一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
-
 :::demo 页面底部操作按钮
 ```html 
-<van-row>
-  <van-col span="24">
-    <van-button type="primary" bottom-action>立即购买</van-button>
-  </van-col>
-</van-row>
+<van-button type="primary" bottom-action>立即购买</van-button>
+
 <van-row>
   <van-col span="12">
     <van-button bottom-action>加入购物车</van-button>
@@ -136,10 +106,11 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
-| size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
-| tag | 按钮标签 | `string`  | `button`          | 任何有意义的`html`标签, 如`a`, `span`等  |
-| diabled | 按钮是否禁用 | `boolean`  |  `false`  |      |
-| block | 按钮是否显示为块级元素 | `boolean`  |   `false`   |      |
-| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   `false`   |      |
-
+| type | 按钮类型 | `String`  | `default` | `primary` `danger` |
+| size | 按钮尺寸 | `String`  | `normal` | `large` `small` `mini` |
+| tag | 按钮标签 | `String`  | `button` | 任意`HTML`标签 |
+| nativeType | 按钮类型（原生） | `String`  | `''` | |
+| diabled | 是否禁用 | `Boolean`  |  `false`  | |
+| loading | 是否显示为加载状态 | `Boolean`  |  `false`  | |
+| block | 是否为块级元素 | `Boolean`  |   `false`   | |
+| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | |

docs/examples-docs/card.md

@@ -1,5 +1,12 @@
 ## Card 图文组件
 
+### 使用指南
+``` javascript
+import { Card } from 'vant';
+
+Vue.component(Card.name, Card);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/cell-swipe.md

@@ -22,6 +22,13 @@
 </style>
 ## CellSwipe 滑动单元格
 
+### 使用指南
+``` javascript
+import { CellSwipe } from 'vant';
+
+Vue.component(CellSwipe.name, CellSwipe);
+```
+
 ### 代码演示
 
 #### 基础用法
@@ -32,13 +39,8 @@
   <van-cell-group>
     <van-cell title="单元格1" value="单元格1内容"></van-cell>
   </van-cell-group>
-  
-  <span slot="right" class="swipe-delete-btn">
-      删除
-  </span>
-  <span slot="left" class="swipe-check-btn">
-      选择
-  </span>
+  <span slot="right" class="swipe-delete-btn">删除</span>
+  <span slot="left" class="swipe-check-btn">选择</span>
 </van-cell-swipe>
 ```
 :::
@@ -48,13 +50,13 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| right-width | 右侧滑动按钮宽度 | `number`  |      0     |           |
-| left-width | 左侧滑动按钮宽度 | `number`  |       0    |           |
+| left-width | 左侧滑动按钮宽度 | `number`  | 0 | |
+| right-width | 右侧滑动按钮宽度 | `number`  | 0 | |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | - | 自定义显示内容 |
-| right | 右侧滑动内容 |
 | left | 左侧滑动内容 |
+| right | 右侧滑动内容 |

docs/examples-docs/cell.md

@@ -10,6 +10,14 @@ export default {
 
 ## Cell 单元格
 
+### 使用指南
+``` javascript
+import { Cell, CellGroup } from 'vant';
+
+Vue.component(Cell.name, Cell);
+Vue.component(CellGroup.name, CellGroup);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/changelog.md

@@ -1,12 +1,51 @@
 ## 更新日志
 
+## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
+
+## [v0.8.3](https://github.com/youzan/vant/tree/v0.8.3) (2017-08-18)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.8.1...v0.8.3)
+
+**修复:**
+
+- fix: dialog wrong z-index  [\#77](https://github.com/youzan/vant/pull/77) ([chenjiahan](https://github.com/chenjiahan))
+
+## [v0.8.1](https://github.com/youzan/vant/tree/v0.8.1) (2017-08-18)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.8.0...v0.8.1)
+
+**非兼容更新和新特性:**
+
+- field 增加icon slot支持 [\#76](https://github.com/youzan/vant/pull/76) ([pangxie1991](https://github.com/pangxie1991))
+
+## [v0.8.0](https://github.com/youzan/vant/tree/v0.8.0) (2017-08-17)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.7.10...v0.8.0)
+
+**非兼容更新和新特性:**
+
+- Optimize component building, reduce dist file size  [\#74](https://github.com/youzan/vant/pull/74) ([chenjiahan](https://github.com/chenjiahan))
+
+## [v0.7.10](https://github.com/youzan/vant/tree/v0.7.10) (2017-08-16)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.7.8...v0.7.10)
+
+**修复:**
+
+- fix: 修复popup和dialog同时出现时，几率出现dialog被挡住的情况 [\#75](https://github.com/youzan/vant/pull/75) ([pangxie1991](https://github.com/pangxie1991))
+- 修复：popup滚动穿透 [\#73](https://github.com/youzan/vant/pull/73) ([cookfront](https://github.com/cookfront))
+
 ## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
 [Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
 
-**合并的 Pull Request (可能有不兼容改动):**
+**非兼容更新和新特性:**
+
+- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
+
+**修复:**
 
 - not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
-- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
 
 ## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
 [Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)

docs/examples-docs/checkbox.md

@@ -35,6 +35,13 @@ export default {
 
 ## Checkbox 复选框
 
+### 使用指南
+``` javascript
+import { Checkbox } from 'vant';
+
+Vue.component(Checkbox.name, Checkbox);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/datetime-picker.md

@@ -26,7 +26,14 @@ export default {
 };
 </script>
 
-## Datetime Picker 时间选择
+## DatetimePicker 时间选择
+
+### 使用指南
+``` javascript
+import { DatetimePicker } from 'vant';
+
+Vue.component(DatetimePicker.name, DatetimePicker);
+```
 
 ### 代码演示
 

docs/examples-docs/dialog.md

@@ -7,7 +7,7 @@
 </style>
 
 <script>
-import { Dialog } from 'src/index';
+import { Dialog } from 'packages/index';
 
 export default {
   methods: {

docs/examples-docs/field.md

@@ -29,6 +29,13 @@ export default {
 
 表单中`input`或`textarea`的输入框。
 
+### 使用指南
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
 ### 代码演示
 
 #### 基础用法
@@ -47,7 +54,15 @@ export default {
     :on-icon-click="onIconClick"
     @blur="onFieldBlur"
     required></van-field>
-  <van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
+  <van-field
+    type="password"
+    label="密码："
+    placeholder="请输入密码"
+    required>
+    <template slot="icon">
+      <van-icon name="search"></van-icon>
+    </template>
+  </van-field>
   <van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
 </van-cell-group>
 ```
@@ -132,3 +147,9 @@ export default {
 | icon | 输入框尾部图标 | `string`  |  |  icon中支持的类型 |
 | onIconClick | 点击图标的回调函数 | `function`  |  |  |
 
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| icon | 自定义icon |
+

docs/examples-docs/icon.md

@@ -1,5 +1,7 @@
 <style>
 .demo-icon {
+  font-size: 0;
+
   .examples {
     max-height: none;
   }
@@ -7,18 +9,50 @@
   .van-col {
     text-align: center;
     height: 120px;
+    float: none;
+    display: inline-block;
   }
 
   .van-icon {
     font-size: 45px;
-    display: block;
     margin: 15px 0;
+    display: block;
+  }
+
+  span {
+    font-size: 14px;
   }
 } 
 </style>
 
+<script>
+import Vue from 'vue';
+import { Icon } from 'packages';
+
+Vue.component('van-icon-inner', Icon);
+Vue.component('van-icon', {
+  props: ['name'],
+
+  render(h) {
+    return <van-col span="8">
+      <van-icon-inner name={this.name}></van-icon-inner>
+      <span>{this.name}</span>
+    </van-col>
+  }
+});
+
+export default {};
+</script>
+
 ## Icon 图标
 
+### 使用指南
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
 ### 代码演示
 
 #### 基础用法
@@ -27,318 +61,89 @@
 
 :::demo 基础用法
 ```html
-<van-icon name="qr-invalid" style="text-align: center"></van-icon>
+<van-icon name="success"></van-icon>
 ```
 :::
 
-#### 所有Icons
-
-以下目前有的所有图标及其名称：
+#### 图标列表
 
 :::demo 所有Icon
 ```html
-<van-row>
-  <van-col span="8">
-    <van-icon name="qr-invalid"></van-icon>
-    <span>qr-invalid</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="qr"></van-icon>
-    <span>qr</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="exchange"></van-icon>
-    <span>exchange</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="close"></van-icon>
-    <span>close</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="location"></van-icon>
-    <span>location</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="upgrade"></van-icon>
-    <span>upgrade</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="check"></van-icon>
-    <span>check</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="checked"></van-icon>
-    <span>checked</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="like-o"></van-icon>
-    <span>like-o</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="like" style="color: red;"></van-icon>
-    <span>like</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="chat"></van-icon>
-    <span>chat</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="shop"></van-icon>
-    <span>shop</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="photograph"></van-icon>
-    <span>photograph</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="add"></van-icon>
-    <span>add</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="add2"></van-icon>
-    <span>add2</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="photo"></van-icon>
-    <span>photo</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="edit"></van-icon>
-    <span>edit</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="passed"></van-icon>
-    <span>passed</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="cart"></van-icon>
-    <span>cart</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="arrow"></van-icon>
-    <span>arrow</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="gift"></van-icon>
-    <span>gift</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="search"></van-icon>
-    <span>search</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="clear"></van-icon>
-    <span>clear</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="success"></van-icon>
-    <span>success</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="fail"></van-icon>
-    <span>fail</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="contact"></van-icon>
-    <span>contact</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="wechat"></van-icon>
-    <span>wechat</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="alipay"></van-icon>
-    <span>alipay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="password-view"></van-icon>
-    <span>password-view</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="wap-nav"></van-icon>
-    <span>wap-nav</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="password-not-view"></van-icon>
-    <span>password-not-view</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="wap-home"></van-icon>
-    <span>wap-home</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="ecard-pay"></van-icon>
-    <span>ecard-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="balance-pay"></van-icon>
-    <span>balance-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="peer-pay"></van-icon>
-    <span>peer-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="credit-pay"></van-icon>
-    <span>credit-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="debit-pay"></van-icon>
-    <span>debit-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="other-pay"></van-icon>
-    <span>other-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="cart"></van-icon>
-    <span>cart</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="browsing-history"></van-icon>
-    <span>browsing-history</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="goods-collect"></van-icon>
-    <span>goods-collect</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="shop-collect"></van-icon>
-    <span>shop-collect</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="receive-gift"></van-icon>
-    <span>receive-gift</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="send-gift"></van-icon>
-    <span>send-gift</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="setting"></van-icon>
-    <span>setting</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="points"></van-icon>
-    <span>points</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="coupon"></van-icon>
-    <span>coupon</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="free-postage"></van-icon>
-    <span>free-postage</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="discount"></van-icon>
-    <span>discount</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="birthday-privilege"></van-icon>
-    <span>birthday-privilege</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="member-day-privilege"></van-icon>
-    <span>member-day-privilege</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="balance-details"></van-icon>
-    <span>balance-details</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="cash-back-record"></van-icon>
-    <span>cash-back-record</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="points-mall"></van-icon>
-    <span>points-mall</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="exchange-record"></van-icon>
-    <span>exchange-record</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="pending-payment"></van-icon>
-    <span>pending-payment</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="pending-orders"></van-icon>
-    <span>pending-orders</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="pending-deliver"></van-icon>
-    <span>pending-deliver</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="logistics"></van-icon>
-    <span>logistics</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="pending-evaluate"></van-icon>
-    <span>pending-evaluate</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="cash-on-deliver"></van-icon>
-    <span>cash-on-deliver</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="gift-card-pay"></van-icon>
-    <span>gift-card-pay</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="underway"></van-icon>
-    <span>underway</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="point-gift"></van-icon>
-    <span>point-gift</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="after-sale"></van-icon>
-    <span>after-sale</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="edit-data"></van-icon>
-    <span>edit-data</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="question"></van-icon>
-    <span>question</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="delete"></van-icon>
-    <span>delete</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="records"></van-icon>
-    <span>records</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="description"></van-icon>
-    <span>description</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="card"></van-icon>
-    <span>card</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="gift-card"></van-icon>
-    <span>gift-card</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="coupon"></van-icon>
-    <span>coupon</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="clock"></van-icon>
-    <span>clock</span>
-  </van-col>
-  <van-col span="8">
-    <van-icon name="gold-coin"></van-icon>
-    <span>gold-coin</span>
-  </van-col>
-</van-row>
+<van-icon name="qr-invalid"></van-icon>
+<van-icon name="qr"></van-icon>
+<van-icon name="exchange"></van-icon>
+<van-icon name="close"></van-icon>
+<van-icon name="location"></van-icon>
+<van-icon name="upgrade"></van-icon>
+<van-icon name="check"></van-icon>
+<van-icon name="checked"></van-icon>
+<van-icon name="like-o"></van-icon>
+<van-icon name="like" style="color: red;"></van-icon>
+<van-icon name="chat"></van-icon>
+<van-icon name="shop"></van-icon>
+<van-icon name="photograph"></van-icon>
+<van-icon name="add"></van-icon>
+<van-icon name="add2"></van-icon>
+<van-icon name="photo"></van-icon>
+<van-icon name="edit"></van-icon>
+<van-icon name="passed"></van-icon>
+<van-icon name="cart"></van-icon>
+<van-icon name="arrow"></van-icon>
+<van-icon name="gift"></van-icon>
+<van-icon name="search"></van-icon>
+<van-icon name="clear"></van-icon>
+<van-icon name="success"></van-icon>
+<van-icon name="fail"></van-icon>
+<van-icon name="contact"></van-icon>
+<van-icon name="wechat"></van-icon>
+<van-icon name="alipay"></van-icon>
+<van-icon name="password-view"></van-icon>
+<van-icon name="wap-nav"></van-icon>
+<van-icon name="password-not-view"></van-icon>
+<van-icon name="wap-home"></van-icon>
+<van-icon name="ecard-pay"></van-icon>
+<van-icon name="balance-pay"></van-icon>
+<van-icon name="peer-pay"></van-icon>
+<van-icon name="credit-pay"></van-icon>
+<van-icon name="debit-pay"></van-icon>
+<van-icon name="other-pay"></van-icon>
+<van-icon name="cart"></van-icon>
+<van-icon name="browsing-history"></van-icon>
+<van-icon name="goods-collect"></van-icon>
+<van-icon name="shop-collect"></van-icon>
+<van-icon name="receive-gift"></van-icon>
+<van-icon name="send-gift"></van-icon>
+<van-icon name="setting"></van-icon>
+<van-icon name="points"></van-icon>
+<van-icon name="coupon"></van-icon>
+<van-icon name="free-postage"></van-icon>
+<van-icon name="discount"></van-icon>
+<van-icon name="birthday-privilege"></van-icon>
+<van-icon name="member-day-privilege"></van-icon>
+<van-icon name="balance-details"></van-icon>
+<van-icon name="cash-back-record"></van-icon>
+<van-icon name="points-mall"></van-icon>
+<van-icon name="exchange-record"></van-icon>
+<van-icon name="pending-payment"></van-icon>
+<van-icon name="pending-orders"></van-icon>
+<van-icon name="pending-deliver"></van-icon>
+<van-icon name="logistics"></van-icon>
+<van-icon name="pending-evaluate"></van-icon>
+<van-icon name="cash-on-deliver"></van-icon>
+<van-icon name="gift-card-pay"></van-icon>
+<van-icon name="underway"></van-icon>
+<van-icon name="point-gift"></van-icon>
+<van-icon name="after-sale"></van-icon>
+<van-icon name="edit-data"></van-icon>
+<van-icon name="question"></van-icon>
+<van-icon name="delete"></van-icon>
+<van-icon name="records"></van-icon>
+<van-icon name="description"></van-icon>
+<van-icon name="card"></van-icon>
+<van-icon name="gift-card"></van-icon>
+<van-icon name="coupon"></van-icon>
+<van-icon name="clock"></van-icon>
+<van-icon name="gold-coin"></van-icon>
 ```
 :::
 

docs/examples-docs/image-preview.md

@@ -7,7 +7,7 @@
 </style>
 
 <script>
-import { ImagePreview } from 'src/index';
+import { ImagePreview } from 'packages/index';
 
 export default {
   methods: {
@@ -41,7 +41,7 @@ import { ImagePreview } from 'vant';
 <van-button @click="handleImagePreview">预览图片</van-button>
 
 <script>
-import { ImagePreview } from 'src/index';
+import { ImagePreview } from 'packages/index';
 
 export default {
   methods: {

docs/examples-docs/layout.md

@@ -1,86 +1,75 @@
 <style>
 .demo-layout {
   .van-row {
-    padding: 0 20px;
+    padding: 0 15px;
   }
   .van-col {
-    margin-bottom: 10px;
-  }
-}
-
-.gray {
-    height: 30px;
-    line-height: 30px;
-    font-size: 12px;
-    background: #666;
     color: #fff;
-    text-align: center;
-}
-.white {
-    height: 30px;
+    font-size: 13px;
     line-height: 30px;
-    font-size: 12px;
-    background: #fff;
-    color: #333;
     text-align: center;
+    margin-bottom: 10px;
+    background-clip: content-box;
+
+    &:nth-child(odd) {
+      background-color: #39a9ed;
+    }
+
+    &:nth-child(even) {
+      background-color: #66c6f2;
+    }
+  }
 }
 </style>
 
 ## Layout 布局
 
-主要提供了`van-row`和`van-col`两个组件来进行行列布局。
+提供了`van-row`和`van-col`两个组件来进行行列布局
+
+### 使用指南
+``` javascript
+import { Row, Col } from 'vant';
+
+Vue.component(Row.name, Row);
+Vue.component(Col.name, Col);
+```
 
 ### 代码演示
 
-#### 常规用法
+#### 基本用法
 
-Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比    
+此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
 
-:::demo 常规用法
+:::demo 基本用法
 ```html
 <van-row>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="white">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
 </van-row>
+
 <van-row>
-  <van-col span="4">
-    <div class="gray">span: 4</div>
-  </van-col>
-  <van-col span="10" offset="4">
-    <div class="gray">offset: 4, span: 10</div>
-  </van-col>
+  <van-col span="4">span: 4</van-col>
+  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
 </van-row>
+
 <van-row>
-  <van-col offset="12" span="12">
-    <div class="gray">offset: 12, span: 12</div>
-  </van-col>
+  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
 </van-row>
 ```
 :::
 
-#### 在列元素之间增加间距
+#### 设置列元素间距
 
-列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
+通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
 
 :::demo 在列元素之间增加间距
 ```html
 <van-row gutter="20">
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
-  <van-col span="8">
-    <div class="gray">span: 8</div>
-  </van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
 </van-row>
 ```
 :::
@@ -91,9 +80,11 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | gutter | 列元素之间的间距（单位为px） | `String | Number`  | -  |   |
+| prefix | className 前缀 | `String`  | `van`  |   |
 
 #### Column
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | span | 列元素宽度 | `String | Number`  | -  |   |
-| offset | 列元素偏移宽度 | `String | Number`  | -  |   |
+| offset | 列元素偏移距离 | `String | Number`  | -  |   |
+| prefix | className 前缀 | `String`  | `van`  |   |

docs/examples-docs/loading.md

@@ -20,6 +20,13 @@
 
 ## Loading 加载
 
+### 使用指南
+``` javascript
+import { Loading } from 'vant';
+
+Vue.component(Loading.name, Loading);
+```
+
 ### 代码演示
 
 #### 渐变深色spinner

docs/examples-docs/panel.md

@@ -29,6 +29,13 @@
 
 ## Panel 面板
 
+### 使用指南
+``` javascript
+import { Panel } from 'vant';
+
+Vue.component(Panel.name, Panel);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/picker.md

@@ -38,6 +38,13 @@ export default {
 
 ## Picker 选择器
 
+### 使用指南
+``` javascript
+import { Picker } from 'vant';
+
+Vue.component(Picker.name, Picker);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/popup.md

@@ -75,6 +75,13 @@ export default {
 
 ## Popup 弹出菜单
 
+### 使用指南
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/progress.md

@@ -10,6 +10,13 @@
 
 ## Progress 进度条
 
+### 使用指南
+``` javascript
+import { Progress } from 'vant';
+
+Vue.component(Progress.name, Progress);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/quantity.md

@@ -23,6 +23,13 @@ export default {
 
 ## Quantity 数量选择
 
+### 使用指南
+``` javascript
+import { Quantity } from 'vant';
+
+Vue.component(Quantity.name, Quantity);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/quickstart.md

@@ -1,6 +1,6 @@
 ## Vant
 
-一套基于`Vue.js 2.0`的 Mobile 组件库
+基于`Vue 2.0`的 Mobile 组件库
 
 ### 安装
 
@@ -47,11 +47,11 @@ Vue.use(vant);
 
 ### 自定义主题
 
-`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
 
 #### 下载主题
 
-可以通过Github或npm来下载主题：
+可以通过 Github 或 npm 来下载主题：
 
 ```bash
 # npm

docs/examples-docs/radio.md

@@ -25,6 +25,13 @@ export default {
 
 ## Radio 单选框
 
+### 使用指南
+``` javascript
+import { Radio } from 'vant';
+
+Vue.component(Radio.name, Radio);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/search.md

@@ -16,6 +16,13 @@ export default {
 
 ## Search 搜索
 
+### 使用指南
+``` javascript
+import { Search } from 'vant';
+
+Vue.component(Search.name, Search);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/steps.md

@@ -28,6 +28,14 @@ export default {
 
 ## Steps 步骤条
 
+### 使用指南
+``` javascript
+import { Step, Steps } from 'vant';
+
+Vue.component(Step.name, Step);
+Vue.component(Steps.name, Steps);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/swipe.md

@@ -35,6 +35,13 @@ export default {
 
 ## Swipe 轮播
 
+### 使用指南
+``` javascript
+import { Swipe } from 'vant';
+
+Vue.component(Swipe.name, Swipe);
+```
+
 ### 代码演示
 
 #### 基础用法
@@ -64,6 +71,33 @@ export default {
 ```
 :::
 
+#### 隐藏指示器
+
+需要设置`show-indicators`属性为`false`，即会隐藏指示器。
+
+:::demo 隐藏指示器
+```html
+<van-swipe :show-indicators="false">
+  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
+    <img v-lazy="img" alt="">
+  </van-swipe-item>
+</van-swipe>
+
+<script>
+export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  }
+};
+</script>
+```
+:::
+
 #### 自动轮播
 
 需要设置`auto-play`属性为`true`，即会自动轮播。

docs/examples-docs/switch.md

@@ -43,6 +43,13 @@ export default {
 
 ## Switch 开关
 
+### 使用指南
+``` javascript
+import { Switch } from 'vant';
+
+Vue.component(Switch.name, Switch);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tab.md

@@ -49,6 +49,14 @@ export default {
 
 ## Tab 标签
 
+### 使用指南
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tag.md

@@ -10,6 +10,13 @@
 
 ## Tag 标记
 
+### 使用指南
+``` javascript
+import { Tag } from 'vant';
+
+Vue.component(Tag.name, Tag);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/toast.md

@@ -7,7 +7,7 @@
 </style>
 
 <script>
-import { Toast } from 'src/index';
+import { Toast } from 'packages/index';
 
 export default {
   methods: {
@@ -85,7 +85,7 @@ import { Toast } from 'vant';
 <van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
 
 <script>
-import { Toast } from 'src/index';
+import { Toast } from 'packages/index';
 
 export default {
   methods: {
@@ -137,7 +137,7 @@ export default {
 <van-button @click="closeToast">关闭</van-button>
 
 <script>
-import { Toast } from 'src/index';
+import { Toast } from 'packages/index';
 
 export default {
   methods: {
@@ -161,7 +161,7 @@ export default {
 <van-button @click="showHtmlToast">打开</van-button>
 
 <script>
-import { Toast } from 'src/index';
+import { Toast } from 'packages/index';
 
 export default {
   methods: {

docs/examples-docs/uploader.md

@@ -16,6 +16,13 @@ export default {
 
 ## Uploader 图片上传
 
+### 使用指南
+``` javascript
+import { Uploader } from 'vant';
+
+Vue.component(Uploader.name, Uploader);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/src/ExamplesApp.vue

@@ -54,37 +54,17 @@ export default {
 </script>
 
 <style>
-  html, body, div, span, applet, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center,
-  dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed, 
-  figure, figcaption, footer, header, hgroup, 
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    vertical-align: baseline;
-  }
-
   a {
     color: #4078c0;
     text-decoration: none;
   }
 
-  body, html {
-    height: 100%;
+  body {
+    -webkit-font-smoothing: antialiased;    
   }
 
-  body {
-    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+  body, html {
+    height: 100%;
   }
 
   .examples-container {
@@ -95,38 +75,6 @@ export default {
     -webkit-overflow-scrolling: touch;
   }
 
-  .page-back {
-    display: inline-block;
-    position: absolute;
-    top: 12px;
-    left: 10px;
-    width: 40px;
-    height: 40px;
-    text-align: center;
-    color: #333;
-    transform: rotate(180deg);
-
-    i {
-      font-size: 24px;
-      line-height: 40px;
-    }
-  }
-
-  .demo-title {
-    font-size: 16px;
-    display: block;
-    line-height: 1;
-    padding: 20px 15px 0;
-  }
-
-  .demo-sub-title {
-    font-size: 14px;
-    font-weight: normal;
-    color: #999;
-    padding: 0 15px;
-    margin: 30px 0 10px;
-  }
-
   .footer {
     margin-top: 30px;
     width: 100%;

docs/src/doc.config.js

@@ -40,7 +40,7 @@ module.exports = {
         ]
       },
       {
-        "name": "Vant组件",
+        "name": "组件列表",
         "showInMobile": true,
         "groups": [
           {
@@ -64,7 +64,7 @@ module.exports = {
               },
               {
                 "path": "/cell-swipe",
-                "title": "Cell Swipe 滑动单元格"
+                "title": "CellSwipe 滑动单元格"
               },
               {
                 "path": "/progress",
@@ -170,7 +170,7 @@ module.exports = {
               },
               {
                 "path": "/datetime-picker",
-                "title": "Datetime Picker 时间选择"
+                "title": "DatetimePicker 时间选择"
               },
               {
                 "path": "/dialog",

docs/src/examples.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './ExamplesApp';
 import routes from './router.config';
-import ZanUI from 'src/index';
+import ZanUI from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
 

docs/src/index.js

@@ -6,11 +6,11 @@ import ZanDoc from 'zan-doc';
 import DemoBlock from './components/demo-block';
 import 'packages/vant-css/src/index.css';
 
-function isMobile() {
+const isMobile = (function() {
   var platform = navigator.userAgent.toLowerCase();
   return (/(android|bb\d+|meego).+mobile|kdtunion|weibo|m2oapp|micromessenger|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i).test(platform) ||
     (/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(platform.substr(0, 4));
-}
+})();
 
 Vue.use(VueRouter);
 Vue.use(ZanDoc);
@@ -29,19 +29,20 @@ const router = new VueRouter({
 });
 
 router.beforeEach((route, redirect, next) => {
-  if (route.path !== '/') {
-    window.scrollTo(0, 0);
-  }
-
-  const pathname = '/zanui/vue/examples';
-  if (isMobile()) {
-    window.location.replace(pathname);
+  if (isMobile) {
+    window.location.replace('/zanui/vue/examples');
     return;
   }
   document.title = route.meta.title || document.title;
   next();
 });
 
+router.afterEach(() => {
+  if (!isMobile) {
+    window.scrollTo(0, 0);
+  }
+})
+
 new Vue({ // eslint-disable-line
   render: h => h(App),
   router