[Doc] new theme

2019-05-15 20:53:04 +08:00
parent 3cae4288f2
commit d0f4169c86
130 changed files with 1460 additions and 1147 deletions
@@ -1,4 +1,4 @@
-## ActionSheet
+# ActionSheet

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { ActionSheet } from 'vant';
 Vue.use(ActionSheet);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Use `actions` prop to set options of action-sheet. 

@@ -43,7 +43,7 @@ export default {
 }
 ```

-#### Status
+### Status

 ```html
 <van-action-sheet
@@ -67,7 +67,7 @@ export default {
 }
 ```

-#### ActionSheet with cancel button
+### ActionSheet with cancel button

 ```html
 <van-action-sheet
@@ -79,7 +79,7 @@ export default {
 />
 ```

-#### ActionSheet with title
+### ActionSheet with title

 ```html
 <van-action-sheet v-model="show" title="Title">
@@ -87,6 +87,8 @@ export default {
 </van-action-sheet>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## ActionSheet 上拉菜单
+# ActionSheet 上拉菜单

-### 使用指南
+### 引入
 ``` javascript
 import { ActionSheet } from 'vant';

 Vue.use(ActionSheet);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 `ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。

@@ -44,7 +44,7 @@ export default {
 }
 ```

-#### 选项状态
+### 选项状态

 选项可以设置为加载状态或禁用状态

@@ -70,7 +70,7 @@ export default {
 }
 ```

-#### 展示取消按钮
+### 展示取消按钮

 设置`cancelText`属性后，会在底部展示取消按钮，点击后关闭当前菜单

@@ -84,7 +84,7 @@ export default {
 />
 ```

-#### 展示标题栏
+### 展示标题栏

 通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容

@@ -94,6 +94,8 @@ export default {
 </van-action-sheet>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## AddressEdit
+# AddressEdit

 ### Install

@@ -8,9 +8,9 @@ import { AddressEdit } from 'vant';
 Vue.use(AddressEdit);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-address-edit
@@ -56,6 +56,7 @@ export default {
 }
 ```

+## API

 ### Props

@@ -102,9 +103,8 @@ Use ref to get address-edit instance and call instance methods
 |------|------|------|------|
 | setAddressDetail | addressDetail: string | - | Set address detail |

-### Data Structure
+### addressInfo Data Structure

-#### addressInfo Data Structure
 | key | Description | Type |
 |------|------|------|
 | id | Address Id | `String | Number` |
@@ -118,11 +118,13 @@ Use ref to get address-edit instance and call instance methods
 | postalCode | Postal code | `String` |
 | isDefault | Is default address | `Boolean` |

-#### searchResult Data Structure
+### searchResult Data Structure
+
 | key | Description | Type |
 |------|------|------|
 | name | Name | `String` |
 | address | Address | `String` |

-#### Area Data Structure
+### Area Data Structure
+
 Please refer to [Area](#/en-US/area) component。
@@ -1,15 +1,15 @@
-## AddressEdit 地址编辑
+# AddressEdit 地址编辑

-### 使用指南
+### 引入
 ``` javascript
 import { AddressEdit } from 'vant';

 Vue.use(AddressEdit);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-address-edit
@@ -55,6 +55,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -100,9 +102,7 @@ export default {
 |------|------|------|------|
 | setAddressDetail | addressDetail: string | - | 设置详细地址 |

-### 数据格式
-
-#### addressInfo 数据格式
+### addressInfo 数据格式

 注意：addressInfo 仅作为初始值传入，表单最终内容可以在 save 事件中获取

@@ -119,13 +119,13 @@ export default {
 | postalCode | 邮政编码 | `String` |
 | isDefault | 是否为默认地址 | `Boolean` |

-#### searchResult 数据格式
+### searchResult 数据格式

 | key | 说明 | 类型 |
 |------|------|------|
 | name | 地名 | `String` |
 | address | 详细地址 | `String` |

-#### 省市县列表数据格式
+### 省市县列表数据格式

 请参考 [Area](#/zh-CN/area) 组件。
@@ -1,4 +1,4 @@
-## AddressList
+# AddressList

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { AddressList } from 'vant';
 Vue.use(AddressList);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-address-list
@@ -63,6 +63,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## AddressList 地址列表
+# AddressList 地址列表

-### 使用指南
+### 引入
 ``` javascript
 import { AddressList } from 'vant';

 Vue.use(AddressList);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-address-list
@@ -64,6 +64,7 @@ export default {
 }
 ```

+## API

 ### Props

@@ -86,9 +87,7 @@ export default {
 | edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象，index: 索引 | 1.3.0 |
 | select-disabled | 选中不可配送的地址时触发 | item: 地址对象，index: 索引 | 1.3.0 |

-### 数据格式
-
-#### 地址列表字段说明
+### 地址列表字段说明

 | key | 说明 | 类型 |
 |------|------|------|
@@ -1,4 +1,7 @@
-## Area
+# Area
+
+### Intro
+
 The Picker component is usually used with [Popup](#/en-US/popup) Component.

 ### Install
@@ -9,9 +12,9 @@ import { Area } from 'vant';
 Vue.use(Area);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. 

@@ -19,7 +22,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
 <van-area :area-list="areaList" />
 ```

-#### Initial Value
+### Initial Value

 To have a selected value，simply pass the `code` of target area to `value` property.

@@ -27,7 +30,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 <van-area :area-list="areaList" value="110101" />
 ```

-#### Columns Number
+### Columns Number

 `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
 Set `columns-num` with 2, you'll have a 2 level picker.
@@ -36,6 +39,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 <van-area :area-list="areaList" :columns-num="2" title="Title" />
 ```

+## API

 ### Props

@@ -67,9 +71,7 @@ Use ref to get area instance and call instance methods
 |------|------|------|------|
 | reset | - | - | Reset all options |

-### Data Structure
-
-#### areaList
+### areaList Data Structure

 An object contains three properties: `province_list`, `city_list` and `county_list`. 
 Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
@@ -100,7 +102,8 @@ Example of `AreaList`

 All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)

-#### argument of callback function confirm
+### argument of callback function confirm
+
 An array contains selected area objects.

 `code` - code of selected area, `name` - name of selected area
@@ -1,7 +1,10 @@
-## Area 省市区选择
+# Area 省市区选择
+
+### 介绍
+
 省市取选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用

-### 使用指南
+### 引入

 ```javascript
 import { Area } from 'vant';
@@ -9,9 +12,9 @@ import { Area } from 'vant';
 Vue.use(Area);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节

@@ -19,7 +22,7 @@ Vue.use(Area);
 <van-area :area-list="areaList" />
 ```

-#### 选中省市区
+### 选中省市区

 如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`

@@ -27,7 +30,7 @@ Vue.use(Area);
 <van-area :area-list="areaList" value="110101" />
 ```

-#### 配置显示列
+### 配置显示列

 可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择

@@ -35,6 +38,8 @@ Vue.use(Area);
 <van-area :area-list="areaList" :columns-num="2" title="标题" />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -65,9 +70,7 @@ Vue.use(Area);
 |------|------|------|------|
 | reset | - | - | 重置所有选项到第一项 |

-### 数据格式
-
-#### 省市区列表数据格式
+### 省市区列表数据格式

 整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。

@@ -104,7 +107,7 @@ Vue.use(Area);

 完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)

-#### 点击完成时返回的数据格式
+### 点击完成时返回的数据格式

 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。

@@ -1,15 +1,16 @@
-## Button
+# Button

 ### Install
+
 ``` javascript
 import { Button } from 'vant';

 Vue.use(Button);
 ```

-### Usage
+## Usage

-#### Type
+### Type

 ```html
 <van-button type="default">Default</van-button>
@@ -19,28 +20,28 @@ Vue.use(Button);
 <van-button type="warning">Warning</van-button>
 ```

-#### Plain
+### Plain

 ```html
 <van-button plain type="primary">Primary</van-button>
 <van-button plain type="danger">Danger</van-button>
 ```

-#### Hairline
+### Hairline

 ```html
 <van-button plain hairline type="primary">Hairline</van-button>
 <van-button plain hairline type="danger">Hairline</van-button>
 ```

-#### Disabled
+### Disabled

 ```html
 <van-button disabled type="primary">Diabled</van-button>
 <van-button disabled type="danger">Diabled</van-button>
 ```

-#### Loading
+### Loading

 ```html 
 <van-button loading type="primary" />
@@ -52,14 +53,14 @@ Vue.use(Button);
 />
 ```

-#### Shape
+### Shape

 ```html 
 <van-button square type="primary">Square</van-button>
 <van-button round type="danger">Round</van-button>
 ```

-#### Size
+### Size

 ```html 
 <van-button size="large">Large</van-button>
@@ -68,6 +69,8 @@ Vue.use(Button);
 <van-button size="mini">Mini</van-button>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Button 按钮
+# Button 按钮
+
+### 引入

-### 使用指南
 ``` javascript
 import { Button } from 'vant';

 Vue.use(Button);
 ```

-### 代码演示
+## 代码演示

-#### 按钮类型
+### 按钮类型

 支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`

@@ -21,7 +22,7 @@ Vue.use(Button);
 <van-button type="danger">危险按钮</van-button>
 ```

-#### 朴素按钮
+### 朴素按钮

 通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

@@ -30,7 +31,7 @@ Vue.use(Button);
 <van-button plain type="danger">朴素按钮</van-button>
 ```

-#### 细边框
+### 细边框

 设置`hairline`属性可以开启 0.5px 边框，基于伪类实现

@@ -39,7 +40,7 @@ Vue.use(Button);
 <van-button plain hairline type="danger">细边框按钮</van-button>
 ```

-#### 禁用状态
+### 禁用状态

 通过`disabled`属性来禁用按钮，此时按钮不可点击

@@ -48,7 +49,7 @@ Vue.use(Button);
 <van-button disabled type="danger">禁用状态</van-button>
 ```

-#### 加载状态
+### 加载状态

 ```html 
 <van-button loading type="primary" />
@@ -60,14 +61,14 @@ Vue.use(Button);
 />
 ```

-#### 按钮形状
+### 按钮形状

 ```html 
 <van-button square type="primary">方形按钮</van-button>
 <van-button round type="danger">圆形按钮</van-button>
 ```

-#### 按钮尺寸
+### 按钮尺寸

 支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`

@@ -78,6 +79,8 @@ Vue.use(Button);
 <van-button size="mini">迷你按钮</van-button>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Card
+# Card

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { Card } from 'vant';
 Vue.use(Card);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-card
@@ -21,7 +21,7 @@ Vue.use(Card);
 />
 ```

-#### Advanced Usage
+### Advanced Usage

 Use slot to custom content.

@@ -42,6 +42,8 @@ Use slot to custom content.
 </van-card>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## Card 卡片
+# Card 卡片

-### 使用指南
+### 引入
 ``` javascript
 import { Card } from 'vant';

 Vue.use(Card);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-card
@@ -21,7 +21,7 @@ Vue.use(Card);
 />
 ```

-#### 高级用法
+### 高级用法

 可以通过具名插槽添加定制内容

@@ -42,6 +42,8 @@ Vue.use(Card);
 </van-card>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Cell
+# Cell

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { Cell, CellGroup } from 'vant';
 Vue.use(Cell).use(CellGroup);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-cell-group>
@@ -18,7 +18,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Size
+### Size

 ```html
 <van-cell-group>
@@ -27,7 +27,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Left Icon
+### Left Icon

 ```html
 <van-cell-group>
@@ -35,7 +35,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Value only
+### Value only

 ```html
 <van-cell-group>
@@ -43,7 +43,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Link
+### Link

 ```html
 <van-cell-group>
@@ -53,7 +53,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Router
+### Router

 ```html
 <van-cell-group>
@@ -62,7 +62,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Group Title
+### Group Title

 ```html
 <van-cell-group title="Group 1">
@@ -73,7 +73,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### Advanced Usage
+### Advanced Usage

 ```html
 <van-cell-group>
@@ -90,6 +90,8 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

+## API
+
 ### CellGroup Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## Cell 单元格
+# Cell 单元格

-### 使用指南
+### 引入
 ``` javascript
 import { Cell, CellGroup } from 'vant';

 Vue.use(Cell).use(CellGroup);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 `Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。

@@ -20,7 +20,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### 单元格大小
+### 单元格大小

 通过`size`属性可以控制单元格的大小

@@ -29,7 +29,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" value="内容" size="large" label="描述信息" />
 ```

-#### 展示图标
+### 展示图标

 通过`icon`属性在标题左侧展示图标

@@ -37,7 +37,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" icon="location-o" />
 ```

-#### 只设置 value
+### 只设置 value

 只设置`value`时会向左对齐

@@ -45,7 +45,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell value="内容" />
 ```

-#### 展示箭头
+### 展示箭头

 传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向

@@ -55,7 +55,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
 ```

-#### 页面跳转
+### 页面跳转

 可以通过`url`属性进行页面跳转，或通过`to`属性进行 vue-router 跳转

@@ -64,7 +64,7 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" is-link to="index" />
 ```

-#### 分组标题
+### 分组标题

 通过`CellGroup`的`title`属性可以指定分组标题

@@ -77,7 +77,7 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```

-#### 高级用法
+### 高级用法

 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容

@@ -94,6 +94,8 @@ Vue.use(Cell).use(CellGroup);
 </van-cell>
 ```

+## API
+
 ### CellGroup Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Checkbox
+# Checkbox

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { Checkbox, CheckboxGroup } from 'vant';
 Vue.use(Checkbox).use(CheckboxGroup);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-checkbox v-model="checked">Checkbox</van-checkbox>
@@ -25,19 +25,19 @@ export default {
 };
 ```

-#### Disabled
+### Disabled

 ```html
 <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
 ```

-#### Custom Color
+### Custom Color

 ```html
 <van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
 ```

-#### Custom Icon
+### Custom Icon

 Use icon slot to custom icon

@@ -64,7 +64,7 @@ export default {
 }
 ```

-#### Checkbox Group
+### Checkbox Group

 When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.

@@ -91,7 +91,7 @@ export default {
 };
 ```

-#### Maximum amount of checked options
+### Maximum amount of checked options

 ```html
 <van-checkbox-group v-model="result" :max="2">
@@ -105,7 +105,7 @@ export default {
 </van-checkbox-group>
 ```

-#### Inside a Cell
+### Inside a Cell

 ```html
 <van-checkbox-group v-model="result">
@@ -133,6 +133,7 @@ export default {
 }
 ```

+## API

 ### Checkbox Props

@@ -1,15 +1,15 @@
-## Checkbox 复选框
+# Checkbox 复选框

-### 使用指南
+### 引入
 ``` javascript
 import { Checkbox, CheckboxGroup } from 'vant';

 Vue.use(Checkbox).use(CheckboxGroup);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过`v-model`绑定 checkbox 的勾选状态

@@ -27,19 +27,19 @@ export default {
 };
 ```

-#### 禁用状态
+### 禁用状态

 ```html
 <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```

-#### 自定义颜色
+### 自定义颜色

 ```html
 <van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
 ```

-#### 自定义图标
+### 自定义图标

 通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态

@@ -66,7 +66,7 @@ export default {
 }
 ```

-#### 复选框组
+### 复选框组

 与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值

@@ -93,7 +93,7 @@ export default {
 };
 ```

-#### 设置最大可选数
+### 设置最大可选数

 ```html
 <van-checkbox-group v-model="result" :max="2">
@@ -107,7 +107,7 @@ export default {
 </van-checkbox-group>
 ```

-#### 搭配单元格组件使用
+### 搭配单元格组件使用

 此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换

@@ -137,6 +137,8 @@ export default {
 }
 ```

+## API
+
 ### Checkbox Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Circle
+# Circle

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { Circle } from 'vant';
 Vue.use(Circle);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-circle
@@ -35,7 +35,7 @@ export default {
 };
 ```

-#### Custom style
+### Custom style

 ```html
 <van-circle
@@ -52,6 +52,7 @@ export default {
 />
 ```

+## API

 ### Props

@@ -1,15 +1,15 @@
-## Circle 环形进度条
+# Circle 环形进度条

-### 使用指南
+### 引入
 ``` javascript
 import { Circle } from 'vant';

 Vue.use(Circle);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法
 通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度

 ```html
@@ -36,7 +36,7 @@ export default {
 };
 ```

-#### 样式定制
+### 样式定制

 ```html
 <van-circle
@@ -53,6 +53,7 @@ export default {
 />
 ```

+## API

 ### Props

@@ -1,21 +1,23 @@
-## Layout
+# Layout
+
+### Intro

 Quickly and easily create layouts with `van-row` and `van-col`

 ### Install
+
 ``` javascript
 import { Row, Col } from 'vant';

 Vue.use(Row).use(Col);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.

-
 ```html
 <van-row>
  <van-col span="8">span: 8</van-col>
@@ -35,7 +37,7 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
 ```


-#### Column Spacing
+### Column Spacing

 Set grid spacing using `gutter` attribute. The default value is 0

@@ -48,7 +50,7 @@ Set grid spacing using `gutter` attribute. The default value is 0
 </van-row>
 ```

-#### Flex Layout
+### Flex Layout

 Setting `type` to `flex` to enable flex layout

@@ -84,6 +86,7 @@ Setting `type` to `flex` to enable flex layout
 </van-row>
 ```

+## API

 ### Row Props

@@ -1,17 +1,21 @@
-## Layout 布局
+# Layout 布局

-提供了`van-row`和`van-col`两个组件来进行行列布局
+### 介绍
+
+Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
+
+
+### 引入

-### 使用指南
 ``` javascript
 import { Row, Col } from 'vant';

 Vue.use(Row).use(Col);
 ```

-### 代码演示
+## 代码演示

-#### 基本用法
+### 基本用法

 Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比    
 此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
@@ -33,7 +37,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
 </van-row>
 ```

-#### 设置列元素间距
+### 设置列元素间距

 通过`gutter`属性可以设置列元素之间的间距，默认间距为 0

@@ -45,7 +49,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
 </van-row>
 ```

-#### Flex 布局
+### Flex 布局

 将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐

@@ -86,6 +90,8 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
 </van-row>
 ```

+## API
+
 ### Row Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Collapse
+# Collapse

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { Collapse, CollapseItem } from 'vant';
 Vue.use(Collapse).use(CollapseItem);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Use `v-model` to control the name of active panels

@@ -31,7 +31,7 @@ export default {
 };
 ```

-#### Accordion
+### Accordion

 In accordion mode, only one panel can be expanded at the same time.

@@ -53,7 +53,7 @@ export default {
 };
 ```

-#### Custom title
+### Custom title

 ```html
 <van-collapse v-model="activeNames">
@@ -71,6 +71,8 @@ export default {
 </van-collapse>
 ```

+## API
+
 ### Collapse Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## Collapse 折叠面板
+# Collapse 折叠面板

-### 使用指南
+### 引入
 ``` javascript
 import { Collapse, CollapseItem } from 'vant';

 Vue.use(Collapse).use(CollapseItem);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过`v-model`控制展开的面板列表，`activeNames`为数组格式

@@ -31,7 +31,7 @@ export default {
 };
 ```

-#### 手风琴
+### 手风琴

 通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式

@@ -53,7 +53,7 @@ export default {
 };
 ```

-#### 自定义标题内容
+### 自定义标题内容

 ```html
 <van-collapse v-model="activeNames">
@@ -72,6 +72,8 @@ export default {
 </van-collapse>
 ```

+## API
+
 ### Collapse Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,6 +1,7 @@
-## Contact
+# Contact

 ### Install
+
 ``` javascript
 import { ContactCard, ContactList, ContactEdit } from 'vant';

@@ -10,10 +11,9 @@ Vue
  .use(ContactEdit);
 ```

-### Usage
-
-#### Basic Usage
+## Usage

+### Basic Usage

 ```html
 <!-- Contact Card -->
@@ -119,7 +119,7 @@ export default {
 };
 ```

-#### Uneditable
+### Uneditable

 ```html
 <van-contact-card
@@ -130,6 +130,7 @@ export default {
 />
 ```

+## API

 ### ContactCard Props

@@ -163,6 +164,7 @@ export default {
 | select | Triggered when select contact | item: contact object |

 ### ContactEdit Props
+
 | Attribute | Description | Type | Default |
 |------|------|------|------|------|
 | contact-info | Contact Info | `Object` | `[]` |
@@ -1,7 +1,11 @@
-## Contact 联系人
+# Contact 联系人
+
+### 介绍
+
 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。

-### 使用指南
+### 引入
+
 ``` javascript
 import { ContactCard, ContactList, ContactEdit } from 'vant';

@@ -11,9 +15,9 @@ Vue
  .use(ContactEdit);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <!-- 联系人卡片 -->
@@ -119,7 +123,7 @@ export default {
 };
 ```

-#### 不可编辑
+### 不可编辑

 ```html
 <van-contact-card
@@ -130,6 +134,8 @@ export default {
 />
 ```

+## API
+
 ### ContactCard Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -178,9 +184,7 @@ export default {
 | save | 点击保存按钮时触发 | content：表单内容 |
 | delete | 点击删除按钮时触发 | content：表单内容 |

-### 数据格式
-
-#### 联系人数据格式
+### 联系人数据格式

 | key | 说明 | 类型 |
 |------|------|------|
@@ -1,15 +1,16 @@
-## Coupon
+# Coupon

 ### Install
+
 ``` javascript
 import { CouponCell, CouponList } from 'vant';

 Vue.use(CouponCell).use(CouponList);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <!-- Coupon Cell -->
@@ -65,6 +66,8 @@ export default {
 }
 ```

+## API
+
 ### CouponCell Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Coupon 优惠券选择器
+# Coupon 优惠券选择器
+
+### 引入

-### 使用指南
 ``` javascript
 import { CouponCell, CouponList } from 'vant';

 Vue.use(CouponCell).use(CouponList);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <!-- 优惠券单元格 -->
@@ -65,6 +66,7 @@ export default {
 }
 ```

+## API

 ### CouponCell Props

@@ -103,9 +105,7 @@ export default {
 | change | 优惠券切换回调 | index, 选中优惠券的索引 |
 | exchange | 兑换优惠券回调 | code, 兑换码 |

-### 数据格式
-
-#### 优惠券字段说明
+### 优惠券字段说明

 | key | 说明 | 类型 |
 |------|------|------|
@@ -1,4 +1,7 @@
-## DatetimePicker
+# DatetimePicker
+
+### Intro
+
 The DatetimePicker component is usually used with [Popup](#/en-US/popup) Component.

 ### Install
@@ -8,9 +11,9 @@ import { DatetimePicker } from 'vant';
 Vue.use(DatetimePicker);
 ```

-### Usage
+## Usage

-#### Choose DateTime
+### Choose DateTime

 ```html
 <van-datetime-picker
@@ -35,7 +38,7 @@ export default {
 };
 ```

-#### Choose Date
+### Choose Date

 ```html
 <van-datetime-picker
@@ -55,7 +58,7 @@ export default {
 }
 ```

-#### Choose Year-Month
+### Choose Year-Month

 ```html
 <van-datetime-picker
@@ -87,7 +90,7 @@ export default {
 }
 ```

-#### Choose Time
+### Choose Time

 ```html
 <van-datetime-picker
@@ -108,6 +111,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,16 +1,20 @@
-## DatetimePicker 时间选择
+# DatetimePicker 时间选择
+
+### 介绍
+
 时间选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用

-### 使用指南
+### 引入
+
 ``` javascript
 import { DatetimePicker } from 'vant';

 Vue.use(DatetimePicker);
 ```

-### 代码演示
+## 代码演示

-#### 选择完整时间
+### 选择完整时间

 ```html
 <van-datetime-picker
@@ -35,7 +39,7 @@ export default {
 };
 ```

-#### 选择日期（年月日）
+### 选择日期（年月日）

 ```html
 <van-datetime-picker
@@ -55,7 +59,7 @@ export default {
 }
 ```

-#### 选择日期（年月）
+### 选择日期（年月）
 通过传入 `formatter` 函数对选项文字进行处理

 ```html
@@ -88,7 +92,7 @@ export default {
 }
 ```

-#### 选择时间
+### 选择时间

 ```html
 <van-datetime-picker
@@ -109,6 +113,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Dialog
+# Dialog

 ### Install

@@ -8,9 +8,9 @@ import { Dialog } from 'vant';
 Vue.use(Dialog);
 ```

-### Usage
+## Usage

-#### Alert dialog
+### Alert dialog

 Used to prompt for some messages, only including one confirm button

@@ -29,7 +29,7 @@ Dialog.alert({
 });
 ```

-#### Confirm dialog
+### Confirm dialog

 Used to confirm some messages, including a confirm button and a cancel button

@@ -44,7 +44,7 @@ Used to confirm some messages, including a confirm button and a cancel button
 });
 ```

-#### Asnyc Close
+### Asnyc Close

 ```js
 function beforeClose(action, done) {
@@ -62,7 +62,7 @@ Dialog.confirm({
 });
 ```

-#### $dialog Method
+### $dialog Method

 After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.

@@ -76,7 +76,7 @@ export default {
 }
 ```

-#### Advanced Usage
+### Advanced Usage

 If you need to render vue components within a dialog, you can use dialog component.

@@ -100,6 +100,8 @@ export default {
 }
 ```

+## API
+
 ### Methods

 | Name | Attribute | Return value | Description |
@@ -1,7 +1,10 @@
-## Dialog 弹出框
-Dialog 组件支持函数调用和组件调用两种形式
+# Dialog 弹出框

-### 使用指南
+### 介绍
+
+弹出框组件支持函数调用和组件调用两种形式
+
+### 引入

 ```js
 import { Dialog } from 'vant';
@@ -9,9 +12,9 @@ import { Dialog } from 'vant';
 Vue.use(Dialog);
 ```

-### 代码演示
+## 代码演示

-#### 消息提示
+### 消息提示

 用于提示一些消息，只包含一个确认按钮

@@ -30,7 +33,7 @@ Dialog.alert({
 });
 ```

-#### 消息确认
+### 消息确认

 用于确认消息，包含取消和确认按钮

@@ -45,7 +48,7 @@ Dialog.confirm({
 });
 ```

-#### 异步关闭
+### 异步关闭

 ```js
 function beforeClose(action, done) {
@@ -63,7 +66,7 @@ Dialog.confirm({
 });
 ```

-#### 全局方法
+### 全局方法

 引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法

@@ -77,7 +80,7 @@ export default {
 }
 ```

-#### 组件调用
+### 组件调用

 如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件

@@ -101,6 +104,8 @@ export default {
 }
 ```

+## API
+
 ### 方法

 | 方法名 | 参数 | 返回值 | 介绍 |
@@ -1,4 +1,4 @@
-## DropdownMenu
+# DropdownMenu

 ### Install

@@ -8,9 +8,9 @@ import { DropdownMenu, DropdownItem } from 'vant';
 Vue.use(DropdownMenu).use(DropdownItem);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-dropdown-menu>
@@ -76,6 +76,8 @@ export default {
 };
 ```

+## API
+
 ### DropdownMenu Props

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## DropdownMenu 下拉菜单
+# DropdownMenu 下拉菜单

-### 使用指南
+### 引入

 ``` javascript
 import { DropdownMenu, DropdownItem } from 'vant';
@@ -8,9 +8,9 @@ import { DropdownMenu, DropdownItem } from 'vant';
 Vue.use(DropdownMenu).use(DropdownItem);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-dropdown-menu>
@@ -78,6 +78,8 @@ export default {
 };
 ```

+## API
+
 ### DropdownMenu Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,17 @@
-## Field
+# Field

 ### Install
+
 ``` javascript
 import { Field } from 'vant';

 Vue.use(Field);
 ```

-### Usage
+## Usage
+
+### Basic Usage

-#### Basic Usage
 The value of field is bound with v-model.

 ```html
@@ -18,7 +20,8 @@ The value of field is bound with v-model.
 </van-cell-group>
 ```

-#### Custom type
+### Custom type
+
 Use `type` prop to custom diffrent type fields.

 ```html
@@ -43,7 +46,7 @@ Use `type` prop to custom diffrent type fields.
 </van-cell-group>
 ```

-#### Disabled
+### Disabled

 ```html
 <van-cell-group>
@@ -56,7 +59,8 @@ Use `type` prop to custom diffrent type fields.
 </van-cell-group>
 ```

-#### Error info
+### Error info
+
 Use `error` or `error-message` to show error info

 ```html
@@ -76,7 +80,8 @@ Use `error` or `error-message` to show error info
 </van-cell-group>
 ```

-#### Auto resize
+### Auto resize
+
 Textarea Field can be auto resize when has `autosize` prop

 ```html
@@ -92,7 +97,8 @@ Textarea Field can be auto resize when has `autosize` prop
 </van-cell-group>
 ```

-#### Insert button
+### Insert button
+
 Use button slot to insert button

 ```html
@@ -109,6 +115,8 @@ Use button slot to insert button
 </van-cell-group>
 ```

+## API
+
 ### Props

 Field support all native properties of input tag，such as `maxlength`、`placeholder`、`autofocus`
@@ -1,17 +1,19 @@
-## Field 输入框
+# Field 输入框

-`input`或`textarea`的输入框。
+### 介绍

-### 使用指南
+表单中的输入框组件，支持`input`和`textarea`两种类型
+
+### 引入
 ``` javascript
 import { Field } from 'vant';

 Vue.use(Field);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过 v-model 绑定输入框的值

@@ -21,7 +23,7 @@ Vue.use(Field);
 </van-cell-group>
 ```

-#### 自定义类型
+### 自定义类型

 根据`type`属性定义不同类型的输入框

@@ -47,7 +49,7 @@ Vue.use(Field);
 </van-cell-group>
 ```

-#### 禁用输入框
+### 禁用输入框

 ```html
 <van-cell-group>
@@ -60,7 +62,7 @@ Vue.use(Field);
 </van-cell-group>
 ```

-#### 错误提示
+### 错误提示

 通过`error`或者`error-message`属性增加对应的错误提示

@@ -81,7 +83,7 @@ Vue.use(Field);
 </van-cell-group>
 ```

-#### 高度自适应
+### 高度自适应

 对于 textarea，可以通过`autosize`属性设置高度自适应

@@ -98,7 +100,7 @@ Vue.use(Field);
 </van-cell-group>
 ```

-#### 插入按钮
+### 插入按钮

 通过 button 插槽可以在输入框尾部插入按钮

@@ -116,6 +118,8 @@ Vue.use(Field);
 </van-cell-group>
 ```

+## API
+
 ### Props

 Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`autofocus` 等
@@ -1,6 +1,7 @@
-## GoodsAction
+# GoodsAction

 ### Install
+
 ``` javascript
 import {
  GoodsAction,
@@ -14,8 +15,9 @@ Vue
  .use(GoodsActionIcon);
 ```

-### Usage
-#### Basic Usage
+## Usage
+
+### Basic Usage

 ```html
 <van-goods-action>
@@ -55,7 +57,7 @@ export default {
 }
 ```

-#### Icon info
+### Icon info

 Use `info` prop to show messages in upper right corner of icon

@@ -85,14 +87,15 @@ Use `info` prop to show messages in upper right corner of icon
 </van-goods-action>
 ```

-### Props
+## API

-#### GoodsAction
+### GoodsAction Props

 | Attribute | Description | Type | Default |
+|------|------|------|------|
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |

-#### GoodsActionIcon
+### GoodsActionIcon Props

 | Attribute | Description | Type | Default |
 |------|------|------|------|
@@ -104,7 +107,7 @@ Use `info` prop to show messages in upper right corner of icon
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
 | replace | If true, the navigation will not leave a history record | `Boolean` | `false` |

-#### GoodsActionButton
+### GoodsActionButton Props

 | Attribute | Description | Type | Default |
 |------|------|------|------|
@@ -1,6 +1,7 @@
-## GoodsAction 商品导航
+# GoodsAction 商品导航
+
+### 引入

-### 使用指南
 ``` javascript
 import {
  GoodsAction,
@@ -14,8 +15,9 @@ Vue
  .use(GoodsActionButton);
 ```

-### 代码演示
-#### 基础用法
+## 代码演示
+
+### 基础用法

 ```html
 <van-goods-action>
@@ -55,7 +57,8 @@ export default {
 }
 ```

-#### 图标提示
+### 图标提示
+
 通过`info`属性在图标右上角增加相应的提示

 ```html
@@ -84,15 +87,15 @@ export default {
 </van-goods-action>
 ```

-### Props
+## API

-#### GoodsAction
+### GoodsAction Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |

-#### GoodsActionIcon
+### GoodsActionIcon Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
@@ -104,7 +107,7 @@ export default {
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
 | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |

-#### GoodsActionButton
+### GoodsActionButton Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
@@ -1,15 +1,16 @@
-## Icon
+# Icon

 ### Install
+
 ``` javascript
 import { Icon } from 'vant';

 Vue.use(Icon);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Use `name` prop to set icon name or icon URL

@@ -18,21 +19,22 @@ Use `name` prop to set icon name or icon URL
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```

-#### Show Info
+### Show Info

 ```html
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```

-#### Use local font file
+### Use local font file
+
 Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.

 ```js
 import 'vant/lib/icon/local.css';
 ```

-#### Add custom iconfont
+### Add custom iconfont

 ```css
@font-face {
@@ -53,6 +55,8 @@ import 'vant/lib/icon/local.css';
 <van-icon class-prefix="my-icon" name="extra" />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Icon 图标
+# Icon 图标
+
+### 引入

-### 使用指南
 ``` javascript
 import { Icon } from 'vant';

 Vue.use(Icon);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 `Icon`的`name`属性支持传入图标名称或图片链接

@@ -18,14 +19,14 @@ Vue.use(Icon);
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```

-#### 显示徽标
+### 显示徽标

 ```html
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```

-#### 使用本地字体文件
+### 使用本地字体文件

 Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件

@@ -33,7 +34,7 @@ Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用
 import 'vant/lib/icon/local.css';
 ```

-#### 自定义图标
+### 自定义图标

 如果需要在现有 Icon 的基础上使用更多图标，可以引入你需要的 iconfont 对应的 ttf 文件和样式，之后就可以在 Icon 组件中直接使用

@@ -56,6 +57,8 @@ import 'vant/lib/icon/local.css';
 <van-icon class-prefix="my-icon" name="extra" />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## ImagePreview
+# ImagePreview

 ### Install

@@ -8,9 +8,9 @@ import { ImagePreview } from 'vant';
 Vue.use(ImagePreview);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```javascript
 ImagePreview([
@@ -19,7 +19,7 @@ ImagePreview([
 ]);
 ```

-#### Custom config
+### Custom config

 ```javascript
 ImagePreview({
@@ -34,7 +34,7 @@ ImagePreview({
 });
 ```

-#### Async Close
+### Async Close

 ```javascript
 const instance = ImagePreview({
@@ -50,7 +50,7 @@ setTimeout(() => {
 }, 1000);
 ```

-#### Component Call
+### Component Call

 ```html
 <van-image-preview
@@ -83,6 +83,8 @@ export default {
 }
 ```

+## API
+
 ### Options

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## ImagePreview 图片预览
+# ImagePreview 图片预览

-### 使用指南
+### 引入

 `ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。

@@ -10,9 +10,9 @@ import { ImagePreview } from 'vant';
 Vue.use(ImagePreview);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 直接传入图片数组，即可展示图片预览

@@ -23,7 +23,7 @@ ImagePreview([
 ]);
 ```

-#### 传入配置项
+### 传入配置项

 通过传入配置对象，可以指定初始图片的位置、监听关闭事件

@@ -40,7 +40,7 @@ ImagePreview({
 });
 ```

-#### 异步关闭
+### 异步关闭

 通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览

@@ -58,7 +58,7 @@ setTimeout(() => {
 }, 1000);
 ```

-#### 组件调用
+### 组件调用

 如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件

@@ -93,6 +93,8 @@ export default {
 }
 ```

+## API
+
 ### Options

 通过函数调用 `ImagePreview` 时，支持传入以下选项：
@@ -1,4 +1,4 @@
-## IndexBar
+# IndexBar

 ### Install

@@ -8,9 +8,9 @@ import { IndexBar } from 'vant';
 Vue.use(IndexBar);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-index-bar>
@@ -28,7 +28,7 @@ Vue.use(IndexBar);
 </van-index-bar>
 ```

-#### Custom Index List
+### Custom Index List

 ```html
 <van-index-bar :index-list="indexList">
@@ -56,6 +56,8 @@ export default {
 }
 ```

+## API
+
 ### IndexBar Props

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## IndexBar 索引栏
+# IndexBar 索引栏

-### 使用指南
+### 引入

 ``` javascript
 import { IndexBar, IndexAnchor } from 'vant';
@@ -8,9 +8,9 @@ import { IndexBar, IndexAnchor } from 'vant';
 Vue.use(IndexBar).use(IndexAnchor);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置

@@ -30,7 +30,7 @@ Vue.use(IndexBar).use(IndexAnchor);
 </van-index-bar>
 ```

-#### 自定义索引列表
+### 自定义索引列表

 可以通过`index-list`属性自定义展示的索引字符列表，

@@ -60,6 +60,8 @@ export default {
 }
 ```

+## API
+
 ### IndexBar Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Lazyload
+# Lazyload

 ### Install

@@ -9,9 +9,9 @@ import { Lazyload } from 'vant';
 Vue.use(Lazyload, options);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <img v-for="img in imageList" v-lazy="img" >
@@ -30,14 +30,15 @@ export default {
 }
 ```

-#### Lazyload Background Image
+### Lazyload Background Image
+
 Use `v-lazy:background-image` to set background url, and declare the height of the container.

 ```html
 <div v-for="img in imageList" v-lazy:background-image="img" />
 ```

-#### Lazyload Component
+### Lazyload Component

 ```html
 <lazy-component>
@@ -45,6 +46,8 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
 </lazy-component>
 ```

+## API
+
 ### Options

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## Lazyload 图片懒加载
+# Lazyload 图片懒加载

-### 使用指南
+### 引入

 `Lazyload` 是 `Vue` 指令，使用前需要对指令进行注册

@@ -12,9 +12,10 @@ import { Lazyload } from 'vant';
 Vue.use(Lazyload, options);
 ```

-### 代码演示
+## 代码演示
+
+### 基础用法

-#### 基础用法
 将`v-lazy`指令的值设置为你需要懒加载的图片

 ```html
@@ -34,7 +35,7 @@ export default {
 }
 ```

-#### 背景图懒加载
+### 背景图懒加载

 和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。

@@ -42,7 +43,7 @@ export default {
 <div v-for="img in imageList" v-lazy:background-image="img" />
 ```

-#### 懒加载模块
+### 懒加载模块

 懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。

@@ -52,6 +53,8 @@ export default {
 </lazy-component>
 ```

+## API
+
 ### Options

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,16 +1,20 @@
-## List
+# List
+
+### Intro
+
 A list component to show items and control loading status.

 ### Install
+
 ``` javascript
 import { List } from 'vant';

 Vue.use(List);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-list
@@ -91,6 +95,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,16 +1,20 @@
-## List 列表
+# List 列表
+
+### 介绍
+
 瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

-### 使用指南
+### 引入
+
 ``` javascript
 import { List } from 'vant';

 Vue.use(List);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 List 组件通过`loading`和`finished`两个变量控制加载状态，当组件滚动到底部时，会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据，数据更新完毕后，将`loading`设置成`false`即可。若数据已全部加载完毕，则直接将`finished`设置成`true`即可。

@@ -98,6 +102,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,40 +1,43 @@
-## Loading
+# Loading

 ### Install
+
 ``` javascript
 import { Loading } from 'vant';

 Vue.use(Loading);
 ```

-### Usage
+## Usage

-#### Type
+### Type

 ```html
 <van-loading />
 <van-loading type="spinner" />
 ```

-#### Color
+### Color

 ```html
 <van-loading color="#1989fa" />
 <van-loading type="spinner" color="#1989fa" />
 ```

-#### Text
+### Text

 ```html
 <van-loading size="24px">Loading...</van-loading>
 ```

-#### Vertical
+### Vertical

 ```html
 <van-loading size="24px" vertical>Loading...</van-loading>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,40 +1,43 @@
-## Loading 加载
+# Loading 加载
+
+### 引入

-### 使用指南
 ``` javascript
 import { Loading } from 'vant';

 Vue.use(Loading);
 ```

-### 代码演示
+## 代码演示

-#### 加载类型
+### 加载类型

 ```html
 <van-loading />
 <van-loading type="spinner" />
 ```

-#### 自定义颜色
+### 自定义颜色

 ```html
 <van-loading color="#1989fa" />
 <van-loading type="spinner" color="#1989fa" />
 ```

-#### 加载文案
+### 加载文案

 ```html
 <van-loading size="24px">加载中...</van-loading>
 ```

-#### 垂直排列
+### 垂直排列

 ```html
 <van-loading size="24px" vertical>加载中...</van-loading>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,7 +1,11 @@
-## Internationalization
+# Internationalization
+
+### Intro
+
 The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below.

 ### Switch languages
+
 Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to diffrent languages.

 ```js
@@ -12,6 +16,7 @@ Locale.use('en-US', enUS);
 ```

 ### Modify default configs
+
 Use `Locale.add` method to modify the default configs.

 ```js
@@ -29,6 +34,7 @@ Locale.add(messages);
 ```

 ### Config files
+
 Current supported languages:

 | Language | Filename |
@@ -1,7 +1,11 @@
-## 国际化
+# 国际化
+
+### 介绍
+
 Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案

 ### 多语言切换
+
 Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。

 ```js
@@ -12,6 +16,7 @@ Locale.use('en-US', enUS);
 ```

 ### 修改默认文案
+
 通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：

 ```js
@@ -1,15 +1,16 @@
-## NavBar
+# NavBar

 ### Install
+
 ``` javascript
 import { NavBar } from 'vant';

 Vue.use(NavBar);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-nav-bar
@@ -35,7 +36,7 @@ export default {
 }
 ```

-#### Advanced Usage
+### Advanced Usage

 ```html
 <van-nav-bar title="Title" left-text="Back" left-arrow>
@@ -43,6 +44,7 @@ export default {
 </van-nav-bar>
 ```

+## API

 ### Props

@@ -1,15 +1,16 @@
-## NavBar 导航栏
+# NavBar 导航栏
+
+### 引入

-### 使用指南
 ``` javascript
 import { NavBar } from 'vant';

 Vue.use(NavBar);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-nav-bar
@@ -35,7 +36,8 @@ export default {
 }
 ```

-#### 高级用法
+### 高级用法
+
 通过插槽定制内容

 ```html
@@ -44,6 +46,7 @@ export default {
 </van-nav-bar>
 ```

+## API

 ### Props

@@ -1,15 +1,16 @@
-## NoticeBar
+# NoticeBar

 ### Install
+
 ``` javascript
 import { NoticeBar } from 'vant';

 Vue.use(NoticeBar);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-notice-bar
@@ -18,7 +19,7 @@ Vue.use(NoticeBar);
 />
 ```

-#### Disable scroll
+### Disable scroll

 ```html
 <van-notice-bar :scrollable="false">
@@ -26,7 +27,7 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

-#### Wrapable
+### Wrapable

 ```html
 <van-notice-bar wrapable :scrollable="false">
@@ -34,7 +35,7 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

-#### Mode
+### Mode

 ```html
 <van-notice-bar mode="closeable">
@@ -58,6 +59,8 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## NoticeBar 通知栏
+# NoticeBar 通知栏
+
+### 引入

-### 使用指南
 ``` javascript
 import { NoticeBar } from 'vant';

 Vue.use(NoticeBar);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-notice-bar
@@ -18,7 +19,7 @@ Vue.use(NoticeBar);
 />
 ```

-#### 禁用滚动
+### 禁用滚动

 文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动

@@ -28,7 +29,7 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

-#### 多行展示
+### 多行展示

 禁用滚动时，可以设置`wrapable`来开启多行展示

@@ -38,7 +39,7 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

-#### 通知栏模式
+### 通知栏模式

 默认模式为空，支持`closeable`和`link`两种模式

@@ -66,6 +67,8 @@ Vue.use(NoticeBar);
 </van-notice-bar>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Notify
+# Notify

 ### Install

@@ -8,15 +8,15 @@ import { Notify } from 'vant';
 Vue.use(Notify);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```js
 Notify('Notify Message');
 ```

-#### Custom Config
+### Custom Config

 ```js
 Notify({
@@ -26,7 +26,7 @@ Notify({
 });
 ```

-#### $notify Method
+### $notify Method

 After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.

@@ -38,6 +38,8 @@ export default {
 }
 ```

+## API
+
 ### Methods

 | Methods | Attribute | Return value | Description |
@@ -1,21 +1,22 @@
-## Notify 消息提示
+# Notify 消息提示
+
+### 引入

-### 使用指南
 ``` javascript
 import { Notify } from 'vant';

 Vue.use(Notify);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```js
 Notify('通知内容');
 ```

-#### 自定义配置
+### 自定义配置

 ```js
 Notify({
@@ -25,7 +26,7 @@ Notify({
 });
 ```

-#### 组件内调用
+### 组件内调用

 引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。

@@ -37,6 +38,8 @@ export default {
 }
 ```

+## API
+
 ### 方法

 | 方法名 | 参数 | 返回值 | 介绍 |
@@ -1,4 +1,4 @@
-## NumberKeyboard
+# NumberKeyboard

 ### Install
 ``` javascript
@@ -7,9 +7,9 @@ import { NumberKeyboard } from 'vant';
 Vue.use(NumberKeyboard);
 ```

-### Usage
+## Usage

-#### Default Style
+### Default Style

 ```html
 <van-button @touchstart.stop="show = true">
@@ -45,7 +45,7 @@ export default {
 }
 ```

-#### Custom Style
+### Custom Style

 ```html
 <van-number-keyboard
@@ -59,6 +59,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## NumberKeyboard 数字键盘
+# NumberKeyboard 数字键盘
+
+### 引入

-### 使用指南
 ``` javascript
 import { NumberKeyboard } from 'vant';

 Vue.use(NumberKeyboard);
 ```

-### 代码演示
+## 代码演示

-#### 默认样式
+### 默认样式

 ```html
 <van-button @touchstart.stop="show = true">
@@ -45,7 +46,7 @@ export default {
 }
 ```

-#### 自定义样式
+### 自定义样式

 ```html
 <van-number-keyboard
@@ -59,6 +60,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Pagination
+# Pagination

 ### Install
+
 ``` javascript
 import { Pagination } from 'vant';

 Vue.use(Pagination);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-pagination 
@@ -29,7 +30,7 @@ export default {
 }
 ```

-#### Simple mode
+### Simple mode

 ```html
 <van-pagination 
@@ -39,7 +40,7 @@ export default {
 />
 ```

-#### Show ellipses
+### Show ellipses

 ```html
 <van-pagination 
@@ -50,6 +51,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,17 +1,17 @@

-## Pagination 分页
+# Pagination 分页
+
+### 引入

-### 使用指南
 ``` javascript
 import { Pagination } from 'vant';

 Vue.use(Pagination);
 ```

-### 代码演示
-
-#### 基础用法
+## 代码演示

+### 基础用法

 ```html
 <van-pagination 
@@ -31,7 +31,7 @@ export default {
 }
 ```

-#### 简单模式
+### 简单模式

 ```html
 <van-pagination 
@@ -41,7 +41,7 @@ export default {
 />
 ```

-#### 显示省略号
+### 显示省略号

 ```html
 <van-pagination 
@@ -52,6 +52,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Panel
+# Panel

 ### Install
+
 ``` javascript
 import { Panel } from 'vant';

 Vue.use(Panel);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-panel title="Title" desc="Description" status="Status">
@@ -17,7 +18,7 @@ Vue.use(Panel);
 </van-panel>
 ```

-#### Advanced Usage
+### Advanced Usage

 ```html
 <van-panel title="Title" desc="Description" status="Status">
@@ -29,6 +30,8 @@ Vue.use(Panel);
 </van-panel>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,17 @@
-## Panel 面板
+# Panel 面板
+
+### 引入

-### 使用指南
 ``` javascript
 import { Panel } from 'vant';

 Vue.use(Panel);
 ```

-### 代码演示
+## 代码演示
+
+### 基础用法

-#### 基础用法
 面板只是一个容器，里面可以放入自定义的内容

 ```html
@@ -18,7 +20,8 @@ Vue.use(Panel);
 </van-panel>
 ```

-#### 高级用法
+### 高级用法
+
 使用`slot`自定义内容

 ```html
@@ -31,6 +34,8 @@ Vue.use(Panel);
 </van-panel>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,16 +1,20 @@
-## PasswordInput
+# PasswordInput
+
+### Intro
+
 The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.

 ### Install
+
 ``` javascript
 import { PasswordInput, NumberKeyboard } from 'vant';

 Vue.use(PasswordInput).use(NumberKeyboard);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <!-- PasswordInput -->
@@ -49,7 +53,7 @@ export default {
 }
 ```

-#### Without mask
+### Without mask

 ```html
 <van-password-input
@@ -59,6 +63,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,16 +1,19 @@
-## PasswordInput 密码输入框
+# PasswordInput 密码输入框
+
+### 介绍
+
 密码输入框组件通常与 [数字键盘](#/zh-CN/number-keyboard) 组件配合使用

-### 使用指南
+### 引入
 ``` javascript
 import { PasswordInput, NumberKeyboard } from 'vant';

 Vue.use(PasswordInput).use(NumberKeyboard);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <!-- 密码输入框 -->
@@ -49,7 +52,7 @@ export default {
 }
 ```

-#### 明文展示
+### 明文展示

 ```html
 <!-- 密码输入框 -->
@@ -1,16 +1,20 @@
-## Picker
+# Picker
+
+### Intro
+
 The Picker component is usually used with [Popup](#/en-US/popup) Component.

 ### Install
+
 ``` javascript
 import { Picker } from 'vant';

 Vue.use(Picker);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-picker :columns="columns" @change="onChange" />
@@ -31,7 +35,7 @@ export default {
 };
 ```

-#### Default Index
+### Default Index

 ```html
 <van-picker
@@ -41,7 +45,7 @@ export default {
 />
 ```

-#### Show Toolbar
+### Show Toolbar

 ```html
 <van-picker
@@ -71,7 +75,7 @@ export default {
 };
 ```

-#### Disable option
+### Disable option

 ```html
 <van-picker :columns="columns" />
@@ -91,7 +95,7 @@ export default {
 };
 ```

-#### Multi columns
+### Multi columns

 ```html
 <van-picker :columns="columns" @change="onChange" />
@@ -127,13 +131,16 @@ export default {
 };
 ```

-#### Loading
+### Loading
+
 When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt

 ```html
 <van-picker :columns="columns" loading />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,16 +1,20 @@
-## Picker 选择器
+# Picker 选择器
+
+### 介绍
+
 选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用

-### 使用指南
+### 引入
+
 ``` javascript
 import { Picker } from 'vant';

 Vue.use(Picker);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 对于单列选择器，传入数值格式的 columns 即可，同时可以监听选项改变的 change 事件

@@ -33,7 +37,7 @@ export default {
 };
 ```

-#### 默认选中项
+### 默认选中项

 单列选择器可以直接通过`default-index`属性设置初始选中项的索引值

@@ -45,7 +49,7 @@ export default {
 />
 ```

-#### 展示顶部栏
+### 展示顶部栏

 通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏，并可以监听对应的`confirm`和`cancel`事件

@@ -77,7 +81,7 @@ export default {
 };
 ```

-#### 禁用选项
+### 禁用选项

 选项可以为对象结构，通过设置 disabled 来禁用该选项

@@ -99,7 +103,7 @@ export default {
 };
 ```

-#### 多列联动
+### 多列联动

 ```html
 <van-picker :columns="columns" @change="onChange" />
@@ -135,7 +139,7 @@ export default {
 };
 ```

-#### 加载状态
+### 加载状态

 若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示

@@ -143,6 +147,8 @@ export default {
 <van-picker :columns="columns" loading />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Popup
+# Popup

 ### Install
+
 ``` javascript
 import { Popup } from 'vant';

 Vue.use(Popup);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Popup is located in the middle of the screen by default

@@ -27,7 +28,7 @@ export default {
 };
 ```

-#### Position
+### Position

 Use `position` prop to set popup display position

@@ -37,6 +38,8 @@ Use `position` prop to set popup display position
 </van-popup>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Popup 弹出层
+# Popup 弹出层
+
+### 引入

-### 使用指南
 ``` javascript
 import { Popup } from 'vant';

 Vue.use(Popup);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 `Popup`默认从中间弹出

@@ -27,7 +28,7 @@ export default {
 };
 ```

-#### 弹出位置
+### 弹出位置

 通过`position`属性设置`Popup`弹出位置

@@ -37,6 +38,8 @@ export default {
 </van-popup>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,17 @@
-## Progress
+# Progress

 ### Install
+
 ``` javascript
 import { Progress } from 'vant';

 Vue.use(Progress);
 ```

-### Usage
+## Usage
+
+### Basic Usage

-#### Basic Usage
 Use 'percentage' prop to set current progress

 ```html
@@ -17,14 +19,15 @@ Use 'percentage' prop to set current progress
 ```


-#### Inactive
+### Inactive

 ```html
 <van-progress inactive :percentage="50" />
 ```


-#### Custom Style
+### Custom Style
+
 Use `pivot-text` to custom text，use `color` to custom bar color

 ```html
@@ -48,6 +51,8 @@ Use `pivot-text` to custom text，use `color` to custom bar color
 />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Progress 进度条
+# Progress 进度条
+
+### 引入

-### 使用指南
 ``` javascript
 import { Progress } from 'vant';

 Vue.use(Progress);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 进度条默认为蓝色，使用`percentage`属性来设置当前进度

@@ -17,15 +18,13 @@ Vue.use(Progress);
 <van-progress :percentage="50" />
 ```

-
-#### 置灰
+### 置灰

 ```html
 <van-progress inactive :percentage="50" />
 ```

-
-#### 样式定制
+### 样式定制

 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色

@@ -50,6 +49,8 @@ Vue.use(Progress);
 />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,17 @@
-## PullRefresh
+# PullRefresh

 ### Install
+
 ``` javascript
 import { PullRefresh } from 'vant';

 Vue.use(PullRefresh);
 ```

-### Usage
+## Usage
+
+### Basic Usage

-#### Basic Usage
 The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.

 ```html
@@ -39,6 +41,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -53,14 +57,12 @@ export default {
 | head-height | Height of head | `Number` | `50` |
 | disabled | Whether to disable | `Boolean` | `false` |

-
 ### Events

 | Event | Description | Parameters |
 |------|------|------|
 | refresh | Triggered when pull refresh | - |

-
 ### Slots

 | Name | Description |
@@ -1,15 +1,16 @@
-## PullRefresh 下拉刷新
+# PullRefresh 下拉刷新
+
+### 引入

-### 使用指南
 ``` javascript
 import { PullRefresh } from 'vant';

 Vue.use(PullRefresh);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。

@@ -40,6 +41,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,6 +1,7 @@
-## Radio
+# Radio

 ### Install
+
 ``` javascript
 import { RadioGroup, Radio } from 'vant';

@@ -8,9 +9,9 @@ Vue.use(RadioGroup);
 Vue.use(Radio);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Use `v-model` to bind the name of checked radio

@@ -31,7 +32,7 @@ export default {
 };
 ```

-#### Disabled
+### Disabled

 ```html
 <van-radio-group v-model="radio" disabled>
@@ -40,13 +41,13 @@ export default {
 </van-radio-group>
 ```

-#### Custom Color
+### Custom Color

 ```html
 <van-radio checked-color="#07c160">Radio</van-radio>
 ```

-#### Custom Icon
+### Custom Icon

 Use icon slot to custom icon

@@ -73,7 +74,7 @@ export default {
 }
 ```

-#### Inside a Cell
+### Inside a Cell

 ```html
 <van-radio-group v-model="radio">
@@ -88,6 +89,8 @@ export default {
 </van-radio-group>
 ```

+## API
+
 ### Radio Props

 | Attribute | Description | Type | Default |
@@ -1,6 +1,7 @@
-## Radio 单选框
+# Radio 单选框
+
+### 引入

-### 使用指南
 ``` javascript
 import { RadioGroup, Radio } from 'vant';

@@ -8,9 +9,9 @@ Vue.use(RadioGroup);
 Vue.use(Radio);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过`v-model`绑定值当前选中项的 name

@@ -31,7 +32,7 @@ export default {
 };
 ```

-#### 禁用状态
+### 禁用状态

 通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项

@@ -42,13 +43,13 @@ export default {
 </van-radio-group>
 ```

-#### 自定义颜色
+### 自定义颜色

 ```html
 <van-radio checked-color="#07c160">复选框</van-radio>
 ```

-#### 自定义图标
+### 自定义图标

 通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态

@@ -75,7 +76,7 @@ export default {
 }
 ```

-#### 与 Cell 组件一起使用
+### 与 Cell 组件一起使用

 此时你需要再引入`Cell`和`CellGroup`组件。

@@ -92,6 +93,8 @@ export default {
 </van-radio-group>
 ```

+## API
+
 ### Radio Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Rate
+# Rate

 ### Install
+
 ``` javascript
 import { Rate } from 'vant';

 Vue.use(Rate);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-rate v-model="value" />
@@ -25,7 +26,7 @@ export default {
 }
 ```

-#### Custom Icon
+### Custom Icon

 ```html
 <van-rate
@@ -35,7 +36,7 @@ export default {
 />
 ```

-#### Custom Style
+### Custom Style

 ```html
 <van-rate
@@ -47,7 +48,7 @@ export default {
 />
 ```

-#### Half Star
+### Half Star

 ```html
 <van-rate
@@ -68,24 +69,26 @@ export default {
 }
 ```

-#### Custom Count
+### Custom Count

 ```html
 <van-rate v-model="value" :count="6" />
 ```

-#### Disabled
+### Disabled

 ```html
 <van-rate v-model="value" disabled />
 ```

-#### Readonly
+### Readonly

 ```html
 <van-rate v-model="value" readonly />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,15 @@
-## Rate 评分
+# Rate 评分

-### 使用指南
+### 引入
 ``` javascript
 import { Rate } from 'vant';

 Vue.use(Rate);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-rate v-model="value" />
@@ -25,7 +25,7 @@ export default {
 }
 ```

-#### 自定义图标
+### 自定义图标

 ```html
 <van-rate
@@ -35,7 +35,7 @@ export default {
 />
 ```

-#### 自定义样式
+### 自定义样式

 ```html
 <van-rate
@@ -47,7 +47,7 @@ export default {
 />
 ```

-#### 半星
+### 半星

 ```html
 <van-rate
@@ -68,24 +68,26 @@ export default {
 }
 ```

-#### 自定义数量
+### 自定义数量

 ```html
 <van-rate v-model="value" :count="6" />
 ```

-#### 禁用状态
+### 禁用状态

 ```html
 <van-rate v-model="value" disabled />
 ```

-#### 只读状态
+### 只读状态

 ```html
 <van-rate v-model="value" readonly />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Search
+# Search

 ### Install
+
 ``` javascript
 import { Search } from 'vant';

 Vue.use(Search);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-search placeholder="Placeholder" v-model="value" />
@@ -23,7 +24,8 @@ export default {
 }
 ```

-#### Listen to Events
+### Listen to Events
+
 `search` event will be triggered when click the search button on the keyboard.

 `cancel` event will be triggered when click the cancel button.
@@ -42,7 +44,8 @@ Tips: There will be a search button on the keyboard when Search is inside a form
 </form>
 ```

-#### Custom Button
+### Custom Button
+
 Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot

 ```html
@@ -56,6 +59,8 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
 </van-search>
 ```

+## API
+
 ### Props

 Search support all native properties of input tag，such as `maxlength`、`placeholder`、`autofocus`
@@ -1,22 +1,25 @@
-## Search 搜索
+# Search 搜索
+
+### 引入

-### 使用指南
 ``` javascript
 import { Search } from 'vant';

 Vue.use(Search);
 ```

-### 代码演示
+## 代码演示
+
+### 基础用法

-#### 基础用法
 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

 ```html
 <van-search placeholder="请输入搜索关键词" v-model="value" />
 ```

-#### 监听对应事件
+### 监听对应事件
+
 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发

 Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
@@ -33,7 +36,8 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 </form>
 ```

-#### 自定义行动按钮
+### 自定义行动按钮
+
 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的插槽即可。使用此插槽以后，原有的 cancel 事件不再生效。

 ```html
@@ -48,6 +52,8 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 </van-search>
 ```

+## API
+
 ### Props

 Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`autofocus` 等
@@ -1,4 +1,4 @@
-## Sidebar
+# Sidebar

 ### Install

@@ -9,9 +9,9 @@ Vue.use(Sidebar);
 Vue.use(SidebarItem);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 Use `active-key` prop to set index of chosen item

@@ -40,6 +40,8 @@ export default {
 };
 ```

+## API
+
 ### Sidebar Props

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## Sidebar 侧边导航
+# Sidebar 侧边导航

-### 使用指南
+### 引入

 ``` javascript
 import { Sidebar, SidebarItem } from 'vant';
@@ -9,9 +9,9 @@ Vue.use(Sidebar);
 Vue.use(SidebarItem);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过在`van-sidebar`上设置`active-key`属性来控制选中项

@@ -40,6 +40,8 @@ export default {
 };
 ```

+## API
+
 ### Sidebar Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,4 +1,4 @@
-## Skeleton
+# Skeleton

 ### Install

@@ -8,21 +8,21 @@ import { Skeleton } from 'vant';
 Vue.use(Skeleton);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-skeleton title :row="3" />
 ```

-#### Show Avatar
+### Show Avatar

 ```html
 <van-skeleton title avatar :row="3" />
 ```

-#### Show Children
+### Show Children

 ```html
 <van-skeleton
@@ -48,6 +48,8 @@ export default {
 };
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,6 +1,6 @@
-## Skeleton 骨架屏
+# Skeleton 骨架屏

-### 使用指南
+### 引入

 ``` javascript
 import { Skeleton } from 'vant';
@@ -8,9 +8,9 @@ import { Skeleton } from 'vant';
 Vue.use(Skeleton);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数

@@ -18,7 +18,7 @@ Vue.use(Skeleton);
 <van-skeleton title :row="3" />
 ```

-#### 显示头像
+### 显示头像

 通过`avatar`属性显示头像占位图

@@ -26,7 +26,7 @@ Vue.use(Skeleton);
 <van-skeleton title avatar :row="3" />
 ```

-#### 展示子组件
+### 展示子组件

 将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件

@@ -54,6 +54,8 @@ export default {
 };
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,14 +1,16 @@
-## Sku
+# Sku

 ### Install
+
 ```javascript
 import { Sku } from 'vant';

 Vue.use(Sku);
 ```

-### Usage
-#### Basic Usage
+## Usage
+
+### Basic Usage

 ```html
 <van-sku
@@ -29,7 +31,7 @@ Vue.use(Sku);
 />
 ```

-#### Custom Stepper Config
+### Custom Stepper Config

 ```html
 <van-sku
@@ -46,7 +48,7 @@ Vue.use(Sku);
 />
 ```

-#### Advanced Usage
+### Advanced Usage

 ```html
 <van-sku
@@ -96,6 +98,8 @@ Vue.use(Sku);
 </van-sku>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -150,9 +154,7 @@ Use ref to get sku instance and call instance methods
 | sku-messages | Custom messages |
 | sku-actions | Custom button actions |

-#### Data Structure
-
-#### Sku Data Structure
+### Sku Data Structure

 ```javascript
 sku: {
@@ -201,7 +203,7 @@ sku: {
 }
 ```

-#### initialSku Data Structure
+### initialSku Data Structure

 ```javascript
 {
@@ -213,7 +215,7 @@ sku: {
 }
 ```

-#### Goods Data Structure
+### Goods Data Structure

 ```javascript
 goods: {
@@ -223,7 +225,7 @@ goods: {
 ```


-#### customStepperConfig Data Structure
+### customStepperConfig Data Structure

 ```javascript
 customStepperConfig: {
@@ -249,7 +251,7 @@ customStepperConfig: {
 }
 ```

-#### messageConfig Data Structure
+### messageConfig Data Structure

 ```javascript
 messageConfig: {
@@ -270,7 +272,7 @@ messageConfig: {
 }
 ```

-#### Events Params Data Structure
+### Events Params Data Structure

 ```javascript
 skuData: {
@@ -1,15 +1,16 @@
-## Sku 商品规格
+# Sku 商品规格
+
+### 引入

-### 使用指南
 ```javascript
 import { Sku } from 'vant';

 Vue.use(Sku);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-sku
@@ -30,7 +31,7 @@ Vue.use(Sku);
 />
 ```

-#### 自定义步进器
+### 自定义步进器

 ```html
 <van-sku
@@ -47,7 +48,7 @@ Vue.use(Sku);
 />
 ```

-#### 高级用法
+### 高级用法

 ```html
 <van-sku
@@ -97,6 +98,8 @@ Vue.use(Sku);
 </van-sku>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -155,9 +158,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，
 | sku-messages | 商品留言区 |
 | sku-actions | 操作按钮区 |

-### 数据结构
-
-#### sku 对象结构
+### sku 对象结构

 ```javascript
 sku: {
@@ -210,7 +211,7 @@ sku: {
 }
 ```

-#### initialSku 对象结构
+### initialSku 对象结构

 ```javascript
 {
@@ -223,7 +224,7 @@ sku: {
 }
 ```

-#### goods 对象结构
+### goods 对象结构

 ```javascript
 goods: {
@@ -234,7 +235,7 @@ goods: {
 }
 ```

-#### customStepperConfig 对象结构
+### customStepperConfig 对象结构

 ```javascript
 customStepperConfig: {
@@ -260,7 +261,7 @@ customStepperConfig: {
 }
 ```

-#### messageConfig Data Structure
+### messageConfig Data Structure

 ```javascript
 messageConfig: {
@@ -281,7 +282,7 @@ messageConfig: {
 }
 ```

-#### 添加购物车和点击购买回调函数接收的 skuData 对象结构
+### 添加购物车和点击购买回调函数接收的 skuData 对象结构

 ```javascript
 skuData: {
@@ -1,14 +1,16 @@
-## Slider
+# Slider

 ### Install
+
 ``` javascript
 import { Slider } from 'vant';

 Vue.use(Slider);
 ```

-### Usage
-#### Basic Usage
+## Usage
+
+### Basic Usage

 ```html
 <van-slider v-model="value" @change="onChange" />
@@ -30,25 +32,25 @@ export default {
 };
 ```

-#### Range
+### Range

 ```html
 <van-slider v-model="value" :min="10" :max="90" />
 ```

-#### Disabled
+### Disabled

 ```html
 <van-slider v-model="value" disabled />
 ```

-#### Step size
+### Step size

 ```html
 <van-slider v-model="value" :step="10" />
 ```

-#### Custom style
+### Custom style

 ```html
 <van-slider
@@ -58,7 +60,7 @@ export default {
 />
 ```

-#### Custom button
+### Custom button

 ```html
 <van-slider
@@ -74,7 +76,7 @@ export default {
 </van-slider>
 ```

-#### Vertical
+### Vertical

 ```html
 <div :style="{ height: '100px' }">
@@ -82,6 +84,8 @@ export default {
 </div>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,13 +1,16 @@
-## Slider 滑块
+# Slider 滑块
+
+### 引入

-### 使用指南
 ``` javascript
 import { Slider } from 'vant';

 Vue.use(Slider);
 ```

-#### 基本用法
+## 代码演示
+
+### 基本用法

 ```html
 <van-slider v-model="value" @change="onChange" />
@@ -29,25 +32,25 @@ export default {
 };
 ```

-#### 指定选择范围
+### 指定选择范围

 ```html
 <van-slider v-model="value" :min="10" :max="90" />
 ```

-#### 禁用
+### 禁用

 ```html
 <van-slider v-model="value" disabled />
 ```

-#### 指定步长
+### 指定步长

 ```html
 <van-slider v-model="value" :step="10" />
 ```

-#### 自定义样式
+### 自定义样式

 ```html
 <van-slider
@@ -57,7 +60,7 @@ export default {
 />
 ```

-#### 自定义按钮
+### 自定义按钮

 ```html
 <van-slider
@@ -73,7 +76,7 @@ export default {
 </van-slider>
 ```

-#### 垂直方向
+### 垂直方向

 Slider 垂直展示时，高度为 100% 父元素高度

@@ -83,6 +86,8 @@ Slider 垂直展示时，高度为 100% 父元素高度
 </div>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Stepper
+# Stepper

 ### Install
+
 ``` javascript
 import { Stepper } from 'vant';

 Vue.use(Stepper);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-stepper v-model="value" />
@@ -25,13 +26,13 @@ export default {
 }
 ```

-#### Disabled
+### Disabled

 ```html
 <van-stepper v-model="value" disabled />
 ```

-#### Async Change
+### Async Change

 ```html
 <van-stepper
@@ -65,7 +66,7 @@ export default {
 }
 ```

-#### Advanced Usage
+### Advanced Usage

 ```html
 <van-stepper
@@ -78,6 +79,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Stepper 步进器
+# Stepper 步进器
+
+### 引入

-### 使用指南
 ``` javascript
 import { Stepper } from 'vant';

 Vue.use(Stepper);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-stepper v-model="value" />
@@ -25,7 +26,7 @@ export default {
 }
 ```

-#### 禁用状态
+### 禁用状态

 通过设置`disabled`属性来禁用 stepper

@@ -33,7 +34,7 @@ export default {
 <van-stepper v-model="value" disabled />
 ```

-#### 异步变更
+### 异步变更

 ```html
 <van-stepper
@@ -67,7 +68,7 @@ export default {
 }
 ```

-#### 高级用法
+### 高级用法

 可以对组件设置`step`、`min`、`max`属性

@@ -81,6 +82,8 @@ export default {
 />
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## Steps
+# Steps

 ### Install
+
 ``` javascript
 import { Step, Steps } from 'vant';

 Vue.use(Step).use(Steps);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-steps :active="active">
@@ -30,7 +31,7 @@ export default {
 }
 ```

-#### Custom Style
+### Custom Style

 ```html
 <van-steps
@@ -45,7 +46,7 @@ export default {
 </van-steps>
 ```

-#### Vertical Steps
+### Vertical Steps

 ```html
 <van-steps direction="vertical" :active="0">
@@ -64,6 +65,8 @@ export default {
 </van-steps>
 ```

+## API
+
 ### Steps Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## Steps 步骤条
+# Steps 步骤条
+
+### 引入

-### 使用指南
 ``` javascript
 import { Step, Steps } from 'vant';

 Vue.use(Step).use(Steps);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-steps :active="active">
@@ -30,7 +31,7 @@ export default {
 }
 ```

-#### 自定义样式
+### 自定义样式

 可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色

@@ -47,7 +48,7 @@ export default {
 </van-steps>
 ```

-#### 竖向步骤条
+### 竖向步骤条

 可以通过设置`direction`属性来改变步骤条的显示方向

@@ -68,6 +69,8 @@ export default {
 </van-steps>
 ```

+## API
+
 ### Steps Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,7 +1,11 @@
-## Built-in Style
+# Built-in Style
+
+### Intro
+
 Vant contains some common styles that can be used directly by the className.

 ### Text ellipsis
+
 When the text content length exceeds the maximum container width, the excess text is automatically omitted.

 ```html
@@ -11,6 +15,7 @@ When the text content length exceeds the maximum container width, the excess tex
 ```

 ### Hairline
+
 Add 1px border under the Retina screen for the element, based on a pseudo element.

 ```html
@@ -1,7 +1,11 @@
-## 内置样式
+# 内置样式
+
+### 介绍
+
 Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

 ### 文字省略
+
 当文本内容长度超过容器最大宽度时，自动省略多余的文本。

 ```html
@@ -9,6 +13,7 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 ```

 ### 1px 边框
+
 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

 ```html
@@ -32,6 +37,7 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 ```

 ### 动画
+
 可以通过 `transition` 组件使用内置的动画

 ```html
@@ -1,15 +1,16 @@
-## SubmitBar
+# SubmitBar

 ### Install
+
 ``` javascript
 import { SubmitBar } from 'vant';

 Vue.use(SubmitBar);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-submit-bar
@@ -19,7 +20,8 @@ Vue.use(SubmitBar);
 />
 ```

-#### Disabled
+### Disabled
+
 `submit` event will not triggerd when disabled.

 ```html
@@ -33,7 +35,8 @@ Vue.use(SubmitBar);
 />
 ```

-#### Loading
+### Loading
+
 `submit` event will not triggerd when loading.

 ```html
@@ -45,7 +48,8 @@ Vue.use(SubmitBar);
 />
 ```

-#### Advanced Usage
+### Advanced Usage
+
 Use slot to add custom contents.

 ```html
@@ -61,6 +65,8 @@ Use slot to add custom contents.
 </van-submit-bar>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## SubmitBar 提交订单栏
+# SubmitBar 提交订单栏
+
+### 引入

-### 使用指南
 ``` javascript
 import { SubmitBar } from 'vant';

 Vue.use(SubmitBar);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-submit-bar
@@ -19,7 +20,7 @@ Vue.use(SubmitBar);
 />
 ```

-#### 禁用状态
+### 禁用状态

 禁用状态下不会触发`submit`事件

@@ -34,7 +35,7 @@ Vue.use(SubmitBar);
 />
 ```

-#### 加载状态
+### 加载状态

 加载状态下不会触发`submit`事件

@@ -47,7 +48,7 @@ Vue.use(SubmitBar);
 />
 ```

-#### 高级用法
+### 高级用法

 通过插槽插入自定义内容

@@ -64,6 +65,8 @@ Vue.use(SubmitBar);
 </van-submit-bar>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,16 @@
-## SwipeCell
+# SwipeCell

 ### Install
+
 ``` javascript
 import { SwipeCell } from 'vant';

 Vue.use(SwipeCell);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-swipe-cell :right-width="65" :left-width="65">
@@ -21,7 +22,7 @@ Vue.use(SwipeCell);
 </van-swipe-cell>
 ```

-#### Async close
+### Async close

 ```html
 <van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
@@ -56,6 +57,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,15 +1,16 @@
-## SwipeCell 滑动单元格
+# SwipeCell 滑动单元格
+
+### 引入

-### 使用指南
 ``` javascript
 import { SwipeCell } from 'vant';

 Vue.use(SwipeCell);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-swipe-cell :right-width="65" :left-width="65">
@@ -21,7 +22,7 @@ Vue.use(SwipeCell);
 </van-swipe-cell>
 ```

-#### 异步关闭
+### 异步关闭

 ```html
 <van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
@@ -56,6 +57,8 @@ export default {
 }
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -1,15 +1,17 @@
-## Swipe
+# Swipe

 ### Install
+
 ``` javascript
 import { Swipe, SwipeItem } from 'vant';

 Vue.use(Swipe).use(SwipeItem);
 ```

-### Usage
+## Usage
+
+### Basic Usage

-#### Basic Usage
 Use `autoplay` prop to set autoplay interval

 ```html
@@ -21,7 +23,8 @@ Use `autoplay` prop to set autoplay interval
 </van-swipe>
 ```

-#### Image Lazyload
+### Image Lazyload
+
 Use [Lazyload](#/en-US/lazyload) component to lazyload image

 ```html
@@ -45,7 +48,7 @@ export default {
 }
 ```

-#### change event
+### change event

 ```html
 <van-swipe @change="onChange">
@@ -66,7 +69,7 @@ export default {
 }
 ```

-#### Vertical Scrolling
+### Vertical Scrolling

 ```html
 <van-swipe :autoplay="3000" vertical>
@@ -77,7 +80,7 @@ export default {
 </van-swipe>
 ```

-#### Set Swiper Item Size
+### Set Swiper Item Size

 ```html
 <van-swipe :autoplay="3000" :width="300">
@@ -88,7 +91,7 @@ export default {
 </van-swipe>
 ```

-#### Custom Indicator
+### Custom Indicator

 ```html
 <van-swipe @change="onChange">
@@ -118,7 +121,9 @@ export default {
 }
 ```

-### Props
+## API
+
+### Swipe Props

 | Attribute | Description | Type | Default |
 |------|------|------|------|
@@ -133,13 +138,13 @@ export default {
 | width | Set Swiper Item Width | `Number` | `0` |
 | height | Set Swiper Item Height | `Number` | `0` |

-### Events
+### Swipe Events

 | Event | Description | Arguments |
 |------|------|------|
 | change | Triggered when current swipe change | index: index of current swipe |

-### Methods
+### Swipe Methods

 Use ref to get swipe instance and call instance methods

@@ -147,7 +152,7 @@ Use ref to get swipe instance and call instance methods
 |------|------|------|------|
 | swipeTo | index: target index | void | Swipe to target index |

-### Slots
+### Swipe Slots

 | Name | Description |
 |------|------|
@@ -1,15 +1,17 @@
-## Swipe 轮播
+# Swipe 轮播
+
+### 引入

-### 使用指南
 ``` javascript
 import { Swipe, SwipeItem } from 'vant';

 Vue.use(Swipe).use(SwipeItem);
 ```

-### 代码演示
+## 代码演示
+
+### 基础用法

-#### 基础用法
 通过`autoplay`属性设置自动轮播间隔

 ```html
@@ -21,7 +23,8 @@ Vue.use(Swipe).use(SwipeItem);
 </van-swipe>
 ```

-#### 图片懒加载
+### 图片懒加载
+
 配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载

 ```html
@@ -45,7 +48,7 @@ export default {
 }
 ```

-#### 监听 change 事件
+### 监听 change 事件

 ```html
 <van-swipe @change="onChange">
@@ -66,7 +69,7 @@ export default {
 }
 ```

-#### 纵向滚动
+### 纵向滚动

 ```html
 <van-swipe :autoplay="3000" vertical>
@@ -77,7 +80,7 @@ export default {
 </van-swipe>
 ```

-#### 控制滑块大小
+### 控制滑块大小

 ```html
 <van-swipe :autoplay="3000" :width="300">
@@ -88,7 +91,7 @@ export default {
 </van-swipe>
 ```

-#### 自定义指示器
+### 自定义指示器

 ```html
 <van-swipe @change="onChange">
@@ -118,7 +121,9 @@ export default {
 }
 ```

-### Props
+## API
+
+### Swipe Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
@@ -133,19 +138,19 @@ export default {
 | width | 滑块宽度 | `Number` | `0` | 1.2.1 |
 | height | 滑块高度 | `Number` | `0` | 1.2.1 |

-### Swipe 事件
+### Swipe Events

 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | change | 每一页轮播结束后触发 | index, 当前页的索引 |

-### SwipeItem 事件
+### SwipeItem Events

 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
 | click | 点击时触发 | - |

-### 方法
+### Swipe 方法

 通过 ref 可以获取到 swipe 实例并调用实例方法

@@ -153,7 +158,7 @@ export default {
 |------|------|------|------|
 | swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |

-### Slots
+### Swipe Slots

 | 名称 | 说明 |
 |------|------|
@@ -1,16 +1,20 @@
-## SwitchCell
+# SwitchCell
+
+### Intro
+
 `SwitchCell` component is an encapsulation of `Switch` and `Cell`.

 ### Install
+
 ``` javascript
 import { SwitchCell } from 'vant';

 Vue.use(SwitchCell);
 ```

-### Usage
+## Usage

-#### Basic Usage
+### Basic Usage

 ```html
 <van-cell-group>
@@ -28,8 +32,7 @@ export default {
 }
 ```

-
-#### Disabled
+### Disabled

 use `disabled` property to disable the component

@@ -39,8 +42,7 @@ use `disabled` property to disable the component
 </van-cell-group>
 ```

-
-#### Loading
+### Loading

 use `loading` property to keep component in loading state

@@ -50,6 +52,8 @@ use `loading` property to keep component in loading state
 </van-cell-group>
 ```

+## API
+
 ### Props

 | Attribute | Description | Type | Default |
@@ -1,17 +1,20 @@
-## SwitchCell 开关单元格
+# SwitchCell 开关单元格
+
+### 介绍

 `SwitchCell`组件是对`Switch`和`Cell`组件的封装

-### 使用指南
+### 引入
+
 ``` javascript
 import { SwitchCell } from 'vant';

 Vue.use(SwitchCell);
 ```

-### 代码演示
+## 代码演示

-#### 基础用法
+### 基础用法

 ```html
 <van-cell-group>
@@ -29,7 +32,7 @@ export default {
 }
 ```

-#### 禁用状态
+### 禁用状态

 通过`disabled`属性可以将组件设置为禁用状态

@@ -39,7 +42,7 @@ export default {
 </van-cell-group>
 ```

-#### 加载状态
+### 加载状态

 通过`loading`属性可以将组件设置为加载状态

@@ -49,6 +52,8 @@ export default {
 </van-cell-group>
 ```

+## API
+
 ### Props

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
--- a/Show More
+++ b/Show More