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);
+```
+
 ### 代码演示
 
 #### 基础用法