- Vant
-Mobile UI Components built on Vue
+
+
-
+
### Features
* 50+ Reusable components
diff --git a/docs/markdown/intro.zh-CN.md b/docs/markdown/intro.zh-CN.md
index 4fe1f25f5..3fbf321d0 100644
--- a/docs/markdown/intro.zh-CN.md
+++ b/docs/markdown/intro.zh-CN.md
@@ -1,7 +1,9 @@
-
+ 
+
+ Vant
+Mobile UI Components built on Vue
+
-
-
@@ -87,6 +87,8 @@ export default {
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/action-sheet/zh-CN.md b/packages/action-sheet/zh-CN.md
index 4e1ab6fc3..a1ba806a5 100644
--- a/packages/action-sheet/zh-CN.md
+++ b/packages/action-sheet/zh-CN.md
@@ -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 {
```
+## API
+
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/address-edit/en-US.md b/packages/address-edit/en-US.md
index 187626ee2..d8050b792 100644
--- a/packages/address-edit/en-US.md
+++ b/packages/address-edit/en-US.md
@@ -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
Default
@@ -19,28 +20,28 @@ Vue.use(Button);
Warning
```
-#### Plain
+### Plain
```html
Primary
Danger
```
-#### Hairline
+### Hairline
```html
Hairline
Hairline
```
-#### Disabled
+### Disabled
```html
Diabled
Diabled
```
-#### Loading
+### Loading
```html
Square
Round
```
-#### Size
+### Size
```html
Large
@@ -68,6 +69,8 @@ Vue.use(Button);
Mini
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index 94c7dd362..514cb8da9 100644
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@@ -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);
危险按钮
```
-#### 朴素按钮
+### 朴素按钮
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
@@ -30,7 +31,7 @@ Vue.use(Button);
朴素按钮
```
-#### 细边框
+### 细边框
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
@@ -39,7 +40,7 @@ Vue.use(Button);
细边框按钮
```
-#### 禁用状态
+### 禁用状态
通过`disabled`属性来禁用按钮，此时按钮不可点击
@@ -48,7 +49,7 @@ Vue.use(Button);
禁用状态
```
-#### 加载状态
+### 加载状态
```html
方形按钮
圆形按钮
```
-#### 按钮尺寸
+### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
@@ -78,6 +79,8 @@ Vue.use(Button);
迷你按钮
```
+## API
+
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/card/en-US.md b/packages/card/en-US.md
index 837704f78..aed4886c0 100644
--- a/packages/card/en-US.md
+++ b/packages/card/en-US.md
@@ -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
@@ -18,7 +18,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Size
+### Size
```html
@@ -27,7 +27,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Left Icon
+### Left Icon
```html
@@ -35,7 +35,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Value only
+### Value only
```html
@@ -43,7 +43,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Link
+### Link
```html
@@ -53,7 +53,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Router
+### Router
```html
@@ -62,7 +62,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Group Title
+### Group Title
```html
@@ -73,7 +73,7 @@ Vue.use(Cell).use(CellGroup);
```
-#### Advanced Usage
+### Advanced Usage
```html
@@ -90,6 +90,8 @@ Vue.use(Cell).use(CellGroup);
```
+## API
+
### CellGroup Props
| Attribute | Description | Type | Default |
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md
index f545be4da..e773c27ce 100644
--- a/packages/cell/zh-CN.md
+++ b/packages/cell/zh-CN.md
@@ -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);
```
-#### 单元格大小
+### 单元格大小
通过`size`属性可以控制单元格的大小
@@ -29,7 +29,7 @@ Vue.use(Cell).use(CellGroup);
Checkbox
@@ -25,19 +25,19 @@ export default {
};
```
-#### Disabled
+### Disabled
```html
Checkbox
```
-#### Custom Color
+### Custom Color
```html
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
@@ -105,7 +105,7 @@ export default {
```
-#### Inside a Cell
+### Inside a Cell
```html
@@ -133,6 +133,7 @@ export default {
}
```
+## API
### Checkbox Props
diff --git a/packages/checkbox/zh-CN.md b/packages/checkbox/zh-CN.md
index 8ab8ec042..060d5d718 100644
--- a/packages/checkbox/zh-CN.md
+++ b/packages/checkbox/zh-CN.md
@@ -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
复选框
```
-#### 自定义颜色
+### 自定义颜色
```html
复选框
```
-#### 自定义图标
+### 自定义图标
通过 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
@@ -107,7 +107,7 @@ export default {
```
-#### 搭配单元格组件使用
+### 搭配单元格组件使用
此时你需要再引入`Cell`和`CellGroup`组件，并通过 checkbox 的 toggle 方法手动触发切换
@@ -137,6 +137,8 @@ export default {
}
```
+## API
+
### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/circle/en-US.md b/packages/circle/en-US.md
index 408f816f6..8d00c40d0 100644
--- a/packages/circle/en-US.md
+++ b/packages/circle/en-US.md
@@ -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
span: 8
@@ -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
```
-#### Flex Layout
+### Flex Layout
Setting `type` to `flex` to enable flex layout
@@ -84,6 +86,7 @@ Setting `type` to `flex` to enable flex layout
```
+## API
### Row Props
diff --git a/packages/col/zh-CN.md b/packages/col/zh-CN.md
index a495922e0..ed8f96fe5 100644
--- a/packages/col/zh-CN.md
+++ b/packages/col/zh-CN.md
@@ -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`属性设置
```
-#### 设置列元素间距
+### 设置列元素间距
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
@@ -45,7 +49,7 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
```
-#### Flex 布局
+### Flex 布局
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
@@ -86,6 +90,8 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
```
+## API
+
### Row Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/collapse/en-US.md b/packages/collapse/en-US.md
index bbb1bc2a0..966684211 100644
--- a/packages/collapse/en-US.md
+++ b/packages/collapse/en-US.md
@@ -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
@@ -71,6 +71,8 @@ export default {
```
+## API
+
### Collapse Props
| Attribute | Description | Type | Default |
diff --git a/packages/collapse/zh-CN.md b/packages/collapse/zh-CN.md
index c1743c88b..2be29b018 100644
--- a/packages/collapse/zh-CN.md
+++ b/packages/collapse/zh-CN.md
@@ -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
@@ -72,6 +72,8 @@ export default {
```
+## API
+
### Collapse Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/contact-card/en-US.md b/packages/contact-card/en-US.md
index a60aa324f..369b7e7af 100644
--- a/packages/contact-card/en-US.md
+++ b/packages/contact-card/en-US.md
@@ -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
@@ -119,7 +119,7 @@ export default {
};
```
-#### Uneditable
+### Uneditable
```html
@@ -76,6 +76,8 @@ export default {
};
```
+## API
+
### DropdownMenu Props
| Attribute | Description | Type | Default |
diff --git a/packages/dropdown-menu/zh-CN.md b/packages/dropdown-menu/zh-CN.md
index c79cd7659..05c97c13c 100644
--- a/packages/dropdown-menu/zh-CN.md
+++ b/packages/dropdown-menu/zh-CN.md
@@ -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
@@ -78,6 +78,8 @@ export default {
};
```
+## API
+
### DropdownMenu Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/field/en-US.md b/packages/field/en-US.md
index a8fee3f7a..d819e85fe 100644
--- a/packages/field/en-US.md
+++ b/packages/field/en-US.md
@@ -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.
```
-#### 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.
```
-#### Disabled
+### Disabled
```html
@@ -56,7 +59,8 @@ Use `type` prop to custom diffrent type fields.
```
-#### 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
```
-#### 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
```
-#### Insert button
+### Insert button
+
Use button slot to insert button
```html
@@ -109,6 +115,8 @@ Use button slot to insert button
```
+## API
+
### Props
Field support all native properties of input tag，such as `maxlength`、`placeholder`、`autofocus`
diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md
index 0a7907594..c941e5d19 100644
--- a/packages/field/zh-CN.md
+++ b/packages/field/zh-CN.md
@@ -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);
```
-#### 自定义类型
+### 自定义类型
根据`type`属性定义不同类型的输入框
@@ -47,7 +49,7 @@ Vue.use(Field);
```
-#### 禁用输入框
+### 禁用输入框
```html
@@ -60,7 +62,7 @@ Vue.use(Field);
```
-#### 错误提示
+### 错误提示
通过`error`或者`error-message`属性增加对应的错误提示
@@ -81,7 +83,7 @@ Vue.use(Field);
```
-#### 高度自适应
+### 高度自适应
对于 textarea，可以通过`autosize`属性设置高度自适应
@@ -98,7 +100,7 @@ Vue.use(Field);
```
-#### 插入按钮
+### 插入按钮
通过 button 插槽可以在输入框尾部插入按钮
@@ -116,6 +118,8 @@ Vue.use(Field);
```
+## API
+
### Props
Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`autofocus` 等
diff --git a/packages/goods-action/en-US.md b/packages/goods-action/en-US.md
index 994e84cb0..30863ed21 100644
--- a/packages/goods-action/en-US.md
+++ b/packages/goods-action/en-US.md
@@ -1,6 +1,7 @@
-## GoodsAction
+# GoodsAction
### Install
+
``` javascript
import {
GoodsAction,
@@ -14,8 +15,9 @@ Vue
.use(GoodsActionIcon);
```
-### Usage
-#### Basic Usage
+## Usage
+
+### Basic Usage
```html
@@ -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
```
-### 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 |
|------|------|------|------|
diff --git a/packages/goods-action/zh-CN.md b/packages/goods-action/zh-CN.md
index 23da4cbee..3d572ccee 100644
--- a/packages/goods-action/zh-CN.md
+++ b/packages/goods-action/zh-CN.md
@@ -1,6 +1,7 @@
-## GoodsAction 商品导航
+# GoodsAction 商品导航
+
+### 引入
-### 使用指南
``` javascript
import {
GoodsAction,
@@ -14,8 +15,9 @@ Vue
.use(GoodsActionButton);
```
-### 代码演示
-#### 基础用法
+## 代码演示
+
+### 基础用法
```html
@@ -55,7 +57,8 @@ export default {
}
```
-#### 图标提示
+### 图标提示
+
通过`info`属性在图标右上角增加相应的提示
```html
@@ -84,15 +87,15 @@ export default {
```
-### 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
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
diff --git a/packages/icon/en-US.md b/packages/icon/en-US.md
index 6290d052e..0f5dea7e5 100644
--- a/packages/icon/en-US.md
+++ b/packages/icon/en-US.md
@@ -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
{
}, 1000);
```
-#### 组件调用
+### 组件调用
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
@@ -93,6 +93,8 @@ export default {
}
```
+## API
+
### Options
通过函数调用 `ImagePreview` 时，支持传入以下选项：
diff --git a/packages/index-bar/en-US.md b/packages/index-bar/en-US.md
index 202f58f67..fb3a90aac 100644
--- a/packages/index-bar/en-US.md
+++ b/packages/index-bar/en-US.md
@@ -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
@@ -28,7 +28,7 @@ Vue.use(IndexBar);
```
-#### Custom Index List
+### Custom Index List
```html
@@ -56,6 +56,8 @@ export default {
}
```
+## API
+
### IndexBar Props
| Attribute | Description | Type | Default |
diff --git a/packages/index-bar/zh-CN.md b/packages/index-bar/zh-CN.md
index 653bbe419..dae277582 100644
--- a/packages/index-bar/zh-CN.md
+++ b/packages/index-bar/zh-CN.md
@@ -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);
```
-#### 自定义索引列表
+### 自定义索引列表
可以通过`index-list`属性自定义展示的索引字符列表，
@@ -60,6 +60,8 @@ export default {
}
```
+## API
+
### IndexBar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/lazyload/en-US.md b/packages/lazyload/en-US.md
index 4070f468c..d930d9e6d 100644
--- a/packages/lazyload/en-US.md
+++ b/packages/lazyload/en-US.md
@@ -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
![]()
@@ -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
```
-#### Lazyload Component
+### Lazyload Component
```html
@@ -45,6 +46,8 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
```
+## API
+
### Options
| Attribute | Description | Type | Default |
diff --git a/packages/lazyload/zh-CN.md b/packages/lazyload/zh-CN.md
index 50a85689e..2ae94e406 100644
--- a/packages/lazyload/zh-CN.md
+++ b/packages/lazyload/zh-CN.md
@@ -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 {
```
-#### 懒加载模块
+### 懒加载模块
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
@@ -52,6 +53,8 @@ export default {
```
+## API
+
### Options
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/list/en-US.md b/packages/list/en-US.md
index b89f41226..249ee86be 100644
--- a/packages/list/en-US.md
+++ b/packages/list/en-US.md
@@ -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
Loading...
```
-#### Vertical
+### Vertical
```html
Loading...
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/loading/zh-CN.md b/packages/loading/zh-CN.md
index 46e843784..4f52622bd 100644
--- a/packages/loading/zh-CN.md
+++ b/packages/loading/zh-CN.md
@@ -1,40 +1,43 @@
-## Loading 加载
+# Loading 加载
+
+### 引入
-### 使用指南
``` javascript
import { Loading } from 'vant';
Vue.use(Loading);
```
-### 代码演示
+## 代码演示
-#### 加载类型
+### 加载类型
```html
加载中...
```
-#### 垂直排列
+### 垂直排列
```html
加载中...
```
+## API
+
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/locale/en-US.md b/packages/locale/en-US.md
index 3ef357203..0c01e6e81 100644
--- a/packages/locale/en-US.md
+++ b/packages/locale/en-US.md
@@ -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 |
diff --git a/packages/locale/zh-CN.md b/packages/locale/zh-CN.md
index 16b419781..aa460b2e0 100644
--- a/packages/locale/zh-CN.md
+++ b/packages/locale/zh-CN.md
@@ -1,7 +1,11 @@
-## 国际化
+# 国际化
+
+### 介绍
+
Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案
### 多语言切换
+
Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。
```js
@@ -12,6 +16,7 @@ Locale.use('en-US', enUS);
```
### 修改默认文案
+
通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：
```js
diff --git a/packages/nav-bar/en-US.md b/packages/nav-bar/en-US.md
index f31c2767e..1fcfc6885 100644
--- a/packages/nav-bar/en-US.md
+++ b/packages/nav-bar/en-US.md
@@ -1,15 +1,16 @@
-## NavBar
+# NavBar
### Install
+
``` javascript
import { NavBar } from 'vant';
Vue.use(NavBar);
```
-### Usage
+## Usage
-#### Basic Usage
+### Basic Usage
```html
@@ -43,6 +44,7 @@ export default {
```
+## API
### Props
diff --git a/packages/nav-bar/zh-CN.md b/packages/nav-bar/zh-CN.md
index aa312f778..47df826ca 100644
--- a/packages/nav-bar/zh-CN.md
+++ b/packages/nav-bar/zh-CN.md
@@ -1,15 +1,16 @@
-## NavBar 导航栏
+# NavBar 导航栏
+
+### 引入
-### 使用指南
``` javascript
import { NavBar } from 'vant';
Vue.use(NavBar);
```
-### 代码演示
+## 代码演示
-#### 基础用法
+### 基础用法
```html
```
+## API
### Props
diff --git a/packages/notice-bar/en-US.md b/packages/notice-bar/en-US.md
index 8c0369a97..0a10f1ee2 100644
--- a/packages/notice-bar/en-US.md
+++ b/packages/notice-bar/en-US.md
@@ -1,15 +1,16 @@
-## NoticeBar
+# NoticeBar
### Install
+
``` javascript
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
```
-### Usage
+## Usage
-#### Basic Usage
+### Basic Usage
```html
@@ -26,7 +27,7 @@ Vue.use(NoticeBar);
```
-#### Wrapable
+### Wrapable
```html
@@ -34,7 +35,7 @@ Vue.use(NoticeBar);
```
-#### Mode
+### Mode
```html
@@ -58,6 +59,8 @@ Vue.use(NoticeBar);
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/notice-bar/zh-CN.md b/packages/notice-bar/zh-CN.md
index 20874ea62..4a6aa52ce 100644
--- a/packages/notice-bar/zh-CN.md
+++ b/packages/notice-bar/zh-CN.md
@@ -1,15 +1,16 @@
-## NoticeBar 通知栏
+# NoticeBar 通知栏
+
+### 引入
-### 使用指南
``` javascript
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
```
-### 代码演示
+## 代码演示
-#### 基础用法
+### 基础用法
```html
@@ -45,7 +45,7 @@ export default {
}
```
-#### Custom Style
+### Custom Style
```html
@@ -45,7 +46,7 @@ export default {
}
```
-#### 自定义样式
+### 自定义样式
```html
@@ -17,7 +18,7 @@ Vue.use(Panel);
```
-#### Advanced Usage
+### Advanced Usage
```html
@@ -29,6 +30,8 @@ Vue.use(Panel);
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/panel/zh-CN.md b/packages/panel/zh-CN.md
index 6f7b74c8f..fa9f9683e 100644
--- a/packages/panel/zh-CN.md
+++ b/packages/panel/zh-CN.md
@@ -1,15 +1,17 @@
-## Panel 面板
+# Panel 面板
+
+### 引入
-### 使用指南
``` javascript
import { Panel } from 'vant';
Vue.use(Panel);
```
-### 代码演示
+## 代码演示
+
+### 基础用法
-#### 基础用法
面板只是一个容器，里面可以放入自定义的内容
```html
@@ -18,7 +20,8 @@ Vue.use(Panel);
```
-#### 高级用法
+### 高级用法
+
使用`slot`自定义内容
```html
@@ -31,6 +34,8 @@ Vue.use(Panel);
```
+## API
+
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/password-input/en-US.md b/packages/password-input/en-US.md
index b4b91a173..a379ee8f1 100644
--- a/packages/password-input/en-US.md
+++ b/packages/password-input/en-US.md
@@ -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
@@ -49,7 +53,7 @@ export default {
}
```
-#### Without mask
+### Without mask
```html
@@ -40,13 +41,13 @@ export default {
```
-#### Custom Color
+### Custom Color
```html
Radio
```
-#### Custom Icon
+### Custom Icon
Use icon slot to custom icon
@@ -73,7 +74,7 @@ export default {
}
```
-#### Inside a Cell
+### Inside a Cell
```html
@@ -88,6 +89,8 @@ export default {
```
+## API
+
### Radio Props
| Attribute | Description | Type | Default |
diff --git a/packages/radio/zh-CN.md b/packages/radio/zh-CN.md
index e3d3a006f..8b987bece 100644
--- a/packages/radio/zh-CN.md
+++ b/packages/radio/zh-CN.md
@@ -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 {
```
-#### 自定义颜色
+### 自定义颜色
```html
复选框
```
-#### 自定义图标
+### 自定义图标
通过 icon 插槽自定义图标，可以通过 `slot-scope` 判断是否为选中状态
@@ -75,7 +76,7 @@ export default {
}
```
-#### 与 Cell 组件一起使用
+### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
@@ -92,6 +93,8 @@ export default {
```
+## API
+
### Radio Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/rate/en-US.md b/packages/rate/en-US.md
index ce09365ca..6a9df5304 100644
--- a/packages/rate/en-US.md
+++ b/packages/rate/en-US.md
@@ -1,15 +1,16 @@
-## Rate
+# Rate
### Install
+
``` javascript
import { Rate } from 'vant';
Vue.use(Rate);
```
-### Usage
+## Usage
-#### Basic Usage
+### Basic Usage
```html
```
+## 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: {
diff --git a/packages/sku/zh-CN.md b/packages/sku/zh-CN.md
index 2b1f04b8c..ce63ec6cd 100644
--- a/packages/sku/zh-CN.md
+++ b/packages/sku/zh-CN.md
@@ -1,15 +1,16 @@
-## Sku 商品规格
+# Sku 商品规格
+
+### 引入
-### 使用指南
```javascript
import { Sku } from 'vant';
Vue.use(Sku);
```
-### 代码演示
+## 代码演示
-#### 基础用法
+### 基础用法
```html
```
+## 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: {
diff --git a/packages/slider/en-US.md b/packages/slider/en-US.md
index f7d1123ee..28c63eff8 100644
--- a/packages/slider/en-US.md
+++ b/packages/slider/en-US.md
@@ -1,14 +1,16 @@
-## Slider
+# Slider
### Install
+
``` javascript
import { Slider } from 'vant';
Vue.use(Slider);
```
-### Usage
-#### Basic Usage
+## Usage
+
+### Basic Usage
```html
```
-#### Vertical
+### Vertical
```html
```
-#### 垂直方向
+### 垂直方向
Slider 垂直展示时，高度为 100% 父元素高度
@@ -83,6 +86,8 @@ Slider 垂直展示时，高度为 100% 父元素高度
```
+## API
+
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/stepper/en-US.md b/packages/stepper/en-US.md
index 690a2f1f8..534b6fbad 100644
--- a/packages/stepper/en-US.md
+++ b/packages/stepper/en-US.md
@@ -1,15 +1,16 @@
-## Stepper
+# Stepper
### Install
+
``` javascript
import { Stepper } from 'vant';
Vue.use(Stepper);
```
-### Usage
+## Usage
-#### Basic Usage
+### Basic Usage
```html
- Vant
-轻量、可靠的移动端 Vue 组件库
+
+
### 特性
diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md
index 42adbaeda..9713c387d 100644
--- a/docs/markdown/quickstart.en-US.md
+++ b/docs/markdown/quickstart.en-US.md
@@ -1,4 +1,4 @@
-## Quickstart
+# Quickstart
### Starter kit
diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md
index 79297c475..cbdbfc426 100644
--- a/docs/markdown/quickstart.zh-CN.md
+++ b/docs/markdown/quickstart.zh-CN.md
@@ -1,4 +1,4 @@
-## 快速上手
+# 快速上手
### 脚手架
diff --git a/docs/markdown/style-guide.zh-CN.md b/docs/markdown/style-guide.zh-CN.md
index 4f766d990..ae2c1706c 100644
--- a/docs/markdown/style-guide.zh-CN.md
+++ b/docs/markdown/style-guide.zh-CN.md
@@ -1,4 +1,6 @@
-## 风格指南
+# 风格指南
+
+### 介绍
在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)
diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md
index de001d06c..1a71620c0 100644
--- a/docs/markdown/theme.en-US.md
+++ b/docs/markdown/theme.en-US.md
@@ -1,4 +1,6 @@
-## Custom Theme
+# Custom Theme
+
+### Intro
`Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md
index 4a153a54d..e058249c5 100644
--- a/docs/markdown/theme.zh-CN.md
+++ b/docs/markdown/theme.zh-CN.md
@@ -1,6 +1,8 @@
-## 定制主题
+# 定制主题
-`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+### 介绍
+
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法
### 示例工程
diff --git a/docs/src/DocsApp.vue b/docs/src/DocsApp.vue
index 4342223b3..36b4c09f6 100644
--- a/docs/src/DocsApp.vue
+++ b/docs/src/DocsApp.vue
@@ -48,7 +48,7 @@ export default {
diff --git a/docs/src/WapApp.vue b/docs/src/WapApp.vue
index 645acd8af..79d8466f1 100644
--- a/docs/src/WapApp.vue
+++ b/docs/src/WapApp.vue
@@ -4,7 +4,6 @@
v-show="title"
class="van-doc-nav-bar"
:title="title"
- :border="false"
:left-arrow="showNav"
@click-left="onBack"
>
@@ -71,7 +70,7 @@ body {
color: @text-color;
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
line-height: 1;
- background-color: #f2f3f5;
+ background-color: #f8f8f8;
-webkit-font-smoothing: antialiased;
}
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index d611951a8..ef5cf8e29 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -11,8 +11,6 @@ module.exports = {
href: '#/'
},
nav: {
- 'Vue 组件': 'https://youzan.github.io/vant/',
- '小程序组件': 'https://youzan.github.io/vant-weapp/',
lang: {
text: 'En',
from: 'zh-CN',
diff --git a/package.json b/package.json
index c4ab912b7..cb30a4274 100644
--- a/package.json
+++ b/package.json
@@ -70,17 +70,17 @@
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-typescript": "^7.3.3",
- "@types/jest": "^24.0.12",
- "@vant/doc": "^1.0.26",
+ "@types/jest": "^24.0.13",
+ "@vant/doc": "^2.0.0",
"@vant/eslint-config": "^1.1.2",
- "@vant/markdown-loader": "^1.0.3",
+ "@vant/markdown-loader": "^2.0.0",
"@vue/babel-preset-jsx": "^1.0.0",
"@vue/server-test-utils": "^1.0.0-beta.29",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-jest": "^24.8.0",
- "babel-loader": "^8.0.4",
- "codecov": "^3.3.0",
+ "babel-loader": "^8.0.6",
+ "codecov": "^3.5.0",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"csso": "^3.5.1",
@@ -89,12 +89,12 @@
"fast-glob": "^2.2.4",
"gh-pages": "^2.0.1",
"html-webpack-plugin": "3.2.0",
- "husky": "^2.2.0",
+ "husky": "^2.3.0",
"jest": "^24.8.0",
"jest-serializer-vue": "^2.0.2",
"less": "^3.8.1",
"less-loader": "^5.0.0",
- "lint-staged": "^8.1.6",
+ "lint-staged": "^8.1.7",
"markdown-vetur": "0.0.5",
"postcss": "^7.0.16",
"postcss-loader": "^3.0.0",
@@ -117,7 +117,7 @@
"vue-server-renderer": "^2.6.10",
"vue-template-compiler": "2.6.10",
"vue-template-es2015-compiler": "^1.9.1",
- "webpack": "^4.30.0",
+ "webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
diff --git a/packages/action-sheet/en-US.md b/packages/action-sheet/en-US.md
index bbfb87e21..9c98571a5 100644
--- a/packages/action-sheet/en-US.md
+++ b/packages/action-sheet/en-US.md
@@ -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
+
+
+ Vant
+轻量、可靠的移动端 Vue 组件库
+
@@ -82,6 +84,8 @@ export default {
```
+## API
+
### Props
| Attribute | Description | Type | Default |
diff --git a/packages/slider/zh-CN.md b/packages/slider/zh-CN.md
index e54e3344d..43e7aab57 100644
--- a/packages/slider/zh-CN.md
+++ b/packages/slider/zh-CN.md
@@ -1,13 +1,16 @@
-## Slider 滑块
+# Slider 滑块
+
+### 引入
-### 使用指南
``` javascript
import { Slider } from 'vant';
Vue.use(Slider);
```
-#### 基本用法
+## 代码演示
+
+### 基本用法
```html