alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

[new feature] add i18n support (#310)

Browse Source 
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
This commit is contained in:
neverland
2017-11-15 20:08:51 -06:00
committed by GitHub
parent 05abf0d509
commit d8b6ad7d54
210 changed files with 5561 additions and 5528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/markdown/en-US/actionsheet.md
+73
View File
@@ -0,0 +1,73 @@
## Actionsheet
### Install
``` javascript
import { Actionsheet } from 'vant';
Vue.component(Actionsheet.name, Actionsheet);
```
### Usage
#### Basic Usage
Use `actions` prop to set options of actionsheet.
```html
<van-actionsheet v-model="show" :actions="actions" />
```
```javascript
export default {
data() {
return {
show: false,
actions: [
{ name: 'Option1', callback: this.onClick },
{ name: 'Option2' },
{ name: 'Option3', loading: true }
]
};
},
methods: {
onClick(item) {
Toast(item.name);
}
}
}
```
#### Actionsheet with cancel button
```html
<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
```
#### Actionsheet with title
Actionsheet will get another style if there is a `title` prop.
```html
<van-actionsheet v-model="show" title="Title">
<p>Content</p>
</van-actionsheet>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| actions | Options | `Array` | `[]` | - |
| title | Title | `String` | - | - |
| cancelText | Text of cancel button | `String` | - | - |
| overlay | Whether to show overlay | `Boolean` | - | - |
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
### Data struct of actions
| key | Description |
|-----------|-----------|
| name | Title |
| subname | Subtitle |
| className | className for the option |
| loading | Whether to be loading status |
| callback | Triggered when click option |
docs/markdown/en-US/address-edit.md
+104
View File
@@ -0,0 +1,104 @@
## AddressEdit
### Install
``` javascript
import { AddressEdit } from 'vant';
Vue.component(AddressEdit.name, AddressEdit);
```
### Usage
#### Basic Usage
```html
<van-address-edit
:areaList="areaList"
:showPostal="true"
:showSetDefault="true"
:showSearchResult="true"
:searchResult="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
```
```javascript
export default {
data() {
return {
areaList,
searchResult: []
}
},
methods: {
onSave() {
Toast('save');
},
onDelete() {
Toast('delete');
},
onChangeDetail(val) {
if (val) {
this.searchResult = [{
name: '黄龙万科中心',
address: '杭州市西湖区'
}];
} else {
this.searchResult = [];
}
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| areaList | 地区列表 | `Object` | - | - |
| addressInfo | 收货人信息 | `Object` | `{}` | - |
| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
| addressText | "地址"文案前缀 | `String` | `收货` | - |
| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
### Data Structure
#### addressInfo Data Structure
| key | Description | Type |
|-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` |
| tel | 收货人手机号 | `String` |
| province | 省份 | `String` |
| city | 城市 | `String` |
| county | 区县 | `String` |
| address_detail | 详细地址 | `String` |
| area_code | 地区编码，通过省市区选择获取 | `String` |
| postal_code | 邮政编码 | `String` |
| is_default | 是否为默认地址 | `String` |
#### searchResult Data Structure
| key | Description | Type |
|-----------|-----------|-----------|
| name | 地名 | `String` |
| address | 详细地址 | `String` |
#### 省市县列表Data Structure
请参考 [Area](#/zh-CN/component/area) 组件。
docs/markdown/en-US/address-list.md
+79
View File
@@ -0,0 +1,79 @@
## AddressList
### Install
``` javascript
import { AddressList } from 'vant';
Vue.component(AddressList.name, AddressList);
```
### Usage
#### Basic Usage
```html
<van-address-list
v-model="chosenAddressId"
:list="list"
@add="onAdd"
@edit="onEdit"
/>
```
```javascript
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
}
]
}
},
methods: {
onAdd() {
Toast('新增收货地址');
},
onEdit(item, index) {
Toast('编辑收货地址:' + index);
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中地址的 id | String | - | - |
| list | 地址列表 | Array | `[]` | - |
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
### Data Structure
#### 地址列表字段说明
| key | Description | Type |
|-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` |
| tel | 收货人手机号 | `String` |
| address | 收货地址 | `String` |
docs/markdown/en-US/area.md
+106
View File
@@ -0,0 +1,106 @@
## Area
### Install
``` javascript
import { Area } from 'vant';
Vue.component(Area.name, Area);
```
### Usage
#### Basic Usage
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
```html
<van-area :areaList="areaList" />
```
#### Initial Value
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
```html
<van-area :areaList="areaList" value="110101" />
```
#### Columns Number
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
```html
<van-area :areaList="areaList" :columnsNum="2" />
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| value | 当前选中的省市区`code` | `String` | - | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
### Event
| Event | Description | Arguments |
|-----------|-----------|-----------|
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
| cancel | 点击取消按钮时 | - |
### Data Structure
#### 省市县列表Data Structure
整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
`AreaList`具体格式如下：
```javascript
{
province_list: {
110000: '北京市',
120000: '天津市'
},
city_list: {
110100: '北京市',
110200: '县',
120100: '天津市',
120200: '县'
},
county_list: {
110101: '东城区',
110102: '西城区',
110105: '朝阳区',
110106: '丰台区'
120101: '和平区',
120102: '河东区',
120103: '河西区',
120104: '南开区',
120105: '河北区',
// ....
}
}
```
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
#### 点击完成时返回的Data Structure
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
```javascript
[{
code: '110000',
name: '北京市'
}, {
code: '110100',
name: '北京市'
},{
code: '110101',
name: '东城区'
}]
```
docs/markdown/en-US/badge.md
+50
View File
@@ -0,0 +1,50 @@
## Badge
### Install
``` javascript
import { Badge } from 'vant';
Vue.component(Badge.name, Badge);
```
### Usage
#### Basic Usage
Use `activeKey` prop to set index of chosen 'badge'
```html
<van-badge-group :activeKey="activeKey">
<van-badge title="Title" @click="onClick"></van-badge>
<van-badge title="Title" @click="onClick" info="8"></van-badge>
<van-badge title="Title" @click="onClick" info="99"></van-badge>
<van-badge title="Title" @click="onClick" info="199"></van-badge>
</van-badge-group>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
}
};
```
### BadgeGroup API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| activeKey | Index of chosen badge | `String | Number` | `0` | - |
### Badge API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Content | `String` | `''` | - |
| info | Info Message | `String` | `''` | - |
| url | Link | `String` | - | - |
docs/markdown/en-US/button.md
+77
View File
@@ -0,0 +1,77 @@
## Button
### Install
``` javascript
import { Button } from 'vant';
Vue.component(Button.name, Button);
```
### Usage
#### Type
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
```
#### Size
```html
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
```
#### Disabled
```html
<van-button disabled>Diabled</van-button>
```
#### Loading
```html
<van-button loading></van-button>
<van-button loading type="primary"></van-button>
```
#### Custom Tag
Use `tag` prop to custom button tag
```html
<van-button tag="a" href="https://www.youzan.com" target="_blank">
Button
</van-button>
```
#### Action Button
```html
<van-button type="primary" bottomAction>Button</van-button>
<van-row>
<van-col span="12">
<van-button bottomAction>Button</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottomAction>Button</van-button>
</van-col>
</van-row>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `default` | `primary` `danger` |
| size | Size | `String` | `normal` | `large` `small` `mini` |
| tag | Tag | `String` | `button` | - |
| nativeType | Native Type Attribute | `String` | `''` | - |
| diabled | Whether disable button | `Boolean` | `false` | - |
| loading | Whether show loading status | `Boolean` | `false` | - |
| block | Whether to set display block | `Boolean` | `false` | - |
| bottomAction | Whether to be action button | `Boolean` | `false` | - |
docs/markdown/en-US/card.md
+61
View File
@@ -0,0 +1,61 @@
## Card
### Install
``` javascript
import { Card } from 'vant';
Vue.component(Card.name, Card);
```
### Usage
#### Basic Usage
```html
<van-card
title="Title"
desc="Description"
num="2"
price="2.00"
:thumb="imageURL"
/>
```
#### Advanced Usage
Use `slot` to custom content.
```html
<van-card
title="Title"
desc="Description"
num="2"
price="2.00"
:thumb="imageURL"
>
<div slot="footer">
<van-button size="mini">Button</van-button>
<van-button size="mini">Button</van-button>
</div>
</van-card>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| thumb | Left thumb | `String` | - | - |
| title | Title | `String` | - | - |
| desc | Description | `String` | - | - |
| num | Number of goods | `String | Number` | - | - |
| price | Price of goods | `String | Number` | - | - |
| centered | Whether content vertical centered | `String` | `false` | - |
### Slot
| name | Description |
|-----------|-----------|
| title | Custom title |
| desc | Custom description |
| tags | Custom tags |
| thumb | Custom thumb |
| footer | Custom footer |
docs/markdown/en-US/cell-swipe.md
+37
View File
@@ -0,0 +1,37 @@
## CellSwipe
### Install
``` javascript
import { CellSwipe } from 'vant';
Vue.component(CellSwipe.name, CellSwipe);
```
### Usage
#### Basic Usage
```html
<van-cell-swipe :right-width="65" :left-width="65">
<span slot="left">Select</span>
<van-cell-group>
<van-cell title="Cell" value="Cell Content"></van-cell>
</van-cell-group>
<span slot="right">Delete</span>
</van-cell-swipe>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| left-width | Width of the left scrollable area | `Number` | `0` | - |
| right-width | Width of the right scrollable area | `Number` | `0` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | custom content |
| left | content of left scrollable area |
| right | content of right scrollabe area |
docs/markdown/en-US/cell.md
+87
View File
@@ -0,0 +1,87 @@
## Cell
### Install
``` javascript
import { Cell, CellGroup } from 'vant';
Vue.component(Cell.name, Cell);
Vue.component(CellGroup.name, CellGroup);
```
### Usage
#### Basic Usage
```html
<van-cell-group>
<van-cell title="Cell title" value="Content"></van-cell>
<van-cell title="Cell title" value="Content" label="Description"></van-cell>
</van-cell-group>
```
#### Value only
```html
<van-cell-group>
<van-cell value="Content"></van-cell>
</van-cell-group>
```
#### Left Icon
```html
<van-cell-group>
<van-cell title="Cell title" icon="location"></van-cell>
</van-cell-group>
```
#### Link
```html
<van-cell-group>
<van-cell title="Cell title" is-link></van-cell>
<van-cell title="Cell title" is-link value="Content"></van-cell>
</van-cell-group>
```
#### Advanced Usage
```html
<van-cell-group>
<van-cell value="Content" icon="shop" is-link>
<template slot="title">
<span class="van-cell-text">Cell title</span>
<van-tag type="danger">Tag</van-tag>
</template>
</van-cell>
<van-cell title="Cell title" icon="location" is-link></van-cell>
<van-cell title="Cell title">
<template slot="right-icon">
<van-icon name="search" class="van-cell__right-icon"></van-icon>
</template>
</van-cell>
</van-cell-group>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| icon | Left Icon | `String` | - | - |
| title | Title | `String` | - | - |
| value | Right text | `String` | - | - |
| label | Description below the title | `String` | - | - |
| url | Link | `String` | - | - |
| 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 | `String` | `false` | - |
| isLink | Whether to show link icon | `Boolean` | `false` | - |
| required | Whether to show required mark | `Boolean` | `false` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | Default slot |
| icon | Custom icon |
| title | Custom title |
| right-icon | Custom right icon |
docs/markdown/en-US/changelog.md
+193
View File
@@ -0,0 +1,193 @@
## Changelog
### [0.10.9](https://github.com/youzan/vant/tree/v0.10.9)
`2017-11-15`
**Improvements**
- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
`2017-11-11`
**Improvements**
- Tabbar: support vue-router [\#305](https://github.com/youzan/vant/pull/305) [@chenjiahan](https://github.com/chenjiahan)
- Stepper: add plus & minus event [\#294](https://github.com/youzan/vant/pull/294) [@chenjiahan](https://github.com/chenjiahan)
- Progress: add showPivot prop [\#300](https://github.com/youzan/vant/pull/300) [@chenjiahan](https://github.com/chenjiahan)
- Loading: add spinner type [\#297](https://github.com/youzan/vant/pull/297) [@chenjiahan](https://github.com/chenjiahan)
- Toast: add mask option [\#296](https://github.com/youzan/vant/pull/296) [@chenjiahan](https://github.com/chenjiahan)
- add Tab english document [\#308](https://github.com/youzan/vant/pull/308) [@cookfront](https://github.com/cookfront)
- add Toast english document [\#307](https://github.com/youzan/vant/pull/307) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix npm run dist errors in windows [\#301](https://github.com/youzan/vant/pull/301) [@zlkiarest](https://github.com/lkiarest)
### [0.10.7](https://github.com/youzan/vant/tree/v0.10.7)
`2017-11-08`
**Improvements**
- Normalize size of all icons [\#292](https://github.com/youzan/vant/pull/292) [@chenjiahan](https://github.com/chenjiahan)
- ImagePreview support custom startPosition [\#286](https://github.com/youzan/vant/pull/286) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Sku scroll lock [\#291](https://github.com/youzan/vant/pull/291) [@w91](https://github.com/w91)
- fix Steps style error when has more than 4 items [\#287](https://github.com/youzan/vant/pull/287) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.6](https://github.com/youzan/vant/tree/v0.10.6)
`2017-11-06`
**Improvements**
- add Swipe initialSwipe prop [\#279](https://github.com/youzan/vant/pull/279) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Dialog button text not reset when showed [\#278](https://github.com/youzan/vant/pull/278) [@chenjiahan](https://github.com/chenjiahan)
- fix Tab dynamic generate bug [\#284](https://github.com/youzan/vant/pull/284) [@cookfront](https://github.com/cookfront)
- fix NoticeBar text disappeared when page back [\#280](https://github.com/youzan/vant/pull/280) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.5](https://github.com/youzan/vant/tree/v0.10.5)
`2017-10-30`
**Improvements**
- Cell support vue-router target route [\#268](https://github.com/youzan/vant/pull/268) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Tabbar info display when use icon slot [\#269](https://github.com/youzan/vant/pull/269) [@chenjiahan](https://github.com/chenjiahan)
- fix Uploader input type [\#265](https://github.com/youzan/vant/pull/265) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
`2017-10-26`
**Improvements**
- add more icons [\#253](https://github.com/youzan/vant/pull/253) [@pangxie1991](https://github.com/pangxie1991)
- add document of custom theme [\#251](https://github.com/youzan/vant/pull/251) [@chenjiahan](https://github.com/chenjiahan)
- add click feedback of buttons in components [\#248](https://github.com/youzan/vant/pull/248) [@chenjiahan](https://github.com/chenjiahan)
- add more props of NoticeBar [\#254](https://github.com/youzan/vant/pull/254) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Swipe width calc error [\#258](https://github.com/youzan/vant/pull/258) [@chenjiahan](https://github.com/chenjiahan)
- fix PullRefreash scroll bug when parent is scrollable [\#247](https://github.com/youzan/vant/pull/247) [@GeoffZhu](https://github.com/GeoffZhu)
- fix CouponList empty info display bug [\#246](https://github.com/youzan/vant/pull/246) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.3](https://github.com/youzan/vant/tree/v0.10.3)
`2017-10-25`
**Improvements**
- add Tabbar info prop [\#245](https://github.com/youzan/vant/pull/245) [@chenjiahan](https://github.com/chenjiahan)
- add Toast position prop [\#244](https://github.com/youzan/vant/pull/244) [@chenjiahan](https://github.com/chenjiahan)
- add Coupon showExchangeBar prop [\#243](https://github.com/youzan/vant/pull/243) [@chenjiahan](https://github.com/chenjiahan)
- add Advanced components english document [\#236](https://github.com/youzan/vant/pull/236) [@Tinysymphony](https://github.com/Tinysymphony)
- add demo pages in document [\#237](https://github.com/youzan/vant/pull/237) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Address & Contact list style error [\#230](https://github.com/youzan/vant/pull/230) [@chenjiahan](https://github.com/chenjiahan)
- fix popup style missing when build style entry [\#231](https://github.com/youzan/vant/pull/231) [@chenjiahan](https://github.com/chenjiahan)
- fix PullRefresh touchcancel event [\#239](https://github.com/youzan/vant/pull/239) [@GeoffZhu](https://github.com/GeoffZhu)
### [0.10.2](https://github.com/youzan/vant/tree/v0.10.2)
`2017-10-20`
**Improvements**
- Sku: sku-group slot add event bus [\#226](https://github.com/youzan/vant/pull/226) [@w91](https://github.com/w91)
- add English documents [\#220](https://github.com/youzan/vant/pull/220) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- Optimize component dependency analyze when build style entry [\#224](https://github.com/youzan/vant/pull/224) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.1](https://github.com/youzan/vant/tree/v0.10.1)
`2017-10-18`
**Improvements**
- upgrade Vue version to 2.5.0 [@chenjiahan](https://github.com/chenjiahan)
- add Tabs swipeThreshold prop [\#206](https://github.com/youzan/vant/pull/206) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- fix Swipe not clear autoplay timer when destroyed [\#218](https://github.com/youzan/vant/pull/218) [@chenjiahan](https://github.com/chenjiahan)
- fix Tab slot text ellipsis [\#217](https://github.com/youzan/vant/pull/217) [@cookfront](https://github.com/cookfront)
- fix TreeSelect denpendency path error [\#216](https://github.com/youzan/vant/pull/216) [@chenjiahan](https://github.com/chenjiahan)
- fix Checkbox border render error in Weixin browser [\#214](https://github.com/youzan/vant/pull/214) [@chenjiahan](https://github.com/chenjiahan)
- fix Popup modal can not display in some cases [\#211](https://github.com/youzan/vant/pull/211) [@chenjiahan](https://github.com/chenjiahan)
- fix Waterfall repeated event bind [@chenjiahan](https://github.com/chenjiahan)
### [0.10.0](https://github.com/youzan/vant/tree/v0.10.0)
`2017-10-13`
**Breaking changes**
- remove reset.css in vant-css [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) [@chenjiahan](https://github.com/chenjiahan)
- reconstruct Swipe component, adjust some API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200) [@chenjiahan](https://github.com/chenjiahan)
- optimize Search component，adjust struct [\#198](https://github.com/youzan/vant/pull/198) [@pangxie1991](https://github.com/pangxie1991)
**Improvements**
- add Tabbar componnet [#157](https://github.com/youzan/vant/issues/157) [\#204](https://github.com/youzan/vant/pull/204) [@chenjiahan](https://github.com/chenjiahan)
- add english document of Form components [\#199](https://github.com/youzan/vant/pull/199) [@chenjiahan](https://github.com/chenjiahan)
- optimize Sku style [\#205](https://github.com/youzan/vant/pull/205) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix ImagePreview beating bug when loading image [\#201](https://github.com/youzan/vant/pull/201) [@chenjiahan](https://github.com/chenjiahan)
- fix Field height error when type is textarea and display none [\#181](https://github.com/youzan/vant/issues/181) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
`2017-10-11`
**Bug Fixes**
- fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
`2017-10-11`
**Improvements**
- add Contribute document [\#182](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
**Bug Fixes**
- fix AddressEdit name key [\#187](https://github.com/youzan/vant/pull/187) [@chenjiahan](https://github.com/chenjiahan)
- fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
- fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
`2017-10-09`
**Improvements**
- add Contact component [\#160](https://github.com/youzan/vant/pull/160) [@chenjiahan](https://github.com/chenjiahan)
- add AddressEdit component [\#147](https://github.com/youzan/vant/pull/147) [@chenjiahan](https://github.com/chenjiahan)
- add english document support [\#170](https://github.com/youzan/vant/pull/170) [@pangxie1991](https://github.com/pangxie1991)
- remove dependency of zan-utils [\#168](https://github.com/youzan/vant/pull/168) [@w91](https://github.com/w91) [@chenjiahan](https://github.com/chenjiahan)
- remove unnecessary codes in transition.js [\#162](https://github.com/youzan/vant/pull/162) [@chenjiahan](https://github.com/chenjiahan)
- use clean-css instead of gulp-cssmin to minify css [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Tab props not observable [\#148](https://github.com/youzan/vant/pull/148) [@chenjiahan](https://github.com/chenjiahan)
- fix Button active border color [\#150](https://github.com/youzan/vant/issues/150) [@ZWkang](https://github.com/ZWkang)
- fix Stepper input style [\#159](https://github.com/youzan/vant/pull/159) [@w91](https://github.com/w91)
- fix Waterfall disable props not work when display none [\#166](https://github.com/youzan/vant/pull/166) [@pangxie1991](https://github.com/pangxie1991)
- fix vant-css not compile calc property after build [@chenjiahan](https://github.com/chenjiahan)
- fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152) [@chenjiahan](https://github.com/chenjiahan)
- fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158) [@pangxie1991](https://github.com/pangxie1991)
### [0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
`2017-09-26`
**Improvements**
- Sku：support Stepper [\#146](https://github.com/youzan/vant/pull/146) [@w91](https://github.com/w91)
**Bug Fixes**
- fix license error in packages.json [\#144](https://github.com/youzan/vant/pull/144) [@airyland](https://github.com/airyland)
- fix Waterfall scroll bug [\#145](https://github.com/youzan/vant/pull/145) [@pangxie1991](https://github.com/pangxie1991)
### [0.9.8](https://github.com/youzan/vant/tree/v0.9.8)
`2017-09-24`
**Improvements**
- add AddressList component [\#138](https://github.com/youzan/vant/pull/138) [@chenjiahan](https://github.com/chenjiahan)
- modify changelog [\#140](https://github.com/youzan/vant/pull/140) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- fix Sku message render bug [\#142](https://github.com/youzan/vant/pull/142) [@w91](https://github.com/w91)
### [0.9.7](https://github.com/youzan/vant/tree/v0.9.7)
`2017-09-21`
**Improvements**
- Checkbox: support shape prop [\#137](https://github.com/youzan/vant/pull/137) [@chenjiahan](https://github.com/chenjiahan)
docs/markdown/en-US/checkbox.md
+97
View File
@@ -0,0 +1,97 @@
## Checkbox
### Install
``` javascript
import { Checkbox, CheckboxGroup } from 'vant';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
```
### Usage
#### Basic Usage
```html
<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
#### Disabled
```html
<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
```
#### Checkbox Group
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
```html
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="index"
:name="item"
>
Checkbox {{ item }}
</van-checkbox>
</van-checkbox-group>
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
};
```
#### Inside a Cell
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
### Checkbox API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| name | Checkbox name | `Boolean` | `false` | - |
| disabled | Diable checkbox | `Boolean` | `false` | - |
| shape | Checkbox shape | `String` | `round` | `square` |
### CheckboxGroup API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| disabled | Disable all checkboxes | `Boolean` | `false` | - |
### Checkbox Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when value changed | current value |
### CheckboxGroup Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when value changed | current value |
docs/markdown/en-US/contact.md
+169
View File
@@ -0,0 +1,169 @@
## Contact
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
### Install
``` javascript
import { ContactCard, ContactList, ContactEdit } from 'vant';
Vue.component(ContactCard.name, ContactCard);
Vue.component(ContactList.name, ContactList);
Vue.component(ContactEdit.name, ContactEdit);
```
### Usage
#### Basic Usage
```html
<!-- 联系人卡片 -->
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
/>
<!-- 联系人列表 -->
<van-popup v-model="showList" position="bottom">
<van-contact-list
v-model="chosenContactId"
:list="list"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>
<!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contactInfo="editingContact"
:isEdit="isEdit"
@save="onSave"
@delete="onDelete"
/>
</van-popup>
```
``` javascript
export default {
data() {
return {
chosenContactId: null,
editingContact: {},
showList: false,
showEdit: false,
isEdit: false,
list: [{
name: '张三',
tel: '13000000000',
id: 0
}]
};
},
computed: {
cardType() {
return this.chosenContactId !== null ? 'edit' : 'add';
},
currentContact() {
const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
}
},
methods: {
// 添加联系人
onAdd() {
this.editingContact = { id: this.list.length };
this.isEdit = false;
this.showEdit = true;
},
// 编辑联系人
onEdit(item) {
this.isEdit = true;
this.showEdit = true;
this.editingContact = item;
},
// 选中联系人
onSelect() {
this.showList = false;
},
// 保存联系人
onSave(info) {
this.showEdit = false;
this.showList = false;
if (this.isEdit) {
this.list = this.list.map(item => item.id === info.id ? info : item);
} else {
this.list.push(info);
}
this.chosenContactId = info.id;
},
// 删除联系人
onDelete(info) {
this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id);
if (this.chosenContactId === info.id) {
this.chosenContactId = null;
}
}
}
};
```
### ContactCard API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type，分为添加和编辑两种样式 | `String` | `add` | `edit` |
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
| name | 联系人姓名 | `String` | - | - |
| tel | 联系人手机号 | `String` | - | - |
### ContactList API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
| list | 联系人列表 | `Array` | `[]` | - |
### ContactList Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
### ContactEdit API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| contactInfo | 联系人信息 | `Object` | `[]` | - |
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### ContactEdit Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
### Data Structure
#### 联系人Data Structure
| key | Description | Type |
|-----------|-----------|-----------|
| id | 每位联系人的唯一标识 | `String | Number` |
| name | 联系人姓名 | `String` |
| tel | 联系人手机号 | `String` |
docs/markdown/en-US/coupon.md
+115
View File
@@ -0,0 +1,115 @@
## Coupon
### Install
``` javascript
import { CouponCell, CouponList } from 'vant';
Vue.component(CouponCell.name, CouponCell);
Vue.component(CouponList.name, CouponList);
```
### Usage
#### Basic Usage
```html
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosenCoupon="chosenCoupon"
@click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:disabledCoupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
```
```javascript
const coupon = {
available: 1,
discount: 0,
denominations: 150,
origin_condition: 0,
reason: '',
value: 150,
condition: '下单立减 1.50 元',
name: '新手专用优惠券',
start_at: 1489104000,
end_at: 1514592000
};
export default {
data() {
return {
chosenCoupon: -1,
coupons: [coupon],
disabledCoupons: [coupon]
}
},
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
this.coupons.push(coupon);
}
}
}
```
### CouponCell API
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
### CouponList API
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
### CouponList Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
| exchange | 兑换优惠券回调 | code, 兑换码 |
### Data Structure
#### 优惠券字段说明
| key | Description | Type |
|-----------|-----------|-----------|
| id | 优惠券 id | `String` |
| name | 优惠券名称 | `String` |
| available | 是否可用, 1:可用,0:不可用 | `Number` |
| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
| denominations | 面值（0为折扣券）单位分 | `Number` |
| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
| start_at | 卡有效开始时间 | `Number` |
| end_at | 卡失效日期 | `Number` |
| reason | 不可用原因 | `String` |
| value | 订单优惠金额，单位分 | `Number` |
| condition | 格式化输出 value | `String` |
docs/markdown/en-US/datetime-picker.md
+80
View File
@@ -0,0 +1,80 @@
## DatetimePicker
### Install
``` javascript
import { DatetimePicker } from 'vant';
Vue.component(DatetimePicker.name, DatetimePicker);
```
### Usage
#### Basic Usage
```html
<van-datetime-picker
v-model="currentDate"
type="datetime"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:maxDate="maxDate"
/>
```
```javascript
export default {
data() {
return {
minHour: 10,
maxHour: 20,
minDate: new Date(),
maxDate: new Date(2019, 10, 1),
currentDate: new Date(2018, 0, 1)
};
}
};
```
#### Date Picker
```html
<van-datetime-picker
v-model="currentDate"
type="date"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
/>
```
#### Time Picker
```html
<van-datetime-picker
v-model="currentDate3"
type="time"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
/>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Picker type | `String` | 'datetime' | 'date', 'time' |
| minDate | Min date | `Date` | Ten years ago on January 1 | - |
| maxDate | Max date | `Date` | Ten years later on December 31 | - |
| minHour | Min hour | `Number` | `0` | - |
| maxHour | Max hour | `Number` | `23` | - |
| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
### Event
| Event | Description | Arguments |
|-----------|-----------|-----------|
| change | Triggered when value changed | picker: picker instance |
| confirm | Triggered when click confirm button | value: current value |
| cancel | Triggered when click cancel button | - |
docs/markdown/en-US/dialog.md
+63
View File
@@ -0,0 +1,63 @@
## Dialog
### Install
```js
import { Dialog } from 'vant';
```
### Usage
#### Alert dialog
Used to prompt for some messages, only including one confirm button
```javascript
Dialog.alert({
title: 'Title',
message: 'Content'
}).then(() => {
// on close
});
Dialog.alert({
message: 'Content'
}).then(() => {
// on close
});
```
#### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button
```javascript
Dialog.confirm({
title: 'Title',
message: 'Content'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
```
### Methods
| Name | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| Dialog.alert | options | `Promise` | Show alert dialog |
| Dialog.confirm | options | `Promise` | Show confim dialog |
| Dialog.close | - | `void` | Close dialog |
### Options
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | - | - |
| message | Message | `String` | - | - |
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` | - |
| showCancelButton | Whether to show cancel button | `Boolean` | `false` | - |
| confirmButtonText | Confirm button text | `String` | `Confirm` | - |
| cancelButtonText | Cancel button test | `String` | `Cancel` | - |
| overlay | Whether to show overlay | `Boolean` | `true` | - |
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
docs/markdown/en-US/field.md
+103
View File
@@ -0,0 +1,103 @@
## Field
### Install
``` javascript
import { Field } from 'vant';
Vue.component(Field.name, Field);
```
### Usage
#### Basic Usage
The value of filed is bound with v-model.
```html
<van-cell-group>
<van-field v-model="value" placeholder="Username"></van-field>
</van-cell-group>
```
#### Custom type
Use `type` prop to custom diffrent type fileds.
```html
<van-cell-group>
<van-field
v-model="username"
label="Username"
icon="clear"
placeholder="Username"
required
@click-icon="username = ''"
>
</van-field>
<van-field
v-model="password"
type="password"
label="Password"
placeholder="Password"
required>
</van-field>
</van-cell-group>
```
#### Disabled
```html
<van-cell-group>
<van-field value="Disabled" label="Username" disabled></van-field>
</van-cell-group>
```
#### Error info
```html
<van-cell-group>
<van-field label="Username" placeholder="Username" error></van-field>
</van-cell-group>
```
#### Auto resize
Textarea Filed can be auto resize when has `autosize` prop
```html
<van-cell-group>
<van-field
v-model="message"
label="Message"
type="textarea"
placeholder="Message"
rows="1"
autosize
>
</van-field>
</van-cell-group>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Filed type | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
| value | Filed value | `String` | - | - |
| label | Filed label | `String` | - | - |
| disabled | Disable field | `Boolean` | `false` | - |
| error | Whether to show error info | `Boolean` | `false` | - |
| autosize | Textarea auto resize | `Boolean` | `false` | - |
| icon | Right side Icon name | `String` | - | - |
### Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| focus | Triggered when filed get focused | - |
| blur | Triggered when blur filed | - |
| click-icon | Triggered when click the icon of filed | - |
### Slot
| name | Description |
|-----------|-----------|
| icon | Custom icon |
docs/markdown/en-US/goods-action.md
+64
View File
@@ -0,0 +1,64 @@
## GoodsAction
### Install
``` javascript
import {
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn
} from 'vant';
Vue.component(GoodsAction.name, GoodsAction);
Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
```
### Usage
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
客服
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="onClickBigBtn">
加入购物车
</van-goods-action-big-btn>
<van-goods-action-big-btn @click="onClickBigBtn" primary>
立即购买
</van-goods-action-big-btn>
</van-goods-action>
```
```javascript
export default {
methods: {
onClickMiniBtn() {
Toast('点击图标');
},
onClickBigBtn() {
Toast('点击按钮');
}
}
}
```
### API
#### GoodsActionMiniBtn
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - |
#### GoodsActionBigBtn
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
docs/markdown/en-US/icon.md
+23
View File
@@ -0,0 +1,23 @@
## Icon
### Install
``` javascript
import { Icon } from 'vant';
Vue.component(Icon.name, Icon);
```
### Usage
#### Basic Usage
View all usable icons on the right.
```html
<van-icon name="success" />
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| name | Icon name | `String` | `''` | - |
docs/markdown/en-US/image-preview.md
+32
View File
@@ -0,0 +1,32 @@
## ImagePreview
### Install
```js
import { ImagePreview } from 'vant';
```
### Usage
#### Basic Usage
```javascript
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
```
#### Custom Start Position
```javascript
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
], 1);
```
### Arguments
| Attribute | Description | Type |
|-----------|-----------|-----------|
| imageUrls | Image URL list | `Array` |
docs/markdown/en-US/layout.md
+66
View File
@@ -0,0 +1,66 @@
## Layout
Quickly and easily create layouts with `van-row` and `van-col`
### Install
``` javascript
import { Row, Col } from 'vant';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
```
### 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>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
<van-col span="6">span: 6</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
```
#### Column Spacing
Set grid spacing using `gutter` attribute. The default value is 0
```html
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
```
### API
#### Row
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| gutter | grid spacing（px） | `String | Number` | - | - |
| prefix | className prefix | `String` | `van` | - |
#### Column
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| span | number of column the grid spans | `String | Number` | - | - |
| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
| prefix | className prefix | `String` | `van` | - |
docs/markdown/en-US/lazyload.md
+90
View File
@@ -0,0 +1,90 @@
<script>
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
],
backgroundImageList: [
'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
],
componentImageList: [
'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
]
};
},
methods: {
handleComponentShow() {
console.log('component show');
}
}
}
</script>
## Lazyload
### Install
```js
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload, options);
```
### Usage
#### Basic Usage
```html
<img v-for="img in imageList" v-lazy="img">
```
```javascript
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
}
}
```
#### 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
```html
<lazy-component>
<img v-for="img in imageList" v-lazy="img">
</lazy-component>
```
### Options
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| loading | Src of the image while loading | `String` | - | - |
| error | Src of the image upon load fail | `String` | - | - |
| preload | Proportion of pre-loading height | `String` | - | - |
| attempt | Attempts count | `Number` | `3` | - |
| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - |
| adapter | Dynamically modify the attribute of element | `Object` | - | - |
| filter | The image's listener filter | `Object` | - | - |
| lazyComponent | Lazyload component | `Boolean` | `false` | - |
See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload)
docs/markdown/en-US/loading.md
+38
View File
@@ -0,0 +1,38 @@
## Loading
### Install
``` javascript
import { Loading } from 'vant';
Vue.component(Loading.name, Loading);
```
### Usage
#### Solid Circle
```html
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
#### Gradient Circle
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
```
#### Spinner
```html
<van-loading type="spinner" color="black" />
<van-loading type="spinner" color="white" />
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| color | Color | `String` | `black` | `black` `white` |
| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
docs/markdown/en-US/nav-bar.md
+47
View File
@@ -0,0 +1,47 @@
## NavBar
### Install
``` javascript
import { NavBar } from 'vant';
Vue.component(NavBar.name, NavBar);
```
### Usage
#### Basic Usage
```html
<van-nav-bar
title="Title"
leftText="Back"
rightText="Button"
leftArrow
/>
```
#### Advanced Usage
```html
<van-nav-bar title="Title" leftText="Back" leftArrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | `''` | - |
| leftText | Left Text | `String` | `''` | - |
| rightText | Right Text | `String` | `''` | - |
| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
| fixed | Whether to fixed top | `Boolean` | `false` | - |
### Slot
| name | Description |
|-----------|-----------|
| title | Custom title |
| left | Custom left side content |
| right | Custom right side content |
docs/markdown/en-US/notice-bar.md
+58
View File
@@ -0,0 +1,58 @@
## NoticeBar
### Install
``` javascript
import { NoticeBar } from 'vant';
Vue.component(NoticeBar.name, NoticeBar);
```
### Usage
#### Basic Usage
```html
<van-notice-bar
text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
leftIcon="https://img.yzcdn.cn/1.png"
/>
```
#### Disable scroll
```html
<van-notice-bar :scrollable="false">
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
</van-notice-bar>
```
#### Mode
```html
<van-notice-bar mode="closeable">
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
</van-notice-bar>
<van-notice-bar mode="link">
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
</van-notice-bar>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| mode | Mode | String | `''` | `closeable` `link` |
| delay | Animation delay (s) | Number | `1` | - |
| speed | Scroll speed (px) | Number | `50` | - |
| scrollable | Whether to scroll content | Boolean | `true` | - |
| leftIcon | Image url of left icon | String | - | - |
| color | Text color | String | `#f60` | - |
| background | Background color | String | `#fff7cc` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| click | Triggered when click notice bar | - |
docs/markdown/en-US/number-keyboard.md
+69
View File
@@ -0,0 +1,69 @@
## NumberKeyboard
### Install
``` javascript
import { NumberKeyboard } from 'vant';
Vue.component(NumberKeyboard.name, NumberKeyboard);
```
### Usage
#### Basic Usage
```html
<van-button @touchstart.native.stop="showKeyboard = true">
Show Keyboard
</van-button>
<van-button @touchstart.native.stop="showKeyboard = false">
Hide Keyboard
</van-button>
<van-number-keyboard
:show="showKeyboard"
@blur="showKeyboard = false"
@input="onInput"
@delete="onDelete"
/>
```
```javascript
export default {
data() {
return {
showKeyboard: true
}
},
methods: {
onInput(value) {
Toast(value);
},
onDelete() {
Toast('delete');
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| show | Whether to show keyboard | `Boolean` | - | - |
| title | Keyboard title | `String` | - | - |
| extraKey | Content of bottom left key | `String` | `''` | - |
| zIndex | Keyboard z-index | `Number` | `100` | - |
| transition | Whether to show transition animation | `Boolean` | `true` | - |
| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| input | Triggered when keydown | key: Content of the key |
| delete | Triggered when press delete key | - |
| blur | Triggered when blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |
docs/markdown/en-US/panel.md
+47
View File
@@ -0,0 +1,47 @@
## Panel
### Install
``` javascript
import { Panel } from 'vant';
Vue.component(Panel.name, Panel);
```
### Usage
#### Basic Usage
```html
<van-panel title="Title" desc="Description" status="Status">
<div>Content</div>
</van-panel>
```
#### Advanced Usage
```html
<van-panel title="Title" desc="Description" status="Status">
<div>Content</div>
<div slot="footer">
<van-button size="small">Button</van-button>
<van-button size="small" type="danger">Button</van-button>
</div>
</van-panel>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | - | - |
| desc | Description | `String` | - | - |
| status | Status | `String` | - | - |
### Slot
| name | Description |
|-----------|-----------|
| - | Default slot |
| header | Custom header |
| footer | Custom footer |
docs/markdown/en-US/password-input.md
+86
View File
@@ -0,0 +1,86 @@
<script>
export default {
data() {
return {
value: '',
showKeyboard: true
}
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}
</script>
## PasswordInput
The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
### Install
``` javascript
import { PasswordInput, NumberKeyBoard } from 'vant';
Vue.component(PasswordInput.name, PasswordInput);
Vue.component(NumberKeyBoard.name, NumberKeyBoard);
```
### Usage
#### Basic Usage
```html
<!-- PasswordInput -->
<van-password-input
:value="value"
info="Some tips"
@focus="showKeyboard = true"
/>
<!-- NumberKeyboard -->
<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
```
```javascript
export default {
data() {
return {
value: '',
showKeyboard: true
};
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| value | Password value | `String` | `''` | - |
| length | Maxlength of password | `Number` | `6` | - |
| info | Bottom info | `String` | - | - |
| errorInfo | Bottom error info | `String` | - | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| focus | Triggered when input get focused | - |
docs/markdown/en-US/picker.md
+128
View File
@@ -0,0 +1,128 @@
## Picker
### Install
``` javascript
import { Picker } from 'vant';
Vue.component(Picker.name, Picker);
```
### Usage
#### Basic Usage
```html
<van-picker :columns="pickerColumns" @change="onChange" />
```
```javascript
const states = {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(states),
className: 'column1'
},
{
values: states.Group1,
className: 'column2'
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
```
#### Picker with toolbar
```html
<van-picker
showToolbar
:title="title"
:columns="pickerColumns"
@change="onChange"
@cancel="onCancel"
@confirm="onConfirm"
/>
```
```javascript
const states = {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
};
export default {
data() {
return {
title: 'Title',
pickerColumns: [
{
values: Object.keys(states),
className: 'column1'
},
{
values: states.Group1,
className: 'column2'
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
onCancel() {
Toast('Cancel');
},
onConfirm() {
Toast('Confirm');
}
}
};
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
| itemHeight | Item height | `Number` | `44` | - |
| columns | Columns data | `Array` | - | - |
| showToolbar | Whether to show toolbar | `Boolean` | `true` | - |
| title | Toolbar title | `String` | - | - |
### Data struct of columns
| key | Description |
|-----------|-----------|
| values | Value of column |
| defaultIndex | Default value index |
| className | ClassName for this column |
### Picker instance
The first argument of change event's callback function is a picker instance with some methods
| Method | Description |
|-----------|-----------|
| getColumnValue(index) | get current value of the column |
| setColumnValue(index, value) | set current value of the column |
| getColumnValues(index) | get all values of the column |
| setColumnValues(index, values) | set all values of the column |
| getValues() | get current values of all columns |
| setValues(values) | set current values of all columns |
docs/markdown/en-US/popup.md
+48
View File
@@ -0,0 +1,48 @@
## Popup
### Install
``` javascript
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
```
### Usage
#### Basic Usage
Popup is located in the middle of the screen by default
```html
<van-popup v-model="show">Content</van-popup>
```
```javascript
export default {
data() {
return {
show: false
}
}
};
```
#### Position
Use `position` prop to set popup display position
```html
<van-popup v-model="show" position="top" :overlay="false">
Content
</van-popup>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Whether to show popup | `Boolean` | `false` | - |
| overlay | Whether to show overlay | `Boolean` | `true` | - |
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
| position | Position | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
| transition | Transition | `String` | `popup-slide` | - |
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
docs/markdown/en-US/progress.md
+49
View File
@@ -0,0 +1,49 @@
## Progress
### Install
``` javascript
import { Progress } from 'vant';
Vue.component(Progress.name, Progress);
```
### Usage
#### Basic Usage
Use 'percentage' prop to set current progress
```html
<van-progress :percentage="0" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
```
#### Inactive
```html
<van-progress inactive :percentage="0" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
```
#### Custom Style
Use `pivotText` to custom text，use `color` to custom bar color
```html
<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
<van-progress pivotText="Orange" color="#f60" :percentage="46" />
<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| inactive | Whether to be gray | `Boolean` | `false` | - |
| percentage | Percentage | `Number` | `false` | `0-100` |
| showPivot | Whether to show text | `Boolean` | `true` | - |
| pivotText | Text | `String` | percentage | - |
| color | Color | `String` | `#38f` | hexvalue |
| textColor | Text color | `String` | `#fff` | hexvalue |
docs/markdown/en-US/pull-refresh.md
+66
View File
@@ -0,0 +1,66 @@
## PullRefresh
### Install
``` javascript
import { PullRefresh } from 'vant';
Vue.component(PullRefresh.name, PullRefresh);
```
### Usage
```html
<!-- use v-model to control loading status -->
<van-pull-refresh
v-model="isLoading"
pulling-text="Pull to refresh..."
loosing-text="Loose to refresh..."
loading-text="Loading..."
>
<p>Refresh Count: {{ count }}</p>
</van-pull-refresh>
```
```javascript
export default {
data() {
return {
count: 0,
isLoading: false
}
},
watch: {
isLoading() {
if (this.isLoading) {
setTimeout(() => {
Toast('Refresh Success');
this.isLoading = false;
this.count++;
}, 500);
}
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Loading status | `Boolean` | - | - |
| pullingText | Text to show when pulling | `String` | `下拉即可刷新...` | - |
| loosingText | Text to show when loosing | `String` | `释放即可刷新...` | - |
| loadingText | Text to show when loading | `String` | `加载中...` | - |
| animationDuration | Animation duration | `Number` | `300` | - |
| headHeight | Height of head | `Number` | `50` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | Default slot |
| normal | Content of head when at normal status |
| pulling | Content of head when at pulling |
| loosing | Content of head when at loosing |
| loading | Content of head when at loading |
docs/markdown/en-US/quickstart.md
+60
View File
@@ -0,0 +1,60 @@
## Vant
Mobile UI Component based on `Vue 2.0`
### Install
```shell
npm i vant -S
```
### Usage
#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
```bash
# Install babel-plugin-import
npm i babel-plugin-import -D
```
```js
// set babel config in .babelrc or babel-loader
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
Then you can import components from vant, equivalent to import manually below.
```js
import { Button } from 'vant';
```
#### 2. Manually import
```js
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
```
#### 3. Import all components
```js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
```html
<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
<!-- import script --><script></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
docs/markdown/en-US/radio.md
+76
View File
@@ -0,0 +1,76 @@
## Radio
### Install
``` javascript
import { Radio } from 'vant';
Vue.component(Radio.name, Radio);
```
### Usage
#### Basic Usage
Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
```html
<van-radio name="1" v-model="radio">Radio 1</van-radio>
<van-radio name="2" v-model="radio">Radio 2</van-radio>
```
```javascript
export default {
data() {
return {
radio: '1'
}
}
};
```
#### Disabled
```html
<van-radio name="1" v-model="radio" disabled>Disabled</van-radio>
<van-radio name="2" v-model="radio" disabled>Disabled and checked</van-radio>
```
#### Radio Group
When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
```html
<van-radio-group v-model="radio">
<van-radio name="1">Radio 1</van-radio>
<van-radio name="2">Radio 2</van-radio>
</van-radio-group>
```
#### Inside a Cell
```html
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
<van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
</van-cell-group>
</van-radio-group>
```
### Radio API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| disabled | Diable radio | `Boolean` | `false` | - |
| name | Radio name | `Boolean` | `false` | - |
### RadioGroup API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| disabled | Diable all radios | `Boolean` | `false` | - |
### RadioGroup Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when value changed | current value |
docs/markdown/en-US/search.md
+76
View File
@@ -0,0 +1,76 @@
## Search
### Install
``` javascript
import { Search } from 'vant';
Vue.component(Search.name, Search);
```
### Usage
#### Basic Usage
```html
<van-search placeholder="Placeholder" v-model="value" />
```
```javascript
export default {
data() {
value: ''
}
}
```
#### 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.
Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
```html
<form action="/">
<van-search
v-model="value"
placeholder="Placeholder"
:showAction="true"
@search="onSearch"
@cancel="onCancel">
</van-search>
</form>
```
#### Custom Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
```html
<van-search
v-model="value"
:showAction="true"
@search="onSearch">
<div slot="action" @click="onSearch">Search</div>
</van-search>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | Input placeholder | `String` | - | - |
| background | Background color | `String` | `#f2f2f2` | - |
| showAction | Whether to show right button | `Boolean` | false | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| cancel | Triggered when click cancel button | - |
| search | Triggered when confirm search | - |
### Slot
| name | Description |
|-----------|-----------|
| action | Custom right button, displayed when `showAction` is true |
docs/markdown/en-US/sku.md
+175
View File
@@ -0,0 +1,175 @@
## Sku
### Install
```javascript
import { Sku } from 'vant';
Vue.component(Sku.name, Sku);
```
### Usage
#### Basic Usage
```html
<van-sku
v-model="showBase"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="resetStepperOnHide"
:disableStepperInput="disableStepperInput"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
/>
```
#### 自定义 sku slot 区块
```html
<van-sku
v-model="showCustomAction"
stepperTitle="我要买"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:showAddCartBtn="true"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="true"
:initialSku="initialSku"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
<!-- 隐藏sku messages -->
<template slot="sku-messages"></template>
<!-- 自定义sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
积分兑换
</button>
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
买买买
</button>
</div>
</template>
</van-sku>
```
### API
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否显示sku | Boolean | false | 是 |
| sku | 商品sku数据 | Object | - | 是 |
| goods | 商品信息 | Object | - | 是 |
| goodsId | 商品id | String/Number | - | 是 |
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
### slots
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
| Name | Description |
|-----------|-----------|
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
| sku-group | 商品sku展示区 |
| extra-sku-group | 额外商品sku展示区，一般用不到 |
| sku-stepper | 商品数量选择区 |
| sku-messages | 商品留言区 |
| sku-actions | 操作按钮区 |
#### Data Structure
#### sku对象结构
```javascript
"sku": {
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
"tree": [{
"k": "颜色", // skuKeyName：规格类目名称
"v": [{
"id": "30349", // skuValueId：规格值id
"name": "红色", // skuValueName：规格值名称
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
}, {
"id": "1215",
"name": "蓝色",
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
}],
"k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id
}, ...],
// 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
"list": [{
"id": 2259, // skuId，下单时后端需要
"price": 100, // 价格（单位分）
"s1": "1215", // 规格类目k_s为s1的对应规格值id
"s2": "1193", // 规格类目k_s为s2的对应规格值id
"s3": "0", // 最多包含3个规格值，为0表示不存在该规格
"stock_num": 110 // 当前sku组合对应的库存
}, ...],
"price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
"stock_num": 227, // 商品总库存
"collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
"none_sku": false, // 是否无规格商品
"messages": [{ // 商品留言
"datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
"multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
"name": "留言", // 留言名称
"type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
"required": "1" // 是否必填 “1”表示必填
}, ...],
"hide_stock": false // 是否隐藏剩余库存
},
```
#### goods对象结构
```javascript
"goods": {
// 商品标题
"title": "测试商品",
// 默认商品sku缩略图
"picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
},
```
#### 添加购物车和点击购买回调函数接收的skuData对象结构
```javascript
skuData: {
// 商品id
goodsId:"946755",
// 留言信息
messages: {
message_0:"12",
message_1:"",
... // 有几个留言就有几条
},
// 另一种格式的留言，key不同
cartMessages: {
'留言1': 'xxxx',
... // key是message的name
},
// 选择的商品数量
selectedNum:1,
// 选择的sku组合
selectedSkuComb: {
id:2257,
price:100,
s1:"30349",
s2:"1193",
s3:"0",
stock_num:111
}
}
```
docs/markdown/en-US/stepper.md
+64
View File
@@ -0,0 +1,64 @@
## Stepper
### Install
``` javascript
import { Stepper } from 'vant';
Vue.component(Stepper.name, Stepper);
```
### Usage
#### Basic Usage
```html
<van-stepper v-model="value" />
```
```javascript
export default {
data() {
return {
value: 1
}
}
}
```
#### Disabled
```html
<van-stepper v-model="value" disabled />
```
#### Advanced Usage
```html
<van-stepper
v-model="value"
min="5"
max="40"
step="2"
defaultValue="9"
/>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| min | Min value | `String | Number` | `1` | - |
| max | Max value | `String | Number` | - | - |
| defaultValue | Default value | `String | Number` | `1` | - |
| step | Value change step | `String | Number` | `1` | - |
| disabled | Disable value change | `Boolean` | `false` | - |
| disableInput | Disable input | `Boolean` | `false` | - |
### Event
| Event | Description | Arguments |
|-----------|-----------|-----------|
| change | Triggered when value change | value: current value |
| overlimit | Triggered when click disabled button | - |
| plus | Triggered when click plus button | - |
| minus | Triggered when click minus button | - |
docs/markdown/en-US/steps.md
+86
View File
@@ -0,0 +1,86 @@
## Steps
### Install
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### Usage
#### Basic Usage
```html
<van-steps :active="active">
<van-step>Step1</van-step>
<van-step>Step2</van-step>
<van-step>Step3</van-step>
<van-step>Step4</van-step>
</van-steps>
```
```javascript
export default {
data() {
return {
active: 0
};
}
}
```
#### Description
```html
<van-steps
:active="active"
icon="logistics"
title="Title"
description="Description"
>
<van-step>Step1</van-step>
<van-step>Step2</van-step>
<van-step>Step3</van-step>
<van-step>Step4</van-step>
</van-steps>
```
#### Vertical Steps
```html
<van-steps direction="vertical" :active="0" activeColor="#f60">
<van-step>
<h3>【City】Status1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>【City】Status2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>【City】Status3</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
```
### Steps API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| active | Active step | `Number` | 0 | - |
| icon | Action step icon | `String` | - | - |
| iconClass | Icon class | `String` | - | - |
| title | Title | `String` | - | - |
| description | Description | `String` | - | - |
| direction | Direction | `String` | `horizontal` | `vertical` |
| activeColor | Active step color | `String` | `#06bf04` | - |
### Steps Slot
| Name | Description |
|-----------|-----------|
| icon | Custom icon |
| message-extra | Extra content |
docs/markdown/en-US/submit-bar.md
+109
View File
@@ -0,0 +1,109 @@
## SubmitBar
<script>
import { Toast } from 'packages';
export default {
methods: {
onClickButton() {
Toast('点击按钮');
},
onClickEditAddress() {
Toast('修改地址');
}
}
}
</script>
<style>
.demo-submit-bar {
.van-submit-bar {
position: relative;
}
.van-edit-address {
color: #38F;
}
}
</style>
### Install
``` javascript
import { SubmitBar } from 'vant';
Vue.component(SubmitBar.name, SubmitBar);
```
### Usage
#### Basic Usage
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
/>
```
#### Disabled
禁用状态下不会触发`submit`事件
```html
<van-submit-bar
disabled
:price="3050"
buttonText="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
@submit="onClickButton"
/>
```
#### Loading
加载状态下不会触发`submit`事件
```html
<van-submit-bar
loading
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
/>
```
#### Advanced Usage
提示文案中的额外操作和说明
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
>
<span slot="tip">
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
</span>
</van-submit-bar>
```
### API
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | - | 是 |
| buttonText | 按钮文字 | `String` | - | 是 |
| buttonType | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | - | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| submit | 按钮点击事件回调 | - |
### Slot
| Name | Description |
|-----------|-----------|
| tip | 提示文案中的额外操作和说明 |
docs/markdown/en-US/swipe.md
+62
View File
@@ -0,0 +1,62 @@
## Swipe
### Install
``` javascript
import { Swipe, SwipeItem } from 'vant';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
### Usage
#### Basic Usage
Use `autoplay` prop to set autoplay interval
```html
<van-swipe :autoplay="3000">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
```
#### Image Lazyload
Use [Lazyload](#/zh-CN/component/lazyload) component to lazyload image
```html
<van-swipe>
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
```
```javascript
export default {
data() {
return {
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
}
}
}
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| autoplay | Autoplay interval (ms) | `Number` | - | - |
| duration | Animation duration (ms) | `Number` | `500` | - |
| showIndicators | Whether to show indocators | `Boolean` | `true` | - |
| initialSwipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | Triggered when current swipe change | index: index of current swipe |
docs/markdown/en-US/switch-cell.md
+64
View File
@@ -0,0 +1,64 @@
## SwitchCell
`SwitchCell` component is an encapsulation of `Switch` and `Cell`.
### Install
``` javascript
import { SwitchCell } from 'vant';
Vue.component(SwitchCell.name, SwitchCell);
```
### Usage
#### Basic Usage
```html
<van-cell-group>
<van-switch-cell v-model="checked" title="Title" />
</van-cell-group>
```
```javascript
export default {
data() {
return {
checked: true
}
}
}
```
#### Disabled
use `disabled` property to disable the component
```html
<van-cell-group>
<van-switch-cell v-model="checked" disabled title="Title" />
</van-cell-group>
```
#### Loading
use `loading` property to keep component in loading state
```html
<van-cell-group>
<van-switch-cell v-model="checked" loading title="Title" />
</van-cell-group>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | on-off state of the switch | `Boolean` | - | - |
| title | the leftside title | `String` | `''` | - |
| loading | whether the component is in loading state | `Boolean` | `false` | - |
| disabled | whether to disable the component | `Boolean` | `false` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | triggered when the on-off state is changed | checked: switch is on or not |
docs/markdown/en-US/switch.md
+80
View File
@@ -0,0 +1,80 @@
## Switch
### Install
``` javascript
import { Switch } from 'vant';
Vue.component(Switch.name, Switch);
```
### Usage
#### Basic Usage
```html
<van-switch v-model="checked" />
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
#### Disabled
```html
<van-switch v-model="checked" disabled />
```
#### Loading
```html
<van-switch v-model="checked" loading />
```
#### Advanced usage
```html
<van-switch :value="checked" @input="onInput" />
```
```js
export default {
data() {
return {
checked: true
};
},
methods: {
onInput(checked) {
Dialog.confirm({
title: 'Confirm',
message: 'Are you sure to toggle switch?'
}).then(() => {
this.checked = checked;
});
}
}
};
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Check status of Switch | `Boolean` | `false` | - |
| loading | Whether to show loading icon | `Boolean` | `false` | - |
| disabled | Disable switch | `Boolean` | `false` | - |
### Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when check status changed | checked: is switch checked |
docs/markdown/en-US/tab.md
+125
View File
@@ -0,0 +1,125 @@
## Tabs
### Install
``` javascript
import { Tab, Tabs } from 'vant';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
```
### Usage
#### Basic Usage
By default, the first tab is actived. You can set `active` attribute on `van-tabs` to active specified tab.
```html
<van-tabs :active="active">
<van-tab v-for="index in 4" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
</van-tabs>
```
```js
export default {
data() {
return {
active: 2
};
}
}
```
#### Swipe Tabs
By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
```html
<van-tabs>
<van-tab v-for="index in 8" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
</van-tabs>
```
#### Disabled Tab
You can set `disabled` attribute on the corresponding `van-tab`.
```html
<van-tabs @disabled="onClickDisabled">
<van-tab v-for="index in 4" :title="'tab' + index" :disabled="index === 2">
content of tab {{ index }}
</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
onClickDisabled() {
Toast('Disabled!');
}
}
};
```
#### Card Style
Tabs styled as cards.
```html
<van-tabs type="card">
<van-tab v-for="index in 4" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
</van-tabs>
```
#### Click Event
You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
```html
<van-tabs @click="handleTabClick">
<van-tab v-for="index in 4" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
handleTabClick(index) {
Toast(index);
}
}
};
```
### Tabs API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `card` |
| active | Index of active tab | `String` `Number` | `0` | - |
| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
### Tab API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Tab title | `String` | - | - |
| disabled | Whether disabled current tab | `Boolean` | `false` | - |
### Tabs Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| click | Triggered when click tab | index：index of current tab |
| disabled | Triggered when click disabled tab | index：index of current tab |
docs/markdown/en-US/tabbar.md
+83
View File
@@ -0,0 +1,83 @@
## Tabbar
### Install
``` javascript
import { Tabbar, TabbarItem } from 'vant';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabbarItem.name, TabbarItem);
```
### Usage
#### Basic Usage
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">Tab</van-tabbar-item>
<van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
<van-tabbar-item icon="records" info="5">Tab</van-tabbar-item>
<van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item>
</van-tabbar>
```
```javascript
export default {
data() {
return {
active: 0
}
}
}
```
#### Custom icon
Use `icon` slot to custom icon
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<span>Custom</span>
<img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
</van-tabbar-item>
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
<van-tabbar-item icon="records">Tab</van-tabbar-item>
</van-tabbar>
```
```javascript
export default {
data() {
return {
active: 0,
icon: {
normal: '//img.yzcdn.cn/1.png',
active: '//img.yzcdn.cn/2.png'
}
}
}
}
```
### Tabbar API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Index of current tab | `Number` | - | - |
### Tabbar Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | Triggered when change active tab | active: index of current tab |
### TabbarItem API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| icon | Icon name | `String` | - | Names from Icon Component |
| dot | Whether to show red dot | `Boolean` | - | - |
| info | Info message | `String` | - | - |
| url | Link | `String` | - | - |
| 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 | `String` | `false` | - |
docs/markdown/en-US/tag.md
+51
View File
@@ -0,0 +1,51 @@
## Tag
### Install
``` javascript
import { Tag } from 'vant';
Vue.component(Tag.name, Tag);
```
### Usage
#### Basic Usage
```html
<van-tag>Tag</van-tag>
<van-tag type="danger">Tag</van-tag>
<van-tag type="success">Tag</van-tag>
<van-tag type="primary">Tag</van-tag>
```
#### Plain style
```html
<van-tag plain>Tag</van-tag>
<van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="primary">Tag</van-tag>
<van-tag plain type="success">Tag</van-tag>
```
#### Mark style
```html
<van-tag mark>Tag</van-tag>
<van-tag mark type="danger">Tag</van-tag>
<van-tag mark type="primary">Tag</van-tag>
<van-tag mark type="success">Tag</van-tag>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `''`| `primary` `success` `danger` |
| plain | Whether to be plain style | `Boolean` | `false` | - |
| mark | Wtether to be mark style | `Boolean` | `false` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | Default slot |
docs/markdown/en-US/theme.md
+55
View File
@@ -0,0 +1,55 @@
## Custom Theme (In translation)
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
### 方案一. PostCSS 插件
在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
```javascript
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
// 引入组价对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
```
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
```javascript
module.exports = {
plugins: [
require('postcss-easy-import')({
extensions: ['pcss', 'css']
}),
require('postcss-theme-variables')({
vars: {
red: '#F60',
gray: '#CCC',
blue: '#03A9F4'
},
prefix: '$'
}),
require('precss')(),
require('postcss-calc')(),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
})
]
};
```
### 方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
```bash
# 克隆仓库
git clone git@github.com:youzan/vant.git
cd packages/vant-css
```
在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
```bash
npm run build
```
docs/markdown/en-US/toast.md
+73
View File
@@ -0,0 +1,73 @@
## Toast
### Install
```javascript
import { Toast } from 'vant';
```
### Usage
#### Text
```javascript
Toast('Some messages');
```
#### Loading
```javascript
Toast.loading({ mask: true });
```
#### Success/Fail
```javascript
Toast.success('Success');
Toast.fail('Fail');
```
#### Advanced Usage
```javascript
const toast = Toast.loading({
duration: 0, // continuous display toast
forbidClick: true, // forbid click background
message: '3 seconds'
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `${second} seconds`;
} else {
clearInterval(timer);
Toast.clear();
}
}, 1000);
```
### Methods
| Methods | Attribute | Return value | Description |
|-----------|-----------|-----------|-------------|
| Toast | `options | message` | toast instance | Show toast |
| Toast.loading | `options | message` | toast instance | Show loading toast |
| Toast.success | `options | message` | toast instance | Show success toast |
| Toast.fail | `options | message` | toast instance | Show fail toast |
| Toast.clear | - | `void` | Close |
### Options
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
| message | Message | `String` | `''` | - |
| position | Position | `String` | `middle` | `top` `bottom` |
| mask | Whether to show mask | `Boolean` | `false` | - |
| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |
docs/markdown/en-US/tree-select.md
+89
View File
@@ -0,0 +1,89 @@
## TreeSelect
### Install
``` javascript
import { TreeSelect } from 'vant';
Vue.component(TreeSelect.name, TreeSelect);
```
### Usage
#### Basic Usage
```html
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@navclick="onNavClick"
@itemclick="onItemClick"
/>
```
```javascript
export default {
data() {
return {
items: items,
// the index of parent item
mainActiveIndex: 0,
// the id of selected item
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
this.activeId = data.id;
}
}
}
```
### API
#### Properties
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` | - |
| mainActiveIndex | The index of selected parent node | `Number` | `0` | - |
| activeId | Id of selected item | `Number` | `0` | - |
#### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| navclick | triggered when parent node is selected | index: index of selected parent |
| itemclick | triggered when item is selected | data: selected item |
### Data Structure
`items` should be an array contains specified tree objects.
In every tree object, `text` property defines the name, `id` stands for the unique key while the `children` contains sub-tree objects.
```javascript
[
{
// name of the parent node
text: 'All Cities',
// leaves of this parent node
children: [
{
// name of the leaf node
text: 'Washington',
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
id: 1002
},
{
// name of the leaf node
text: 'Baltimore',
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
id: 1001
}
]
}
]
```
docs/markdown/en-US/uploader.md
+45
View File
@@ -0,0 +1,45 @@
## Uploader
### Install
``` javascript
import { Uploader } from 'vant';
Vue.component(Uploader.name, Uploader);
```
### Usage
#### Basic Usage
```html
<div class="uploader-container">
<van-uploader :afterRead="logContent">
<van-icon name="photograph"></van-icon>
</van-uploader>
</div>
```
```javascript
export default {
methods: {
logContent(file) {
console.log(file)
}
}
};
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| resultType | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
| disable | Whether to disable the upload, set to true during the image upload to prevent users from clicking this component to upload pictures | `Boolean` | `false` | - |
| beforeRead | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
| afterRead | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
### Slot
| name | Description |
|-----------|-----------|
| - | Custom icon |
docs/markdown/en-US/waterfall.md
+75
View File
@@ -0,0 +1,75 @@
## Waterfall
### Install
#### Global registration
```js
import Vue from 'vue';
import { Waterfall } from 'vant';
Vue.use(Waterfall);
```
#### Local registration
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
```js
import { Waterfall } from 'vant';
export default {
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
}
};
```
### Usage
#### Basic Usage
```html
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400">
<li v-for="item in list">{{ item }}</li>
</ul>
```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - | - |
| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - | - |
| waterfall-disabled | Key of the property to control disable status in instance | `String` | - | - |
| waterfall-offset | Offset to trigger callback function | `Number` | `300` | - |
docs/markdown/index.js
+116
View File
@@ -0,0 +1,116 @@
// This file is auto gererated by build/bin/build-entry.js
import progress from 'nprogress';
import 'nprogress/nprogress.css';
function wrapper(component) {
return function(r) {
progress.start();
component(r).then(() => {
progress.done();
}).catch(() => {
progress.done();
});
};
}
export default {
'zh-CN/actionsheet': wrapper(r => require.ensure([], () => r(require('./zh-CN/actionsheet.md')), 'zh-CN/actionsheet')),
'zh-CN/address-edit': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-edit.md')), 'zh-CN/address-edit')),
'zh-CN/address-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-list.md')), 'zh-CN/address-list')),
'zh-CN/area': wrapper(r => require.ensure([], () => r(require('./zh-CN/area.md')), 'zh-CN/area')),
'zh-CN/badge': wrapper(r => require.ensure([], () => r(require('./zh-CN/badge.md')), 'zh-CN/badge')),
'zh-CN/button': wrapper(r => require.ensure([], () => r(require('./zh-CN/button.md')), 'zh-CN/button')),
'zh-CN/card': wrapper(r => require.ensure([], () => r(require('./zh-CN/card.md')), 'zh-CN/card')),
'zh-CN/cell-swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell-swipe.md')), 'zh-CN/cell-swipe')),
'zh-CN/cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell.md')), 'zh-CN/cell')),
'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
'zh-CN/dialog': wrapper(r => require.ensure([], () => r(require('./zh-CN/dialog.md')), 'zh-CN/dialog')),
'zh-CN/field': wrapper(r => require.ensure([], () => r(require('./zh-CN/field.md')), 'zh-CN/field')),
'zh-CN/goods-action': wrapper(r => require.ensure([], () => r(require('./zh-CN/goods-action.md')), 'zh-CN/goods-action')),
'zh-CN/icon': wrapper(r => require.ensure([], () => r(require('./zh-CN/icon.md')), 'zh-CN/icon')),
'zh-CN/image-preview': wrapper(r => require.ensure([], () => r(require('./zh-CN/image-preview.md')), 'zh-CN/image-preview')),
'zh-CN/layout': wrapper(r => require.ensure([], () => r(require('./zh-CN/layout.md')), 'zh-CN/layout')),
'zh-CN/lazyload': wrapper(r => require.ensure([], () => r(require('./zh-CN/lazyload.md')), 'zh-CN/lazyload')),
'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
'zh-CN/nav-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/nav-bar.md')), 'zh-CN/nav-bar')),
'zh-CN/notice-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/notice-bar.md')), 'zh-CN/notice-bar')),
'zh-CN/number-keyboard': wrapper(r => require.ensure([], () => r(require('./zh-CN/number-keyboard.md')), 'zh-CN/number-keyboard')),
'zh-CN/panel': wrapper(r => require.ensure([], () => r(require('./zh-CN/panel.md')), 'zh-CN/panel')),
'zh-CN/password-input': wrapper(r => require.ensure([], () => r(require('./zh-CN/password-input.md')), 'zh-CN/password-input')),
'zh-CN/picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/picker.md')), 'zh-CN/picker')),
'zh-CN/popup': wrapper(r => require.ensure([], () => r(require('./zh-CN/popup.md')), 'zh-CN/popup')),
'zh-CN/progress': wrapper(r => require.ensure([], () => r(require('./zh-CN/progress.md')), 'zh-CN/progress')),
'zh-CN/pull-refresh': wrapper(r => require.ensure([], () => r(require('./zh-CN/pull-refresh.md')), 'zh-CN/pull-refresh')),
'zh-CN/quickstart': wrapper(r => require.ensure([], () => r(require('./zh-CN/quickstart.md')), 'zh-CN/quickstart')),
'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
'zh-CN/stepper': wrapper(r => require.ensure([], () => r(require('./zh-CN/stepper.md')), 'zh-CN/stepper')),
'zh-CN/steps': wrapper(r => require.ensure([], () => r(require('./zh-CN/steps.md')), 'zh-CN/steps')),
'zh-CN/submit-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/submit-bar.md')), 'zh-CN/submit-bar')),
'zh-CN/swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/swipe.md')), 'zh-CN/swipe')),
'zh-CN/switch-cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch-cell.md')), 'zh-CN/switch-cell')),
'zh-CN/switch': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch.md')), 'zh-CN/switch')),
'zh-CN/tab': wrapper(r => require.ensure([], () => r(require('./zh-CN/tab.md')), 'zh-CN/tab')),
'zh-CN/tabbar': wrapper(r => require.ensure([], () => r(require('./zh-CN/tabbar.md')), 'zh-CN/tabbar')),
'zh-CN/tag': wrapper(r => require.ensure([], () => r(require('./zh-CN/tag.md')), 'zh-CN/tag')),
'zh-CN/theme': wrapper(r => require.ensure([], () => r(require('./zh-CN/theme.md')), 'zh-CN/theme')),
'zh-CN/toast': wrapper(r => require.ensure([], () => r(require('./zh-CN/toast.md')), 'zh-CN/toast')),
'zh-CN/tree-select': wrapper(r => require.ensure([], () => r(require('./zh-CN/tree-select.md')), 'zh-CN/tree-select')),
'zh-CN/uploader': wrapper(r => require.ensure([], () => r(require('./zh-CN/uploader.md')), 'zh-CN/uploader')),
'zh-CN/waterfall': wrapper(r => require.ensure([], () => r(require('./zh-CN/waterfall.md')), 'zh-CN/waterfall')),
'en-US/actionsheet': wrapper(r => require.ensure([], () => r(require('./en-US/actionsheet.md')), 'en-US/actionsheet')),
'en-US/address-edit': wrapper(r => require.ensure([], () => r(require('./en-US/address-edit.md')), 'en-US/address-edit')),
'en-US/address-list': wrapper(r => require.ensure([], () => r(require('./en-US/address-list.md')), 'en-US/address-list')),
'en-US/area': wrapper(r => require.ensure([], () => r(require('./en-US/area.md')), 'en-US/area')),
'en-US/badge': wrapper(r => require.ensure([], () => r(require('./en-US/badge.md')), 'en-US/badge')),
'en-US/button': wrapper(r => require.ensure([], () => r(require('./en-US/button.md')), 'en-US/button')),
'en-US/card': wrapper(r => require.ensure([], () => r(require('./en-US/card.md')), 'en-US/card')),
'en-US/cell-swipe': wrapper(r => require.ensure([], () => r(require('./en-US/cell-swipe.md')), 'en-US/cell-swipe')),
'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),
'en-US/dialog': wrapper(r => require.ensure([], () => r(require('./en-US/dialog.md')), 'en-US/dialog')),
'en-US/field': wrapper(r => require.ensure([], () => r(require('./en-US/field.md')), 'en-US/field')),
'en-US/goods-action': wrapper(r => require.ensure([], () => r(require('./en-US/goods-action.md')), 'en-US/goods-action')),
'en-US/icon': wrapper(r => require.ensure([], () => r(require('./en-US/icon.md')), 'en-US/icon')),
'en-US/image-preview': wrapper(r => require.ensure([], () => r(require('./en-US/image-preview.md')), 'en-US/image-preview')),
'en-US/layout': wrapper(r => require.ensure([], () => r(require('./en-US/layout.md')), 'en-US/layout')),
'en-US/lazyload': wrapper(r => require.ensure([], () => r(require('./en-US/lazyload.md')), 'en-US/lazyload')),
'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
'en-US/nav-bar': wrapper(r => require.ensure([], () => r(require('./en-US/nav-bar.md')), 'en-US/nav-bar')),
'en-US/notice-bar': wrapper(r => require.ensure([], () => r(require('./en-US/notice-bar.md')), 'en-US/notice-bar')),
'en-US/number-keyboard': wrapper(r => require.ensure([], () => r(require('./en-US/number-keyboard.md')), 'en-US/number-keyboard')),
'en-US/panel': wrapper(r => require.ensure([], () => r(require('./en-US/panel.md')), 'en-US/panel')),
'en-US/password-input': wrapper(r => require.ensure([], () => r(require('./en-US/password-input.md')), 'en-US/password-input')),
'en-US/picker': wrapper(r => require.ensure([], () => r(require('./en-US/picker.md')), 'en-US/picker')),
'en-US/popup': wrapper(r => require.ensure([], () => r(require('./en-US/popup.md')), 'en-US/popup')),
'en-US/progress': wrapper(r => require.ensure([], () => r(require('./en-US/progress.md')), 'en-US/progress')),
'en-US/pull-refresh': wrapper(r => require.ensure([], () => r(require('./en-US/pull-refresh.md')), 'en-US/pull-refresh')),
'en-US/quickstart': wrapper(r => require.ensure([], () => r(require('./en-US/quickstart.md')), 'en-US/quickstart')),
'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
'en-US/stepper': wrapper(r => require.ensure([], () => r(require('./en-US/stepper.md')), 'en-US/stepper')),
'en-US/steps': wrapper(r => require.ensure([], () => r(require('./en-US/steps.md')), 'en-US/steps')),
'en-US/submit-bar': wrapper(r => require.ensure([], () => r(require('./en-US/submit-bar.md')), 'en-US/submit-bar')),
'en-US/swipe': wrapper(r => require.ensure([], () => r(require('./en-US/swipe.md')), 'en-US/swipe')),
'en-US/switch-cell': wrapper(r => require.ensure([], () => r(require('./en-US/switch-cell.md')), 'en-US/switch-cell')),
'en-US/switch': wrapper(r => require.ensure([], () => r(require('./en-US/switch.md')), 'en-US/switch')),
'en-US/tab': wrapper(r => require.ensure([], () => r(require('./en-US/tab.md')), 'en-US/tab')),
'en-US/tabbar': wrapper(r => require.ensure([], () => r(require('./en-US/tabbar.md')), 'en-US/tabbar')),
'en-US/tag': wrapper(r => require.ensure([], () => r(require('./en-US/tag.md')), 'en-US/tag')),
'en-US/theme': wrapper(r => require.ensure([], () => r(require('./en-US/theme.md')), 'en-US/theme')),
'en-US/toast': wrapper(r => require.ensure([], () => r(require('./en-US/toast.md')), 'en-US/toast')),
'en-US/tree-select': wrapper(r => require.ensure([], () => r(require('./en-US/tree-select.md')), 'en-US/tree-select')),
'en-US/uploader': wrapper(r => require.ensure([], () => r(require('./en-US/uploader.md')), 'en-US/uploader')),
'en-US/waterfall': wrapper(r => require.ensure([], () => r(require('./en-US/waterfall.md')), 'en-US/waterfall'))
};
docs/markdown/zh-CN/actionsheet.md
+86
View File
@@ -0,0 +1,86 @@
## Actionsheet 行动按钮
### 使用指南
``` javascript
import { Actionsheet } from 'vant';
Vue.component(Actionsheet.name, Actionsheet);
```
### 代码演示
#### 基础用法
需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
```html
<van-actionsheet v-model="show" :actions="actions" />
```
```javascript
export default {
data() {
return {
show: false,
actions: [
{
name: '选项',
callback: this.onClick
},
{
name: '信用卡支付'
},
{
name: '选项',
loading: true
}
]
};
},
methods: {
onClick(item) {
Toast(item.name);
}
}
}
```
#### 带取消按钮的 Actionsheet
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
```html
<van-actionsheet v-model="show" :actions="actions" cancelText="取消" />
```
#### 带标题的 Actionsheet
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
```html
<van-actionsheet v-model="show" title="支持以下配送方式">
<p>一些内容</p>
</van-actionsheet>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | - |
| title | 标题 | `String` | - | - |
| cancelText | 取消按钮文案 | `String` | - | - |
| overlay | 是否显示遮罩 | `Boolean` | - | - |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
### actions
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 |
|-----------|-----------|
| name | 标题 |
| subname | 二级标题 |
| className | 为对应列添加特殊的`class` |
| loading | 是否是`loading`状态 |
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
docs/markdown/zh-CN/address-edit.md
+102
View File
@@ -0,0 +1,102 @@
## AddressEdit 地址编辑
### 使用指南
``` javascript
import { AddressEdit } from 'vant';
Vue.component(AddressEdit.name, AddressEdit);
```
### 代码演示
#### 基础用法
```html
<van-address-edit
:areaList="areaList"
:showPostal="true"
:showSetDefault="true"
:showSearchResult="true"
:searchResult="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
```
```javascript
export default {
data() {
return {
areaList,
searchResult: []
}
},
methods: {
onSave() {
Toast('save');
},
onDelete() {
Toast('delete');
},
onChangeDetail(val) {
if (val) {
this.searchResult = [{
name: '黄龙万科中心',
address: '杭州市西湖区'
}];
} else {
this.searchResult = [];
}
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| areaList | 地区列表 | `Object` | - | - |
| addressInfo | 收货人信息 | `Object` | `{}` | - |
| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
| addressText | "地址"文案前缀 | `String` | `收货` | - |
| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
### 数据格式
#### addressInfo 数据格式
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` |
| tel | 收货人手机号 | `String` |
| province | 省份 | `String` |
| city | 城市 | `String` |
| county | 区县 | `String` |
| address_detail | 详细地址 | `String` |
| area_code | 地区编码，通过省市区选择获取 | `String` |
| postal_code | 邮政编码 | `String` |
| is_default | 是否为默认地址 | `String` |
#### searchResult 数据格式
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| name | 地名 | `String` |
| address | 详细地址 | `String` |
#### 省市县列表数据格式
请参考 [Area](#/zh-CN/component/area) 组件。
docs/markdown/zh-CN/address-list.md
+80
View File
@@ -0,0 +1,80 @@
## AddressList 地址列表
### 使用指南
``` javascript
import { AddressList } from 'vant';
Vue.component(AddressList.name, AddressList);
```
### 代码演示
#### 基础用法
```html
<van-address-list
v-model="chosenAddressId"
:list="list"
@add="onAdd"
@edit="onEdit"
/>
```
```javascript
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
}
]
}
},
methods: {
onAdd() {
Toast('新增收货地址');
},
onEdit(item, index) {
Toast('编辑收货地址:' + index);
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中地址的 id | String | - | - |
| list | 地址列表 | Array | `[]` | - |
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
### 数据格式
#### 地址列表字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` |
| tel | 收货人手机号 | `String` |
| address | 收货地址 | `String` |
docs/markdown/zh-CN/area.md
+107
View File
@@ -0,0 +1,107 @@
## Area 省市县选择组件
### 使用指南
``` javascript
import { Area } from 'vant';
Vue.component(Area.name, Area);
```
### 代码演示
#### 基础用法
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节。
```html
<van-area :areaList="areaList" />
```
#### 选中省市县
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
```html
<van-area :areaList="areaList" value="110101" />
```
#### 配置显示列
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
```html
<van-area :areaList="areaList" :columnsNum="2" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| value | 当前选中的省市区`code` | `String` | - | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
| cancel | 点击取消按钮时 | - |
### 数据格式
#### 省市县列表数据格式
整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
`AreaList`具体格式如下：
```javascript
{
province_list: {
110000: '北京市',
120000: '天津市'
},
city_list: {
110100: '北京市',
110200: '县',
120100: '天津市',
120200: '县'
},
county_list: {
110101: '东城区',
110102: '西城区',
110105: '朝阳区',
110106: '丰台区'
120101: '和平区',
120102: '河东区',
120103: '河西区',
120104: '南开区',
120105: '河北区',
// ....
}
}
```
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
#### 点击完成时返回的数据格式
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
```javascript
[{
code: '110000',
name: '北京市'
}, {
code: '110100',
name: '北京市'
},{
code: '110101',
name: '东城区'
}]
```
docs/markdown/zh-CN/badge.md
+51
View File
@@ -0,0 +1,51 @@
## Badge 徽章
### 使用指南
``` javascript
import { Badge } from 'vant';
Vue.component(Badge.name, Badge);
```
### 代码演示
#### 基础用法
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
```html
<van-badge-group :active-key="activeKey">
<van-badge title="热销榜" @click="onClick"></van-badge>
<van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
<van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
<van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
</van-badge-group>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
}
};
```
### BadgeGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### Badge API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String` | `''` | - |
| url | 跳转链接 | `String` | - | - |
docs/markdown/zh-CN/button.md
+84
View File
@@ -0,0 +1,84 @@
## Button 按钮
### 使用指南
``` javascript
import { Button } from 'vant';
Vue.component(Button.name, Button);
```
### 代码演示
#### 按钮类型
支持`default`、`primary`、`danger`三种类型，默认为`default`
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
```
#### 按钮尺寸
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
```html
<van-button size="large">Large</van-button>
<van-button size="normal">Normal</van-button>
<van-button size="small">Small</van-button>
<van-button size="mini">Mini</van-button>
```
#### 禁用状态
通过`disabled`属性来禁用按钮，此时按钮不可点击
```html
<van-button disabled>Diabled</van-button>
```
#### 加载状态
```html
<van-button loading></van-button>
<van-button loading type="primary"></van-button>
```
#### 自定义按钮标签
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
```html
<van-button tag="a" href="https://www.youzan.com" target="_blank">
按钮
</van-button>
```
#### 页面底部操作按钮
```html
<van-button type="primary" bottom-action>按钮</van-button>
<van-row>
<van-col span="12">
<van-button bottom-action>按钮</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottom-action>按钮</van-button>
</van-col>
</van-row>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
| nativeType | 按钮类型（原生） | `String` | `''` | - |
| diabled | 是否禁用 | `Boolean` | `false` | - |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
| block | 是否为块级元素 | `Boolean` | `false` | - |
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
docs/markdown/zh-CN/card.md
+61
View File
@@ -0,0 +1,61 @@
## Card 卡片
### 使用指南
``` javascript
import { Card } from 'vant';
Vue.component(Card.name, Card);
```
### 代码演示
#### 基础用法
```html
<van-card
title="标题"
desc="描述"
num="2"
price="2.00"
:thumb="imageURL"
/>
```
#### 高级用法
可以通过具名`slot`添加定制内容
```html
<van-card
title="标题"
desc="描述"
num="2"
price="2.00"
:thumb="imageURL"
>
<div slot="footer">
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</div>
</van-card>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | `String` | - | - |
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| num | 商品数量 | `String | Number` | - | - |
| price | 商品价格 | `String | Number` | - | - |
| centered | 内容是否垂直居中 | `String` | `false` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| desc | 自定义描述 |
| tags | 自定义 tags |
| thumb | 自定义 thumb |
| footer | 自定义 footer |
docs/markdown/zh-CN/cell-swipe.md
+37
View File
@@ -0,0 +1,37 @@
## CellSwipe 滑动单元格
### 使用指南
``` javascript
import { CellSwipe } from 'vant';
Vue.component(CellSwipe.name, CellSwipe);
```
### 代码演示
#### 基础用法
```html
<van-cell-swipe :right-width="65" :left-width="65">
<span slot="left">选择</span>
<van-cell-group>
<van-cell title="单元格" value="内容" />
</van-cell-group>
<span slot="right">删除</span>
</van-cell-swipe>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义显示内容 |
| left | 左侧滑动内容 |
| right | 右侧滑动内容 |
docs/markdown/zh-CN/cell.md
+94
View File
@@ -0,0 +1,94 @@
## Cell 单元格
### 使用指南
``` javascript
import { Cell, CellGroup } from 'vant';
Vue.component(Cell.name, Cell);
Vue.component(CellGroup.name, CellGroup);
```
### 代码演示
#### 基础用法
将`van-cell-group`组件看成一个容器即可
```html
<van-cell-group>
<van-cell title="单元格" value="内容"></van-cell>
<van-cell title="单元格" value="内容" label="描述信息"></van-cell>
</van-cell-group>
```
#### 只设置value
只设置`value`时会向左对齐
```html
<van-cell-group>
<van-cell value="内容"></van-cell>
</van-cell-group>
```
#### 展示图标
通过`icon`属性在标题左侧展示图标
```html
<van-cell-group>
<van-cell title="单元格" icon="location"></van-cell>
</van-cell-group>
```
#### 展示箭头
传入`isLink`属性则会在右侧显示箭头
```html
<van-cell-group>
<van-cell title="单元格" is-link></van-cell>
<van-cell title="单元格" is-link value="内容"></van-cell>
</van-cell-group>
```
#### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
```html
<van-cell-group>
<van-cell value="内容" icon="shop" is-link>
<template slot="title">
<span class="van-cell-text">单元格</span>
<van-tag type="danger">标签</van-tag>
</template>
</van-cell>
<van-cell title="单元格" icon="location" is-link></van-cell>
<van-cell title="单元格">
<template slot="right-icon">
<van-icon name="search" class="van-cell__right-icon"></van-icon>
</template>
</van-cell>
</van-cell-group>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 左侧图标 | `String` | - | - |
| title | 左侧标题 | `String` | - | - |
| value | 右侧内容 | `String` | - | - |
| label | 标题下方的描述信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义显示内容 |
| icon | 自定义`icon` |
| title | 自定义`title` |
| right-icon | 自定义右侧按钮，默认是`arrow` |
docs/markdown/zh-CN/changelog-generated.md
+806
View File
@@ -0,0 +1,806 @@
## 更新日志
## [v0.10.9](https://github.com/youzan/vant/tree/v0.10.9) (2017-11-15)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.8...v0.10.9)
**Breaking changes**
- 能多加些加载图标就好了 [\#202](https://github.com/youzan/vant/issues/202)
**Issue**
- waterfall 瀑布流无限加载问题 [\#313](https://github.com/youzan/vant/issues/313)
- search 组件 样式错误 [\#311](https://github.com/youzan/vant/issues/311)
- Tabbar导航 和router-link 结合 报错 ？？？ [\#302](https://github.com/youzan/vant/issues/302)
- 能否给轻提示加个遮罩层做loading的时候会用到 [\#285](https://github.com/youzan/vant/issues/285)
**Improvements**
- \[new feature\]: add new icons [\#315](https://github.com/youzan/vant/pull/315) ([cookfront](https://github.com/cookfront))
- \[bugfix\] Search box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.8](https://github.com/youzan/vant/tree/v0.10.8) (2017-11-11)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.7...v0.10.8)
**Issue**
- 直接引入CDN使用vant, area组件不可用 [\#304](https://github.com/youzan/vant/issues/304)
- Area JSON [\#303](https://github.com/youzan/vant/issues/303)
- 最新版在windows下build会报错，还是路径分隔符的问题。。 [\#298](https://github.com/youzan/vant/issues/298)
- 开发模式下使用轮播组件懒加载方式 页面至少等待3S 才会正确显示swipe高度 [\#295](https://github.com/youzan/vant/issues/295)
- 按钮的禁止后，如何开启 [\#293](https://github.com/youzan/vant/issues/293)
- Area - 省市区选择建议 [\#289](https://github.com/youzan/vant/issues/289)
- ImagePreview 图片预览 多张图片时，点击中间的某一张，放大后仍然从第一张开始 [\#271](https://github.com/youzan/vant/issues/271)
**Improvements**
- \[Doc\]: add tab english docs [\#308](https://github.com/youzan/vant/pull/308) ([cookfront](https://github.com/cookfront))
- \[Doc\] add toast english document [\#307](https://github.com/youzan/vant/pull/307) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] update document header style [\#306](https://github.com/youzan/vant/pull/306) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Tab support vue-router [\#305](https://github.com/youzan/vant/pull/305) ([chenjiahan](https://github.com/chenjiahan))
- 修复 windows 平台 run dist 出现异常的问题 [\#301](https://github.com/youzan/vant/pull/301) ([lkiarest](https://github.com/lkiarest))
- \[new feature\] progress add showPivot prop [\#300](https://github.com/youzan/vant/pull/300) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] add spinner type loading [\#297](https://github.com/youzan/vant/pull/297) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] toast add mask option [\#296](https://github.com/youzan/vant/pull/296) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Stepper add plus & minus event [\#294](https://github.com/youzan/vant/pull/294) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.7](https://github.com/youzan/vant/tree/v0.10.7) (2017-11-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.6...v0.10.7)
**Bug Fixes**
- van-tab组件用v-for动态生成，无法左右滑动？ [\#267](https://github.com/youzan/vant/issues/267)
**Issue**
- stepper 当外界修改数值时，不触发change事件。 [\#290](https://github.com/youzan/vant/issues/290)
- Stepper 步进器 max问题 [\#288](https://github.com/youzan/vant/issues/288)
- Dialog 弹出框修改confirmButtonText问题 [\#277](https://github.com/youzan/vant/issues/277)
**Improvements**
- \[new feature\] normalize size of all icons [\#292](https://github.com/youzan/vant/pull/292) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] 修复sku弹层锁定滚动 [\#291](https://github.com/youzan/vant/pull/291) ([w91](https://github.com/w91))
- \[bugfix\] Steps style error when has more than 4 items [\#287](https://github.com/youzan/vant/pull/287) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] ImagePreview support startPosition [\#286](https://github.com/youzan/vant/pull/286) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.6](https://github.com/youzan/vant/tree/v0.10.6) (2017-11-06)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.5...v0.10.6)
**Bug Fixes**
- tabbar自定义的情况下 无法生成info 是否考虑添加这个功能 [\#249](https://github.com/youzan/vant/issues/249)
**Issue**
- waterfall滚动到底部时无限触发加载 [\#283](https://github.com/youzan/vant/issues/283)
- swipe [\#282](https://github.com/youzan/vant/issues/282)
- waterfall瀑布流拉到最底之后无限触发事件 [\#281](https://github.com/youzan/vant/issues/281)
- Card点击事件无法触发 [\#276](https://github.com/youzan/vant/issues/276)
- Vant 下载 [\#275](https://github.com/youzan/vant/issues/275)
- 使用steps步骤条出现最后一个离得很远的问题 [\#273](https://github.com/youzan/vant/issues/273)
- 请问有DEMO首页的手风琴组件吗？ [\#272](https://github.com/youzan/vant/issues/272)
- van-swipe组件添加了一个class就无法触摸滚动了 [\#270](https://github.com/youzan/vant/issues/270)
- Cell的url 只支持 mode: history的形式 [\#266](https://github.com/youzan/vant/issues/266)
- tabs组件文档有误 [\#264](https://github.com/youzan/vant/issues/264)
**Improvements**
- \[bug fix\]: tabs dynamic generate bug [\#284](https://github.com/youzan/vant/pull/284) ([cookfront](https://github.com/cookfront))
- \[bugfix\] NoticeBar text disappeared when page back [\#280](https://github.com/youzan/vant/pull/280) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Swipe add 'initialSwipe' prop [\#279](https://github.com/youzan/vant/pull/279) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] Dialog should reset button text when showed [\#278](https://github.com/youzan/vant/pull/278) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] update document site title [\#274](https://github.com/youzan/vant/pull/274) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.5](https://github.com/youzan/vant/tree/v0.10.5) (2017-10-30)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.4...v0.10.5)
**Breaking changes**
- Please give an english translation for the API [\#156](https://github.com/youzan/vant/issues/156)
- 以前的产品 橱窗组件怎么没有了？ [\#119](https://github.com/youzan/vant/issues/119)
**Issue**
- van-col里嵌套动态img问题 [\#261](https://github.com/youzan/vant/issues/261)
- 这是一条咨询， 非技术issues [\#259](https://github.com/youzan/vant/issues/259)
- 图标库不方便管理，建议开源字体图标库 [\#255](https://github.com/youzan/vant/issues/255)
**Improvements**
- \[bugfix\] Tabbar cann't display info when use icon slot [\#269](https://github.com/youzan/vant/pull/269) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Cell support vue-router target route [\#268](https://github.com/youzan/vant/pull/268) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] uploader style error [\#265](https://github.com/youzan/vant/pull/265) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] change document site path to /zanui/vant [\#262](https://github.com/youzan/vant/pull/262) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] english document of all action components [\#260](https://github.com/youzan/vant/pull/260) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.4](https://github.com/youzan/vant/tree/v0.10.4) (2017-10-26)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.3...v0.10.4)
**Breaking changes**
- 业务组件 - 购物车组件 [\#209](https://github.com/youzan/vant/issues/209)
**Issue**
- 希望直接支持按需引入组件 [\#257](https://github.com/youzan/vant/issues/257)
- 请问支持自定义主题色或者有支持计划么？ [\#256](https://github.com/youzan/vant/issues/256)
- 希望能隐藏地址列表组件的checkbox [\#250](https://github.com/youzan/vant/issues/250)
- Coupon 优惠券选择器 顶部兑换模块的 显隐开关 [\#241](https://github.com/youzan/vant/issues/241)
- Tabbar 是否能增加Badge。 [\#240](https://github.com/youzan/vant/issues/240)
- Toast 轻提示建议增加上中下位置的配置 [\#233](https://github.com/youzan/vant/issues/233)
- van-search 的@search事件无法捕获value ，老版本以前是可以的 [\#232](https://github.com/youzan/vant/issues/232)
- Dialog蒙层样式没能正常加载 [\#229](https://github.com/youzan/vant/issues/229)
**Improvements**
- \[bugfix\] Swipe width calc error [\#258](https://github.com/youzan/vant/pull/258) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Notice bar support more props [\#254](https://github.com/youzan/vant/pull/254) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Icon: 增加新 icon 图标 [\#253](https://github.com/youzan/vant/pull/253) ([pangxie1991](https://github.com/pangxie1991))
- \[bug fix\] Doc: Update waterfall.md [\#252](https://github.com/youzan/vant/pull/252) ([liangxiaoxin](https://github.com/liangxiaoxin))
- \[Doc\] add custom theme document [\#251](https://github.com/youzan/vant/pull/251) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] add click feedback of buttons in components [\#248](https://github.com/youzan/vant/pull/248) ([chenjiahan](https://github.com/chenjiahan))
- \[bug fix\] PullRefreash: when $parents.$el scrollable, pull refreash trigger error [\#247](https://github.com/youzan/vant/pull/247) ([GeoffZhu](https://github.com/GeoffZhu))
- \[bugfix\] CouponList always show empty info [\#246](https://github.com/youzan/vant/pull/246) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.3](https://github.com/youzan/vant/tree/v0.10.3) (2017-10-25)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.2...v0.10.3)
**Issue**
- 能否把DEMO示例的代码全部放出？ [\#235](https://github.com/youzan/vant/issues/235)
- 能否增加一个下拉菜单及上拉加载更多 [\#234](https://github.com/youzan/vant/issues/234)
- ImagePreview 图片预览 组件使用后，点击图片无法显示大图 [\#225](https://github.com/youzan/vant/issues/225)
- 能否提供cdn方式呢 [\#223](https://github.com/youzan/vant/issues/223)
- 请问如何跟手淘lib-flexible rem布局结合 [\#222](https://github.com/youzan/vant/issues/222)
**Improvements**
- \[new feature\] Tabbar add 'info' prop [\#245](https://github.com/youzan/vant/pull/245) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Toast support `position` prop [\#244](https://github.com/youzan/vant/pull/244) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] Coupon add 'showExchangeBar' prop && add empty style [\#243](https://github.com/youzan/vant/pull/243) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] add goods demo [\#242](https://github.com/youzan/vant/pull/242) ([chenjiahan](https://github.com/chenjiahan))
- \[bug fix\] Pull-refresh: 'touchcancel '拼写问题 [\#239](https://github.com/youzan/vant/pull/239) ([GeoffZhu](https://github.com/GeoffZhu))
- \[bug fix\]: 高阶组件英文文档修改 [\#238](https://github.com/youzan/vant/pull/238) ([Tinysymphony](https://github.com/Tinysymphony))
- \[Doc\] add demo pages [\#237](https://github.com/youzan/vant/pull/237) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] add Advanced components english document [\#236](https://github.com/youzan/vant/pull/236) ([Tinysymphony](https://github.com/Tinysymphony))
- \[bugfix\] popup style missing when build style entry [\#231](https://github.com/youzan/vant/pull/231) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] Address & Contact list style [\#230](https://github.com/youzan/vant/pull/230) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] add more badges in README.md [\#228](https://github.com/youzan/vant/pull/228) ([chenjiahan](https://github.com/chenjiahan))
- update README.md [\#227](https://github.com/youzan/vant/pull/227) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.2](https://github.com/youzan/vant/tree/v0.10.2) (2017-10-20)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.1...v0.10.2)
**Bug Fixes**
- 引入TreeSelect组件后报icon没找到 [\#215](https://github.com/youzan/vant/issues/215)
- Checkbox 复选框组件bug [\#213](https://github.com/youzan/vant/issues/213)
**Issue**
- 如何动态赋值 [\#221](https://github.com/youzan/vant/issues/221)
- 省市区的json文件能放出来吗？ [\#219](https://github.com/youzan/vant/issues/219)
- 标签页 能提供纵向布局吗？现在只有横向布局 能灵活配置就好了 [\#207](https://github.com/youzan/vant/issues/207)
- 能不能考虑增加一个 “选择图片” 的功能 [\#186](https://github.com/youzan/vant/issues/186)
- Please open source examples code [\#169](https://github.com/youzan/vant/issues/169)
**Improvements**
- \[new feature\] Sku: sku-group slot add event bus [\#226](https://github.com/youzan/vant/pull/226) ([w91](https://github.com/w91))
- \[bugfix\] Optimize component dependency analyze when build style entry [\#224](https://github.com/youzan/vant/pull/224) ([chenjiahan](https://github.com/chenjiahan))
- \[Doc\] add some english documents [\#220](https://github.com/youzan/vant/pull/220) ([chenjiahan](https://github.com/chenjiahan))
## [v0.10.1](https://github.com/youzan/vant/tree/v0.10.1) (2017-10-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.10.0...v0.10.1)
**Breaking changes**
- tabs标签个数建议 [\#203](https://github.com/youzan/vant/issues/203)
- 轮播高度自适应 [\#180](https://github.com/youzan/vant/issues/180)
- 能添加个底部tabbar吗 [\#157](https://github.com/youzan/vant/issues/157)
- \[bugfix\] Popup modal display error [\#211](https://github.com/youzan/vant/pull/211) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- \[bugfix\] Swipe should clear autoplay timer when destroyed [\#218](https://github.com/youzan/vant/pull/218) ([chenjiahan](https://github.com/chenjiahan))
- \[bug fix\]: fix tab component when has a lot of text, show ellipsis [\#217](https://github.com/youzan/vant/pull/217) ([cookfront](https://github.com/cookfront))
- \[bugfix\] TreeSelect dependency path error [\#216](https://github.com/youzan/vant/pull/216) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] Checkbox border render error in weixin browser [\#214](https://github.com/youzan/vant/pull/214) ([chenjiahan](https://github.com/chenjiahan))
- \\[bugfix\\] Popup modal display error [\#211](https://github.com/youzan/vant/pull/211) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- 如何增加自定义Icon [\#177](https://github.com/youzan/vant/issues/177)
- Swipe 组件不显示 [\#174](https://github.com/youzan/vant/issues/174)
**Improvements**
- \[new feature\] Docs: contribute.md 移动至 .github 下 [\#212](https://github.com/youzan/vant/pull/212) ([pangxie1991](https://github.com/pangxie1991))
- \[bug fix\] Search: 修复无 reset 下展示 [\#210](https://github.com/youzan/vant/pull/210) ([pangxie1991](https://github.com/pangxie1991))
- \[new feature\]: tabs component add swipeThreshold prop [\#206](https://github.com/youzan/vant/pull/206) ([cookfront](https://github.com/cookfront))
## [v0.10.0](https://github.com/youzan/vant/tree/v0.10.0) (2017-10-13)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.12...v0.10.0)
**Breaking changes**
- \[breaking change\] remove reset.css dependencies [\#196](https://github.com/youzan/vant/pull/196) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- 滑动单元格问题 [\#195](https://github.com/youzan/vant/issues/195)
- 样式初始化中的box-sizing [\#192](https://github.com/youzan/vant/issues/192)
- 移动端如何自适应宽度？ [\#190](https://github.com/youzan/vant/issues/190)
- file组件 里 textarea 获取不了scrollHeight [\#181](https://github.com/youzan/vant/issues/181)
**Improvements**
- \[bugfix\] delete unnecessary style in sku [\#205](https://github.com/youzan/vant/pull/205) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] add Tabbar component [\#204](https://github.com/youzan/vant/pull/204) ([chenjiahan](https://github.com/chenjiahan))
- \[new feature\] ImagePreview reconstruct [\#201](https://github.com/youzan/vant/pull/201) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] Swipe shouid re initialize when item changes [\#200](https://github.com/youzan/vant/pull/200) ([chenjiahan](https://github.com/chenjiahan))
- \[Document\] add form components english document [\#199](https://github.com/youzan/vant/pull/199) ([chenjiahan](https://github.com/chenjiahan))
- \[breaking change\] Search: 修改原有结构 [\#198](https://github.com/youzan/vant/pull/198) ([pangxie1991](https://github.com/pangxie1991))
- \[breaking change\] reconstruct Swipe component [\#194](https://github.com/youzan/vant/pull/194) ([chenjiahan](https://github.com/chenjiahan))
## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12) (2017-10-11)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.11...v0.9.12)
**Issue**
- 使用 babel-plugin-import 引入组件报错 [\#193](https://github.com/youzan/vant/issues/193)
- checkbox的change事件逻辑 [\#189](https://github.com/youzan/vant/issues/189)
- 全局引入后，AddressEdit使用报错 [\#183](https://github.com/youzan/vant/issues/183)
- \<i\>display: inline-block 有一些由字体大小造成的空白，使用calc（100%/3）后一行只有两个元素，第三个元素换行 [\#171](https://github.com/youzan/vant/issues/171)
**Improvements**
- \[bug fix\] Search: 优化显示 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11) (2017-10-11)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.10...v0.9.11)
**Bug Fixes**
- 在windows中执行npm run dev ， 然后访问页面会报错 [\#176](https://github.com/youzan/vant/issues/176)
- \[bugfix\]: textarea filed height incorrect when display none [\#188](https://github.com/youzan/vant/pull/188) ([chenjiahan](https://github.com/chenjiahan))
- \[bugfix\] AddressEdit correct name key [\#187](https://github.com/youzan/vant/pull/187) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- AddressList 中select事件无效 [\#184](https://github.com/youzan/vant/issues/184)
- vue打包时 area.json会被打包到app.js里 [\#179](https://github.com/youzan/vant/issues/179)
- 微信支付中使用Toast [\#178](https://github.com/youzan/vant/issues/178)
**Improvements**
- \[bug fix\] Docs: 支持在 windows 下进行编译 [\#185](https://github.com/youzan/vant/pull/185) ([pangxie1991](https://github.com/pangxie1991))
- \[new feature\] Docs: 增加 contribute 指南 [\#182](https://github.com/youzan/vant/pull/182) ([pangxie1991](https://github.com/pangxie1991))
- \[new feature\] Docs: waterfall 文档优化 [\#175](https://github.com/youzan/vant/pull/175) ([pangxie1991](https://github.com/pangxie1991))
## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10) (2017-10-09)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.9...v0.9.10)
**Breaking changes**
- add Contact components [\#160](https://github.com/youzan/vant/pull/160) ([chenjiahan](https://github.com/chenjiahan))
- Add AddressEdit component [\#147](https://github.com/youzan/vant/pull/147) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- MacOS下npm run dev报错 [\#152](https://github.com/youzan/vant/issues/152)
- mac 下 安装vant 全局引用，同时也引入饿了么的mint-ui，控制台报错了vant没有定义。。。。 [\#130](https://github.com/youzan/vant/issues/130)
- Sku商品购买组件，基础用法例子里，（安卓手机微信浏览器）输入input在上半屏幕里，会出现看不到输入框的位置。。。 [\#125](https://github.com/youzan/vant/issues/125)
**Issue**
- 项目是clone自饿了么的相关项目吗？LICENSE中的版权声明都没改 [\#165](https://github.com/youzan/vant/issues/165)
- toobar [\#164](https://github.com/youzan/vant/issues/164)
- gulp压缩vant-css出现的错误 [\#163](https://github.com/youzan/vant/issues/163)
- 有些组件直接拿出来就可以用，真的方便，希望下一步支持ssr（nuxt） rua! [\#155](https://github.com/youzan/vant/issues/155)
- npm 包里没有navbar组件。 [\#154](https://github.com/youzan/vant/issues/154)
- 友情支持一下 [\#153](https://github.com/youzan/vant/issues/153)
- when the button actived we can see 1px blank [\#150](https://github.com/youzan/vant/issues/150)
- 目前看到的最好的Vue移动端组件库，API够简洁，用着感觉很爽👍 [\#149](https://github.com/youzan/vant/issues/149)
- 请问框架为什么我全局安装后不能适应移动端。 [\#143](https://github.com/youzan/vant/issues/143)
**Improvements**
- fix bad spelling of 'android' [\#173](https://github.com/youzan/vant/pull/173) ([wonsikin](https://github.com/wonsikin))
- Docs: add English language support [\#170](https://github.com/youzan/vant/pull/170) ([pangxie1991](https://github.com/pangxie1991))
- 去掉zan-utils依赖，去掉组件内部对sku图片的处理 [\#168](https://github.com/youzan/vant/pull/168) ([w91](https://github.com/w91))
- Docs: modify doc of Swipe component 补 Swipe 文档中缺少引入的 SwipeItem [\#167](https://github.com/youzan/vant/pull/167) ([OlafCheng](https://github.com/OlafCheng))
- Fix waterfall hide bug [\#166](https://github.com/youzan/vant/pull/166) ([pangxie1991](https://github.com/pangxie1991))
- fix: remove unnecessary supports in mobile browsers [\#162](https://github.com/youzan/vant/pull/162) ([chenjiahan](https://github.com/chenjiahan))
- fix: remove zan-utils/validate & lodash/find dependencies [\#161](https://github.com/youzan/vant/pull/161) ([chenjiahan](https://github.com/chenjiahan))
- 去掉pc浏览器下，stepper组件input输入框中的箭头 [\#159](https://github.com/youzan/vant/pull/159) ([w91](https://github.com/w91))
- doc router use hash mode [\#158](https://github.com/youzan/vant/pull/158) ([pangxie1991](https://github.com/pangxie1991))
- fix button actived had 1px blank [\#151](https://github.com/youzan/vant/pull/151) ([ZWkang](https://github.com/ZWkang))
- fix: tab's props not observable [\#148](https://github.com/youzan/vant/pull/148) ([chenjiahan](https://github.com/chenjiahan))
## [v0.9.9](https://github.com/youzan/vant/tree/v0.9.9) (2017-09-26)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.8...v0.9.9)
**Issue**
- npm无法安装 npm WARN vant@0.9.7 requires a peer of vue@2.4.2 but none was installed. [\#141](https://github.com/youzan/vant/issues/141)
**Improvements**
- 增加单独禁用stepper input功能 [\#146](https://github.com/youzan/vant/pull/146) ([w91](https://github.com/w91))
- 优化：waterfall 文档和组件优化 [\#145](https://github.com/youzan/vant/pull/145) ([pangxie1991](https://github.com/pangxie1991))
- fix: wrong license in package.json [\#144](https://github.com/youzan/vant/pull/144) ([airyland](https://github.com/airyland))
## [v0.9.8](https://github.com/youzan/vant/tree/v0.9.8) (2017-09-24)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.7...v0.9.8)
**Breaking changes**
- update changelog.md [\#140](https://github.com/youzan/vant/pull/140) ([chenjiahan](https://github.com/chenjiahan))
- add AddressList component [\#138](https://github.com/youzan/vant/pull/138) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- pull-refresh 下拉成功后如何关闭加载，给的例子关闭不了 [\#139](https://github.com/youzan/vant/issues/139)
**Improvements**
- fix: sku message key [\#142](https://github.com/youzan/vant/pull/142) ([w91](https://github.com/w91))
## [v0.9.7](https://github.com/youzan/vant/tree/v0.9.7) (2017-09-21)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.6...v0.9.7)
**Breaking changes**
- Checkbox: support different shape [\#137](https://github.com/youzan/vant/pull/137) ([chenjiahan](https://github.com/chenjiahan))
## [v0.9.6](https://github.com/youzan/vant/tree/v0.9.6) (2017-09-20)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.4...v0.9.6)
**Bug Fixes**
- ImagePreview 图片预览，有bug，滑动就没有图片了！ [\#126](https://github.com/youzan/vant/issues/126)
- fix: reset.css compile error [\#136](https://github.com/youzan/vant/pull/136) ([chenjiahan](https://github.com/chenjiahan))
**Improvements**
- 移除大部分Lodash函数，更新文档 [\#135](https://github.com/youzan/vant/pull/135) ([w91](https://github.com/w91))
- 修复：图片预览 滑动关闭bug [\#134](https://github.com/youzan/vant/pull/134) ([pangxie1991](https://github.com/pangxie1991))
- icon 增加会员余额图标 [\#133](https://github.com/youzan/vant/pull/133) ([pangxie1991](https://github.com/pangxie1991))
## [v0.9.4](https://github.com/youzan/vant/tree/v0.9.4) (2017-09-15)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.3...v0.9.4)
**Bug Fixes**
- Button: fix disabled color wrong when has bottomAction prop [\#131](https://github.com/youzan/vant/pull/131) ([chenjiahan](https://github.com/chenjiahan))
**Improvements**
- Button: fix active color when disabled [\#132](https://github.com/youzan/vant/pull/132) ([chenjiahan](https://github.com/chenjiahan))
- 新增：增加一个已完成的icon [\#129](https://github.com/youzan/vant/pull/129) ([cookfront](https://github.com/cookfront))
## [v0.9.3](https://github.com/youzan/vant/tree/v0.9.3) (2017-09-13)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.2...v0.9.3)
**Breaking changes**
- 你们页面上（譬如底部区域），能不能github上查看这个框架的issues入口，每次都是点更新日志切换到issues的！ [\#127](https://github.com/youzan/vant/issues/127)
- add PasswordInput component [\#124](https://github.com/youzan/vant/pull/124) ([chenjiahan](https://github.com/chenjiahan))
- add NumberKeyboard component [\#122](https://github.com/youzan/vant/pull/122) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- Fix: component style should not depend on reset.css [\#128](https://github.com/youzan/vant/pull/128) ([chenjiahan](https://github.com/chenjiahan))
## [v0.9.2](https://github.com/youzan/vant/tree/v0.9.2) (2017-09-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.1...v0.9.2)
**Breaking changes**
- add NavBar component [\#121](https://github.com/youzan/vant/pull/121) ([chenjiahan](https://github.com/chenjiahan))
- Rename some components and use more suitable names [\#120](https://github.com/youzan/vant/pull/120) ([chenjiahan](https://github.com/chenjiahan))
**Improvements**
- sku组件迁移 [\#123](https://github.com/youzan/vant/pull/123) ([w91](https://github.com/w91))
## [v0.9.1](https://github.com/youzan/vant/tree/v0.9.1) (2017-09-07)
[Full Changelog](https://github.com/youzan/vant/compare/v0.9.0...v0.9.1)
**Bug Fixes**
- Toast: fix background color [\#118](https://github.com/youzan/vant/pull/118) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- 请问captain-ui 开源了吗？ [\#116](https://github.com/youzan/vant/issues/116)
## [v0.9.0](https://github.com/youzan/vant/tree/v0.9.0) (2017-09-07)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.9...v0.9.0)
**Breaking changes**
- add PullRefresh component [\#117](https://github.com/youzan/vant/pull/117) ([chenjiahan](https://github.com/chenjiahan))
- Build: analyzes component dependencies when build style entries [\#115](https://github.com/youzan/vant/pull/115) ([chenjiahan](https://github.com/chenjiahan))
- Toast: use flex layout, support loading with text, improve performance [\#114](https://github.com/youzan/vant/pull/114) ([chenjiahan](https://github.com/chenjiahan))
- Card: support num and price props [\#112](https://github.com/youzan/vant/pull/112) ([chenjiahan](https://github.com/chenjiahan))
- vant-css: use hairline classes instead of mixins [\#110](https://github.com/youzan/vant/pull/110) ([chenjiahan](https://github.com/chenjiahan))
- update `popup` and `quickstart` readme [\#109](https://github.com/youzan/vant/pull/109) ([cookfront](https://github.com/cookfront))
- add OrderCoupon component [\#108](https://github.com/youzan/vant/pull/108) ([chenjiahan](https://github.com/chenjiahan))
- Doc: improve site load speed [\#107](https://github.com/youzan/vant/pull/107) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- Fix: swipe tabs animation time and timing function [\#111](https://github.com/youzan/vant/pull/111) ([cookfront](https://github.com/cookfront))
- hide indicators when one swipe page [\#106](https://github.com/youzan/vant/pull/106) ([Raistlin916](https://github.com/Raistlin916))
**Improvements**
- 新增：Area（省市区选择）组件 [\#113](https://github.com/youzan/vant/pull/113) ([cookfront](https://github.com/cookfront))
## [v0.8.9](https://github.com/youzan/vant/tree/v0.8.9) (2017-09-01)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.8...v0.8.9)
## [v0.8.8](https://github.com/youzan/vant/tree/v0.8.8) (2017-09-01)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.7...v0.8.8)
**Breaking changes**
- PayOrder component add tip slot [\#105](https://github.com/youzan/vant/pull/105) ([Raistlin916](https://github.com/Raistlin916))
- Checkbox: support listen to change event [\#104](https://github.com/youzan/vant/pull/104) ([chenjiahan](https://github.com/chenjiahan))
- add GoodsAction component [\#102](https://github.com/youzan/vant/pull/102) ([chenjiahan](https://github.com/chenjiahan))
- add InvalidGoods component [\#100](https://github.com/youzan/vant/pull/100) ([chenjiahan](https://github.com/chenjiahan))
- add OrderGoods component [\#99](https://github.com/youzan/vant/pull/99) ([chenjiahan](https://github.com/chenjiahan))
- add PayOrder component [\#98](https://github.com/youzan/vant/pull/98) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- 修复 make init bug [\#97](https://github.com/youzan/vant/pull/97) ([pangxie1991](https://github.com/pangxie1991))
**Improvements**
- Add deep-select component and fix a popup bug. [\#103](https://github.com/youzan/vant/pull/103) ([Tinysymphony](https://github.com/Tinysymphony))
- Doc: update Step/Loading/Tag/Badge documents [\#101](https://github.com/youzan/vant/pull/101) ([chenjiahan](https://github.com/chenjiahan))
## [v0.8.7](https://github.com/youzan/vant/tree/v0.8.7) (2017-08-29)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.6...v0.8.7)
**Breaking changes**
- add ExpressWay component [\#96](https://github.com/youzan/vant/pull/96) ([chenjiahan](https://github.com/chenjiahan))
- add CellSwitch component [\#95](https://github.com/youzan/vant/pull/95) ([chenjiahan](https://github.com/chenjiahan))
- add NoticeBar && test cases [\#94](https://github.com/youzan/vant/pull/94) ([chenjiahan](https://github.com/chenjiahan))
- Dialog: support both function call and component call [\#93](https://github.com/youzan/vant/pull/93) ([chenjiahan](https://github.com/chenjiahan))
- CellSwipe: improve test coverage && code review [\#91](https://github.com/youzan/vant/pull/91) ([chenjiahan](https://github.com/chenjiahan))
- Progress: adjust DOM struct [\#90](https://github.com/youzan/vant/pull/90) ([chenjiahan](https://github.com/chenjiahan))
## [v0.8.6](https://github.com/youzan/vant/tree/v0.8.6) (2017-08-24)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.5...v0.8.6)
**Breaking changes**
- dalete merge && class operating methods [\#88](https://github.com/youzan/vant/pull/88) ([chenjiahan](https://github.com/chenjiahan))
- directory adjust: delete entry index.js [\#87](https://github.com/youzan/vant/pull/87) ([chenjiahan](https://github.com/chenjiahan))
- Button: reduce unnecessary styles [\#86](https://github.com/youzan/vant/pull/86) ([chenjiahan](https://github.com/chenjiahan))
- Layout: optimize doc [\#85](https://github.com/youzan/vant/pull/85) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- Fix datetime-picker init value [\#89](https://github.com/youzan/vant/pull/89) ([w91](https://github.com/w91))
**Issue**
- When 'showIndicators' set to 'false' The second image does not show [\#80](https://github.com/youzan/vant/issues/80)
## [v0.8.5](https://github.com/youzan/vant/tree/v0.8.5) (2017-08-21)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.4...v0.8.5)
**Breaking changes**
- Doc: add usage guide && top progress [\#83](https://github.com/youzan/vant/pull/83) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- Popup: not preventScroll by default [\#84](https://github.com/youzan/vant/pull/84) ([chenjiahan](https://github.com/chenjiahan))
- fix: swipe sometimes will change to drag image [\#81](https://github.com/youzan/vant/pull/81) ([pangxie1991](https://github.com/pangxie1991))
**Issue**
- Href link does not work [\#82](https://github.com/youzan/vant/issues/82)
- Swipe image not displayed [\#79](https://github.com/youzan/vant/issues/79)
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
**Bug Fixes**
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
## [v0.8.3](https://github.com/youzan/vant/tree/v0.8.3) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.1...v0.8.3)
**Bug Fixes**
- fix: dialog wrong z-index [\#77](https://github.com/youzan/vant/pull/77) ([chenjiahan](https://github.com/chenjiahan))
## [v0.8.1](https://github.com/youzan/vant/tree/v0.8.1) (2017-08-18)
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.0...v0.8.1)
**Breaking changes**
- field 增加icon slot支持 [\#76](https://github.com/youzan/vant/pull/76) ([pangxie1991](https://github.com/pangxie1991))
## [v0.8.0](https://github.com/youzan/vant/tree/v0.8.0) (2017-08-17)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.10...v0.8.0)
**Breaking changes**
- Optimize component building, reduce dist file size [\#74](https://github.com/youzan/vant/pull/74) ([chenjiahan](https://github.com/chenjiahan))
## [v0.7.10](https://github.com/youzan/vant/tree/v0.7.10) (2017-08-16)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.8...v0.7.10)
**Bug Fixes**
- fix: 修复popup和dialog同时出现时，几率出现dialog被挡住的情况 [\#75](https://github.com/youzan/vant/pull/75) ([pangxie1991](https://github.com/pangxie1991))
- 修复：popup滚动穿透 [\#73](https://github.com/youzan/vant/pull/73) ([cookfront](https://github.com/cookfront))
## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
**Breaking changes**
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)
**Bug Fixes**
- Fixed: one page Swipe components error [\#70](https://github.com/youzan/vant/pull/70) ([Raistlin916](https://github.com/Raistlin916))
## [v0.7.6](https://github.com/youzan/vant/tree/v0.7.6) (2017-08-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.5...v0.7.6)
**Breaking changes**
- 新增几个icon [\#69](https://github.com/youzan/vant/pull/69) ([cookfront](https://github.com/cookfront))
## [v0.7.5](https://github.com/youzan/vant/tree/v0.7.5) (2017-08-08)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.3...v0.7.5)
**Bug Fixes**
- fix: one page swiper broken [\#68](https://github.com/youzan/vant/pull/68) ([Raistlin916](https://github.com/Raistlin916))
**Issue**
- 安装业务组件导致基础组件css样式文件引入失败 [\#65](https://github.com/youzan/vant/issues/65)
## [v0.7.3](https://github.com/youzan/vant/tree/v0.7.3) (2017-08-04)
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.2...v0.7.3)
**Issue**
- datetime-picker的问题 [\#45](https://github.com/youzan/vant/issues/45)
**Improvements**
- fix: utils 修复babel编译 [\#67](https://github.com/youzan/vant/pull/67) ([pangxie1991](https://github.com/pangxie1991))
- README.md使用英文文档 [\#66](https://github.com/youzan/vant/pull/66) ([cookfront](https://github.com/cookfront))
## [v0.7.2](https://github.com/youzan/vant/tree/v0.7.2) (2017-07-31)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.6...v0.7.2)
**Breaking changes**
- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) ([chenjiahan](https://github.com/chenjiahan))
- 依赖更新 && 构建调整 [\#60](https://github.com/youzan/vant/pull/60) ([chenjiahan](https://github.com/chenjiahan))
- Switch 组件: 个人建议加了动画效果 [\#59](https://github.com/youzan/vant/pull/59) ([BosenY](https://github.com/BosenY))
- 文档改版 [\#55](https://github.com/youzan/vant/pull/55) ([chenjiahan](https://github.com/chenjiahan))
- 新增：Card 组件增加 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- fix: datetimepicker cancel event not work [\#64](https://github.com/youzan/vant/pull/64) ([chenjiahan](https://github.com/chenjiahan))
- 修复：popup多层级van-modal未插入到正确的位置 [\#63](https://github.com/youzan/vant/pull/63) ([cookfront](https://github.com/cookfront))
- 新增几个图标 && 修复tabs组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) ([cookfront](https://github.com/cookfront))
- Fix: deploy doc fail [\#56](https://github.com/youzan/vant/pull/56) ([chenjiahan](https://github.com/chenjiahan))
**Issue**
- SVG's SMIL animations deprecated [\#46](https://github.com/youzan/vant/issues/46)
## [v0.6.6](https://github.com/youzan/vant/tree/v0.6.6) (2017-07-15)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.5...v0.6.6)
**Breaking changes**
- 新增：Field 增加blur事件 && Field 支持尾部icon [\#53](https://github.com/youzan/vant/pull/53) ([pangxie1991](https://github.com/pangxie1991))
## [v0.6.5](https://github.com/youzan/vant/tree/v0.6.5) (2017-07-11)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.4...v0.6.5)
**Breaking changes**
- tabs组件支持滑动 [\#52](https://github.com/youzan/vant/pull/52) ([cookfront](https://github.com/cookfront))
**Issue**
- 有计划都生成vue版本吗 [\#50](https://github.com/youzan/vant/issues/50)
## [v0.6.4](https://github.com/youzan/vant/tree/v0.6.4) (2017-07-06)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.3...v0.6.4)
**Breaking changes**
- src/utils目录支持SSR [\#51](https://github.com/youzan/vant/pull/51) ([cookfront](https://github.com/cookfront))
## [v0.6.3](https://github.com/youzan/vant/tree/v0.6.3) (2017-07-04)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.2...v0.6.3)
**Breaking changes**
- 步骤条组件新增direction和activeColor属性，增加了竖的步骤条 [\#49](https://github.com/youzan/vant/pull/49) ([cookfront](https://github.com/cookfront))
- Card component supoort thumb slot，use flex layout [\#48](https://github.com/youzan/vant/pull/48) ([chenjiahan](https://github.com/chenjiahan))
**Bug Fixes**
- 修复人民币符号在ios显示问题 [\#44](https://github.com/youzan/vant/pull/44) ([w91](https://github.com/w91))
**Issue**
- goods-action 文档有误 [\#47](https://github.com/youzan/vant/issues/47)
## [v0.6.2](https://github.com/youzan/vant/tree/v0.6.2) (2017-06-26)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.1...v0.6.2)
**Breaking changes**
- 新增icon、filed组件新增time类型和Dialog组件默认文案修改 [\#43](https://github.com/youzan/vant/pull/43) ([cookfront](https://github.com/cookfront))
## [v0.6.1](https://github.com/youzan/vant/tree/v0.6.1) (2017-06-19)
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.0...v0.6.1)
**Bug Fixes**
- 新增icon和修复toast样式问题 [\#42](https://github.com/youzan/vant/pull/42) ([cookfront](https://github.com/cookfront))
## [v0.6.0](https://github.com/youzan/vant/tree/v0.6.0) (2017-06-15)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.12...v0.6.0)
**Breaking changes**
- Search组件新增微杂志样式 [\#38](https://github.com/youzan/vant/pull/38) ([cookfront](https://github.com/cookfront))
- 支持SSR、升级Vue版本和增加新的icon [\#40](https://github.com/youzan/vant/pull/40) ([cookfront](https://github.com/cookfront))
- 增加cell swipe组件 [\#39](https://github.com/youzan/vant/pull/39) ([tsxuehu](https://github.com/tsxuehu))
## [v0.5.12](https://github.com/youzan/vant/tree/v0.5.12) (2017-06-02)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.11...v0.5.12)
**Issue**
- 业务组件的cap-goods-list出现问题 [\#36](https://github.com/youzan/vant/issues/36)
**Improvements**
- utils/scroll [\#37](https://github.com/youzan/vant/pull/37) ([pangxie1991](https://github.com/pangxie1991))
## [v0.5.11](https://github.com/youzan/vant/tree/v0.5.11) (2017-05-25)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.10...v0.5.11)
**Improvements**
- 移除postcss-reset [\#35](https://github.com/youzan/vant/pull/35) ([cookfront](https://github.com/cookfront))
## [v0.5.10](https://github.com/youzan/vant/tree/v0.5.10) (2017-05-25)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.9...v0.5.10)
## [v0.5.9](https://github.com/youzan/vant/tree/v0.5.9) (2017-05-25)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.8...v0.5.9)
**Improvements**
- 新增微信导航icon [\#34](https://github.com/youzan/vant/pull/34) ([cookfront](https://github.com/cookfront))
## [v0.5.8](https://github.com/youzan/vant/tree/v0.5.8) (2017-05-25)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.7...v0.5.8)
**Bug Fixes**
- 修复长按图片后，图片会隐藏问题 [\#32](https://github.com/youzan/vant/pull/32) ([w91](https://github.com/w91))
**Improvements**
- 新增微信导航icon [\#33](https://github.com/youzan/vant/pull/33) ([cookfront](https://github.com/cookfront))
## [v0.5.7](https://github.com/youzan/vant/tree/v0.5.7) (2017-05-19)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.6...v0.5.7)
**Breaking changes**
- picker 增加 title 显示 [\#30](https://github.com/youzan/vant/pull/30) ([pangxie1991](https://github.com/pangxie1991))
**Improvements**
- 更新reset中body背景色 [\#31](https://github.com/youzan/vant/pull/31) ([w91](https://github.com/w91))
## [v0.5.6](https://github.com/youzan/vant/tree/v0.5.6) (2017-05-15)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.4...v0.5.6)
**Improvements**
- 添加两个新的icon [\#29](https://github.com/youzan/vant/pull/29) ([cookfront](https://github.com/cookfront))
- 改变打包出来的amd模块，增加amd模块的名字 [\#28](https://github.com/youzan/vant/pull/28) ([pangxie1991](https://github.com/pangxie1991))
## [v0.5.4](https://github.com/youzan/vant/tree/v0.5.4) (2017-05-09)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.3...v0.5.4)
**Bug Fixes**
- 修复：添加reset.css和cell加上right-icon的slot [\#27](https://github.com/youzan/vant/pull/27) ([cookfront](https://github.com/cookfront))
- 修复：cell同时设置title和label时，value不居中 [\#26](https://github.com/youzan/vant/pull/26) ([cookfront](https://github.com/cookfront))
- 修复：popup的zIndex转换为number [\#24](https://github.com/youzan/vant/pull/24) ([cookfront](https://github.com/cookfront))
**Improvements**
- fix bugs and add new features [\#25](https://github.com/youzan/vant/pull/25) ([radicalviva](https://github.com/radicalviva))
## [v0.5.3](https://github.com/youzan/vant/tree/v0.5.3) (2017-04-27)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.2...v0.5.3)
**Bug Fixes**
- 修复：picker中值变了后未更新picker-colum中的值 [\#23](https://github.com/youzan/vant/pull/23) ([cookfront](https://github.com/cookfront))
## [v0.5.2](https://github.com/youzan/vant/tree/v0.5.2) (2017-04-26)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.1...v0.5.2)
**Issue**
- does it render UI Natively just like React - Native or like ionic ? [\#15](https://github.com/youzan/vant/issues/15)
- give me an english version of this : https://www.youzanyun.com/zanui/react/guides/install [\#14](https://github.com/youzan/vant/issues/14)
**Improvements**
- 修复：webpack打包修复 [\#21](https://github.com/youzan/vant/pull/21) ([cookfront](https://github.com/cookfront))
- unit test: picker [\#20](https://github.com/youzan/vant/pull/20) ([cookfront](https://github.com/cookfront))
- Fix: 修复toast关闭时未移除Dom节点，以及补上单元测试 [\#19](https://github.com/youzan/vant/pull/19) ([cookfront](https://github.com/cookfront))
- tabs 组件修改 [\#18](https://github.com/youzan/vant/pull/18) ([pangxie1991](https://github.com/pangxie1991))
- 补充 Col & Row 测试用例 [\#16](https://github.com/youzan/vant/pull/16) ([w91](https://github.com/w91))
- 单元测试 排除src/目录 [\#13](https://github.com/youzan/vant/pull/13) ([pangxie1991](https://github.com/pangxie1991))
- 添加单元测试 [\#12](https://github.com/youzan/vant/pull/12) ([cookfront](https://github.com/cookfront))
- test 环境不跑 PhantomJS [\#11](https://github.com/youzan/vant/pull/11) ([pangxie1991](https://github.com/pangxie1991))
- 修改 unit test 的配置 [\#10](https://github.com/youzan/vant/pull/10) ([pangxie1991](https://github.com/pangxie1991))
- unit test: uploader [\#9](https://github.com/youzan/vant/pull/9) ([tsxuehu](https://github.com/tsxuehu))
- 文档页样式优化和打包配置优化 [\#8](https://github.com/youzan/vant/pull/8) ([cookfront](https://github.com/cookfront))
- 修复表单组件样式和单元测试用例 [\#7](https://github.com/youzan/vant/pull/7) ([cookfront](https://github.com/cookfront))
- 文档小细节优化 [\#6](https://github.com/youzan/vant/pull/6) ([cookfront](https://github.com/cookfront))
## [v0.5.1](https://github.com/youzan/vant/tree/v0.5.1) (2017-04-24)
[Full Changelog](https://github.com/youzan/vant/compare/v0.5.0...v0.5.1)
**Improvements**
- 文档细节优化，search、loading和dialog组件样式修复 [\#5](https://github.com/youzan/vant/pull/5) ([cookfront](https://github.com/cookfront))
## [v0.5.0](https://github.com/youzan/vant/tree/v0.5.0) (2017-04-23)
**Issue**
- 一些建议 [\#1](https://github.com/youzan/vant/issues/1)
**Improvements**
- use vue in amd & commonjs, use Vue in root [\#4](https://github.com/youzan/vant/pull/4) ([pangxie1991](https://github.com/pangxie1991))
- 手机端样式细节调整，补充测试用例 [\#3](https://github.com/youzan/vant/pull/3) ([cookfront](https://github.com/cookfront))
- 补充waterfall文档，依赖vue改为Vue [\#2](https://github.com/youzan/vant/pull/2) ([pangxie1991](https://github.com/pangxie1991))
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
docs/markdown/zh-CN/changelog.md
+414
View File
@@ -0,0 +1,414 @@
## 更新日志
### [0.10.9](https://github.com/youzan/vant/tree/v0.10.9)
`2017-11-15`
**Improvements**
- Icon: 增加几个新 icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- Search: 修复 box-sizing 错误 [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
`2017-11-11`
**Improvements**
- Tabbar: 支持 vue-router [\#305](https://github.com/youzan/vant/pull/305) [@chenjiahan](https://github.com/chenjiahan)
- Stepper: 新增 plus & minus 事件 [\#294](https://github.com/youzan/vant/pull/294) [@chenjiahan](https://github.com/chenjiahan)
- Progress: 新增 showPivot 属性 [\#300](https://github.com/youzan/vant/pull/300) [@chenjiahan](https://github.com/chenjiahan)
- Loading: 新增 spinner 类型 [\#297](https://github.com/youzan/vant/pull/297) [@chenjiahan](https://github.com/chenjiahan)
- Toast: 新增 mask 选项 [\#296](https://github.com/youzan/vant/pull/296) [@chenjiahan](https://github.com/chenjiahan)
- 新增 Tab 英文文档 [\#308](https://github.com/youzan/vant/pull/308) [@cookfront](https://github.com/cookfront)
- 新增 Toast 英文文档 [\#307](https://github.com/youzan/vant/pull/307) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 npm run dist 在 windows 下报错的问题 [\#301](https://github.com/youzan/vant/pull/301) [@zlkiarest](https://github.com/lkiarest)
### [0.10.7](https://github.com/youzan/vant/tree/v0.10.7)
`2017-11-08`
**Improvements**
- 修正了所有图标尺寸，保持大小统一 [\#292](https://github.com/youzan/vant/pull/292) [@chenjiahan](https://github.com/chenjiahan)
- ImagePreview 支持自定义初始位置 [\#286](https://github.com/youzan/vant/pull/286) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Sku 滚动锁定问题 [\#291](https://github.com/youzan/vant/pull/291) [@w91](https://github.com/w91)
- 修复 Steps 超过四项时样式错误 [\#287](https://github.com/youzan/vant/pull/287) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.6](https://github.com/youzan/vant/tree/v0.10.6)
`2017-11-06`
**Improvements**
- 新增 Swipe initialSwipe 属性 [\#279](https://github.com/youzan/vant/pull/279) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Dialog 按钮文字未重置的问题 [\#278](https://github.com/youzan/vant/pull/278) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Tab 动态生成问题 [\#284](https://github.com/youzan/vant/pull/284) [@cookfront](https://github.com/cookfront)
- 修复 NoticeBar 在页面返回时文字消失的问题 [\#280](https://github.com/youzan/vant/pull/280) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.5](https://github.com/youzan/vant/tree/v0.10.5)
`2017-10-30`
**Improvements**
- Cell 支持 vue-router 路由跳转 [\#268](https://github.com/youzan/vant/pull/268) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Tabbar 使用 icon slot 时 info prop 失效的问题 [\#269](https://github.com/youzan/vant/pull/269) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Uploader input 类型错误 [\#265](https://github.com/youzan/vant/pull/265) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
`2017-10-26`
**Improvements**
- 新增多个图标 [\#253](https://github.com/youzan/vant/pull/253) [@pangxie1991](https://github.com/pangxie1991)
- 新增定制主题文档 [\#251](https://github.com/youzan/vant/pull/251) [@chenjiahan](https://github.com/chenjiahan)
- 新增多个组件的按钮点击态提示 [\#248](https://github.com/youzan/vant/pull/248) [@chenjiahan](https://github.com/chenjiahan)
- NoticeBar：增加多个 props [\#254](https://github.com/youzan/vant/pull/254) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Swipe 在某些情况下宽度计算错误的问题 [\#258](https://github.com/youzan/vant/pull/258) [@chenjiahan](https://github.com/chenjiahan)
- 修复 PullRefreash 父元素可滚动时无法正常运行的问题 [\#247](https://github.com/youzan/vant/pull/247) [@GeoffZhu](https://github.com/GeoffZhu)
- 修复 CouponList 空列表样式一直存在的问题 [\#246](https://github.com/youzan/vant/pull/246) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.3](https://github.com/youzan/vant/tree/v0.10.3)
`2017-10-25`
**Improvements**
- 新增 Tabbar info 属性 [\#245](https://github.com/youzan/vant/pull/245) [@chenjiahan](https://github.com/chenjiahan)
- 新增 Toast position 属性 [\#244](https://github.com/youzan/vant/pull/244) [@chenjiahan](https://github.com/chenjiahan)
- 新增 Coupon showExchangeBar 属性 [\#243](https://github.com/youzan/vant/pull/243) [@chenjiahan](https://github.com/chenjiahan)
- 新增高阶组件英文文档 [\#236](https://github.com/youzan/vant/pull/236) [@Tinysymphony](https://github.com/Tinysymphony)
- 新增示例页面文档 [\#237](https://github.com/youzan/vant/pull/237) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Address & Contact 列表底部遮挡问题 [\#230](https://github.com/youzan/vant/pull/230) [@chenjiahan](https://github.com/chenjiahan)
- 修复 popup 被依赖时未自动引入样式的问题 [\#231](https://github.com/youzan/vant/pull/231) [@chenjiahan](https://github.com/chenjiahan)
- 修复 PullRefresh touchcancel 事件名拼写错误 [\#239](https://github.com/youzan/vant/pull/239) [@GeoffZhu](https://github.com/GeoffZhu)
### [0.10.2](https://github.com/youzan/vant/tree/v0.10.2)
`2017-10-20`
**Improvements**
- Sku: sku-group slot 增加 event bus [\#226](https://github.com/youzan/vant/pull/226) [@w91](https://github.com/w91)
- 新增基础英文文档 [\#220](https://github.com/youzan/vant/pull/220) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复组件间样式依赖分析遗漏的问题 [\#224](https://github.com/youzan/vant/pull/224) [@chenjiahan](https://github.com/chenjiahan)
### [0.10.1](https://github.com/youzan/vant/tree/v0.10.1)
`2017-10-18`
**Improvements**
- 升级 Vue 依赖至 2.5.0 版本 [@chenjiahan](https://github.com/chenjiahan)
- 新增 Tabs swipeThreshold 属性 [\#206](https://github.com/youzan/vant/pull/206) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- 修复 Swipe 组件 destroyed 时未清除 autoplay timer 的问题 [\#218](https://github.com/youzan/vant/pull/218) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Tab 组件 slot text 文本换行问题 [\#217](https://github.com/youzan/vant/pull/217) [@cookfront](https://github.com/cookfront)
- 修复 TreeSelect 依赖路径错误 [\#216](https://github.com/youzan/vant/pull/216) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Checkbox 在微信浏览器下的边框渲染错误 [\#214](https://github.com/youzan/vant/pull/214) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Popup modal 层在某些情况下无法展示的问题 [\#211](https://github.com/youzan/vant/pull/211) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Waterfall 重复绑定事件的问题 [@chenjiahan](https://github.com/chenjiahan)
### [0.10.0](https://github.com/youzan/vant/tree/v0.10.0)
`2017-10-13`
**Breaking changes**
- 移除 vant-css 中对 reset.css 的默认引用 [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) [@chenjiahan](https://github.com/chenjiahan)
- 重写 Swipe 组件，调整部分 API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200) [@chenjiahan](https://github.com/chenjiahan)
- 优化 Search 组件，修改原有结构 [\#198](https://github.com/youzan/vant/pull/198) [@pangxie1991](https://github.com/pangxie1991)
**Improvements**
- 新增 Tabbar 组件 [#157](https://github.com/youzan/vant/issues/157) [\#204](https://github.com/youzan/vant/pull/204) [@chenjiahan](https://github.com/chenjiahan)
- 新增表单相关组件英文文档 [\#199](https://github.com/youzan/vant/pull/199) [@chenjiahan](https://github.com/chenjiahan)
- 优化 Sku 样式 [\#205](https://github.com/youzan/vant/pull/205) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 ImagePreview 图片加载过程中跳动的问题 [\#201](https://github.com/youzan/vant/pull/201) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Field 组件 type 为 textarea 且 display none 时高度计算错误的问题 [\#181](https://github.com/youzan/vant/issues/181) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
`2017-10-11`
**Bug Fixes**
- 修复 Search 样式问题 [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
`2017-10-11`
**Improvements**
- 新增 Contribute 相关文档 [\#182](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
**Bug Fixes**
- 修正 AddressEdit 组件姓名字段的键名为 name [\#187](https://github.com/youzan/vant/pull/187) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Filed type 为 textarea 且 display none 时高度计算错误的问题 [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
- 修复 windows 下项目编译失败的问题 [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
`2017-10-09`
**Improvements**
- 新增 Contact 组件 [\#160](https://github.com/youzan/vant/pull/160) [@chenjiahan](https://github.com/chenjiahan)
- 新增 AddressEdit 组件 [\#147](https://github.com/youzan/vant/pull/147) [@chenjiahan](https://github.com/chenjiahan)
- 新增英文文档支持 [\#170](https://github.com/youzan/vant/pull/170) [@pangxie1991](https://github.com/pangxie1991)
- 去除 zan-utils 依赖 [\#168](https://github.com/youzan/vant/pull/168) [@w91](https://github.com/w91) [@chenjiahan](https://github.com/chenjiahan)
- 去除 transition 中冗余的兼容代码 [\#162](https://github.com/youzan/vant/pull/162) [@chenjiahan](https://github.com/chenjiahan)
- 使用 clean-css 代替 gulp-cssmin [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Tab props 修改后未同步至父组件的问题 [\#148](https://github.com/youzan/vant/pull/148) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Button active 状态下边框样式问题 [\#150](https://github.com/youzan/vant/issues/150) [@ZWkang](https://github.com/ZWkang)
- 修复 Stepper 组件输入框样式错误 [\#159](https://github.com/youzan/vant/pull/159) [@w91](https://github.com/w91)
- 修复 Waterfall 未显示时 disable 属性无法生效的问题 [\#166](https://github.com/youzan/vant/pull/166) [@pangxie1991](https://github.com/pangxie1991)
- 修复 vant-css 构建过程中未编译 calc 属性的问题 [@chenjiahan](https://github.com/chenjiahan)
- 修复 MacOS 下 npm run dev 报错的问题 [\#152](https://github.com/youzan/vant/issues/152) [@chenjiahan](https://github.com/chenjiahan)
- 修复文档在部分低版本浏览器路由失效的问题 [\#158](https://github.com/youzan/vant/pull/158) [@pangxie1991](https://github.com/pangxie1991)
- 修复文档中遗漏 SwipeItem 组件引入方式的问题 [\#167](https://github.com/youzan/vant/pull/167) [@OlafCheng](https://github.com/OlafCheng)
### [0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
`2017-09-26`
**Improvements**
- Sku：支持禁用 Stepper [\#146](https://github.com/youzan/vant/pull/146) [@w91](https://github.com/w91)
**Bug Fixes**
- 修复 packages.json 中 license 标注错误 [\#144](https://github.com/youzan/vant/pull/144) [@airyland](https://github.com/airyland)
- 修复 Waterfall 滚动计算错误的问题 [\#145](https://github.com/youzan/vant/pull/145) [@pangxie1991](https://github.com/pangxie1991)
### [0.9.8](https://github.com/youzan/vant/tree/v0.9.8)
`2017-09-24`
**Improvements**
- 新增 AddressList 组件 [\#138](https://github.com/youzan/vant/pull/138) [@chenjiahan](https://github.com/chenjiahan)
- 优化 changelog 结构 [\#140](https://github.com/youzan/vant/pull/140) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Sku 留言渲染错误 [\#142](https://github.com/youzan/vant/pull/142) [@w91](https://github.com/w91)
### [0.9.7](https://github.com/youzan/vant/tree/v0.9.7)
`2017-09-21`
**Improvements**
- Checkbox: 支持 shape 属性 [\#137](https://github.com/youzan/vant/pull/137) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.6](https://github.com/youzan/vant/tree/v0.9.6)
`2017-09-20`
**Improvements**
- Sku：移除大部分 Lodash 函数 [\#135](https://github.com/youzan/vant/pull/135) [@w91](https://github.com/w91)
- Icon：增加会员余额图标 [\#133](https://github.com/youzan/vant/pull/133) [@pangxie1991](https://github.com/pangxie1991)
**Bug Fixes**
- 修复 ImagePreview 滑动后无法展示图片的问题 [\#126](https://github.com/youzan/vant/issues/126) [@pangxie1991](https://github.com/pangxie1991)
- 修复 reset.css 编译失败的问题 [\#136](https://github.com/youzan/vant/pull/136) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.4](https://github.com/youzan/vant/tree/v0.9.4)
`2017-09-15`
**Improvements**
- Icon: 增加已完成图标 [\#129](https://github.com/youzan/vant/pull/129) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- 修复 Button 同时使用 disabled 和 bottomAction 属性时颜色错误的问题 [\#131](https://github.com/youzan/vant/pull/131) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Button 不可用状态下 acitive 背景色错误的问题 [\#132](https://github.com/youzan/vant/pull/132) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.3](https://github.com/youzan/vant/tree/v0.9.3)
`2017-09-13`
**Improvements**
- 新增 PasswordInput 组件 [\#124](https://github.com/youzan/vant/pull/124) [@chenjiahan](https://github.com/chenjiahan)
- 新增 NumberKeyboard 组件 [\#122](https://github.com/youzan/vant/pull/122) [@chenjiahan](https://github.com/chenjiahan)
- 新增文档底部 issue 入口 [\#127](https://github.com/youzan/vant/issues/127) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复部分组件样式依赖 reset.css 的问题 [\#128](https://github.com/youzan/vant/pull/128) [@chenjiahan](https://github.com/chenjiahan)
### [0.9.2](https://github.com/youzan/vant/tree/v0.9.2)
`2017-09-08`
**Breaking changes**
- 内置 van-hairline 类，用于添加 0.5px 边框 [\#110](https://github.com/youzan/vant/pull/110) [@chenjiahan](https://github.com/chenjiahan)
- Quantity：重命名为 Stepper [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
- PayOrder 重命名为 SubmitBar [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
- DeepSelect: 重命名为 TreeSelect [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
- OrderCoupon: 拆分为 CouponList 和 CouponCell 组件 [\#120](https://github.com/youzan/vant/pull/120) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Tabs 动画过渡效果 [\#111](https://github.com/youzan/vant/pull/111) [@cookfront](https://github.com/cookfront)
- 修复 Swipe 页数为一时指示器未隐藏的问题 [\#106](https://github.com/youzan/vant/pull/106) [@Raistlin916](https://github.com/Raistlin916)
- 修复 Toast 背景色值错误的问题 [\#118](https://github.com/youzan/vant/pull/118) [@chenjiahan](https://github.com/chenjiahan)
- 修复自动引入组件样式时未引入内部依赖组件样式的问题 [\#115](https://github.com/youzan/vant/pull/115) [@chenjiahan](https://github.com/chenjiahan)
**Improvements**
- 新增 Sku 组件 [\#123](https://github.com/youzan/vant/pull/123) [@w91](https://github.com/w91)
- 新增 Area 组件 [\#113](https://github.com/youzan/vant/pull/113) [@cookfront](https://github.com/cookfront)
- 新增 NavBar 组件 [\#121](https://github.com/youzan/vant/pull/121) [@chenjiahan](https://github.com/chenjiahan)
- 新增 PullRefresh 组件 [\#117](https://github.com/youzan/vant/pull/117) [@chenjiahan](https://github.com/chenjiahan)
- 新增 OrderCoupon 组件 [\#108](https://github.com/youzan/vant/pull/108) [@chenjiahan](https://github.com/chenjiahan)
- 优化文档加载速度 [\#107](https://github.com/youzan/vant/pull/107) [@chenjiahan](https://github.com/chenjiahan)
- 优化 Popup 文档 [\#109](https://github.com/youzan/vant/pull/109) [@cookfront](https://github.com/cookfront)
- Card：支持 num 和 price 属性 [\#112](https://github.com/youzan/vant/pull/112) [@chenjiahan](https://github.com/chenjiahan)
- Toast: 支持 loading 和 text 属性同时使用，优化渲染性能 [\#114](https://github.com/youzan/vant/pull/114) [@chenjiahan](https://github.com/chenjiahan)
- Toast：布局方式改为 Flex 布局 [\#114](https://github.com/youzan/vant/pull/114) [@chenjiahan](https://github.com/chenjiahan)
### [0.8.8](https://github.com/youzan/vant/tree/v0.8.8)
`2017-09-01`
**Improvements**
- 新增 DeepSelect 组件 [\#103](https://github.com/youzan/vant/pull/103) [@Tinysymphony](https://github.com/Tinysymphony)
- 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102) [@chenjiahan](https://github.com/chenjiahan)
- 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99) [@chenjiahan](https://github.com/chenjiahan)
- 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98) [@chenjiahan](https://github.com/chenjiahan)
- 优化 Step、Loading、Tag、Badge 文档 [\#101](https://github.com/youzan/vant/pull/101) [@chenjiahan](https://github.com/chenjiahan)
- Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 make init 命令报错的问题 [\#97](https://github.com/youzan/vant/pull/97) [@pangxie1991](https://github.com/pangxie1991)
### [0.8.7](https://github.com/youzan/vant/tree/v0.8.7)
`2017-08-29`
**Improvements**
- 新增 NoticeBar 组件 [\#94](https://github.com/youzan/vant/pull/94) [@chenjiahan](https://github.com/chenjiahan)
- 新增 CellSwitch 组件 [\#95](https://github.com/youzan/vant/pull/95) [@chenjiahan](https://github.com/chenjiahan)
- Dialog: 支持通过组件的方式进行调用 [\#93](https://github.com/youzan/vant/pull/93) [@chenjiahan](https://github.com/chenjiahan)
- Progress: 简化 DOM 结构 [\#90](https://github.com/youzan/vant/pull/90) [@chenjiahan](https://github.com/chenjiahan)
- CellSwipe: 性能优化，补充单元测试 [\#91](https://github.com/youzan/vant/pull/91) [@chenjiahan](https://github.com/chenjiahan)
### [0.8.6](https://github.com/youzan/vant/tree/v0.8.6)
`2017-08-24`
**Improvements**
- 去除对 merge 和 class 操作方法的依赖 [\#88](https://github.com/youzan/vant/pull/88) [@chenjiahan](https://github.com/chenjiahan)
- 目录结构简化，去除 index.js 文件 [\#87](https://github.com/youzan/vant/pull/87) [@chenjiahan](https://github.com/chenjiahan)
- Button: 精简部分样式 [\#86](https://github.com/youzan/vant/pull/86) [@chenjiahan](https://github.com/chenjiahan)
- Layout: 文档优化 [\#85](https://github.com/youzan/vant/pull/85) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 DatetimePicker 初始值错误的问题 [\#89](https://github.com/youzan/vant/pull/89) [@w91](https://github.com/w91)
### [0.8.5](https://github.com/youzan/vant/tree/v0.8.5)
`2017-08-21`
**Breaking changes**
- 优化单个组件构建方式, 减少文件体积 [\#74](https://github.com/youzan/vant/pull/74) [@chenjiahan](https://github.com/chenjiahan)
**Improvements**
- 新增文档组件使用指南 [\#83](https://github.com/youzan/vant/pull/83) [@chenjiahan](https://github.com/chenjiahan)
- 新增文档加载动效 [\#83](https://github.com/youzan/vant/pull/83) [@chenjiahan](https://github.com/chenjiahan)
- Field：新增 icon slot [\#76](https://github.com/youzan/vant/pull/76) [@pangxie1991](https://github.com/pangxie1991)
**Bug Fixes**
- 修复 Popup 默认开启 preventScroll 导致无法局部滚动的问题 [\#84](https://github.com/youzan/vant/pull/84) [@chenjiahan](https://github.com/chenjiahan)
- 修复 Field autosize 高度错误的问题 [\#78](https://github.com/youzan/vant/pull/78) [@pangxie1991](https://github.com/pangxie1991)
- 修复 Dialog z-index 错误的问题 [\#77](https://github.com/youzan/vant/pull/77) [@chenjiahan](https://github.com/chenjiahan)
### [0.7.8](https://github.com/youzan/vant/tree/v0.7.8)
`2017-08-10`
**Improvements**
- 新增 README 英文文档 [\#66](https://github.com/youzan/vant/pull/66) [@cookfront](https://github.com/cookfront)
- 新增 babel-plugin-import 使用教程 [\#71](https://github.com/youzan/vant/pull/71) [@chenjiahan](https://github.com/chenjiahan)
- 新增多个 Icon 类型 [\#69](https://github.com/youzan/vant/pull/69) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- 修复 Swipe 组件报错的问题 [\#70](https://github.com/youzan/vant/pull/70) [@Raistlin916](https://github.com/Raistlin916)
- 修复 DatetimePicker cancel 事件无法触发的问题 [\#45](https://github.com/youzan/vant/issues/45) [@chenjiahan](https://github.com/chenjiahan)
- 修复 utils 编译时未转成 ES5 的问题 [\#67](https://github.com/youzan/vant/pull/67) [@pangxie1991](https://github.com/pangxie1991)
### [0.7.2](https://github.com/youzan/vant/tree/v0.7.2)
`2017-07-31`
**Breaking changes**
- 文档站点样式改版 [\#55](https://github.com/youzan/vant/pull/55) [@chenjiahan](https://github.com/chenjiahan)
- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) [@chenjiahan](https://github.com/chenjiahan)
**Bug Fixes**
- 修复 Popup 多层级 modal 未插入到正确的位置的问题 [\#63](https://github.com/youzan/vant/pull/63) [@cookfront](https://github.com/cookfront)
- 修复 Tabs 组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) [@cookfront](https://github.com/cookfront)
**Improvements**
- Switch：增加过渡动画效果 [\#59](https://github.com/youzan/vant/pull/59) [@BosenY](https://github.com/BosenY)
- Card：支持 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) [@chenjiahan](https://github.com/chenjiahan)
### [0.6.6](https://github.com/youzan/vant/tree/v0.6.6)
`2017-07-15`
**Improvements**
- Tabs：支持滑动 [\#52](https://github.com/youzan/vant/pull/52) [@cookfront](https://github.com/cookfront)
- Steps：新增 direction 和 activeColor 属性，支持竖向展示 [\#49](https://github.com/youzan/vant/pull/49) [@cookfront](https://github.com/cookfront)
- Card：支持 thumb slot [\#48](https://github.com/youzan/vant/pull/48) [@chenjiahan](https://github.com/chenjiahan)
- Field：支持 blur 事件，新增 icon slot [\#53](https://github.com/youzan/vant/pull/53) [@pangxie1991](https://github.com/pangxie1991)
### [0.6.2](https://github.com/youzan/vant/tree/v0.6.2)
`2017-06-26`
**Improvements**
- Filed组件：支持 time类型 [\#43](https://github.com/youzan/vant/pull/43) [@cookfront](https://github.com/cookfront)
**Bug Fixes**
- 修复 Toast 样式问题 [\#42](https://github.com/youzan/vant/pull/42) [@cookfront](https://github.com/cookfront)
- 修复人民币符号在 iOS 下显示问题 [\#44](https://github.com/youzan/vant/pull/44) [@w91](https://github.com/w91)
### [0.6.0](https://github.com/youzan/vant/tree/v0.6.0)
`2017-06-15`
**Improvements**
- 支持 SSR [\#40](https://github.com/youzan/vant/pull/40) [@cookfront](https://github.com/cookfront)
- 新增多个 Icon 类型 [\#40](https://github.com/youzan/vant/pull/40) [@cookfront](https://github.com/cookfront)
- 新增 CellSwipe 组件 [\#39](https://github.com/youzan/vant/pull/39) [@tsxuehu](https://github.com/tsxuehu)
- 新增 Search 组件微杂志样式 [\#38](https://github.com/youzan/vant/pull/38) [@cookfront](https://github.com/cookfront)
### [0.5.8](https://github.com/youzan/vant/tree/v0.5.8)
`2017-05-25`
**Improvements**
- 新增多个 Icon 类型 [\#29](https://github.com/youzan/vant/pull/29) [@cookfront](https://github.com/cookfront)
- 新增打包后的 amd 模块名称 [\#28](https://github.com/youzan/vant/pull/28) [@pangxie1991](https://github.com/pangxie1991)
- 移除 postcss-reset 插件 [\#35](https://github.com/youzan/vant/pull/35) [@cookfront](https://github.com/cookfront)
- Picker：支持 title 属性 [\#30](https://github.com/youzan/vant/pull/30) [@pangxie1991](https://github.com/pangxie1991)
**Bug Fixes**
- 修复长按图片后隐藏的问题 [\#32](https://github.com/youzan/vant/pull/32) [@w91](https://github.com/w91)
### [0.5.4](https://github.com/youzan/vant/tree/v0.5.4)
`2017-05-09`
**Bug Fixes**
- 修复 Cell 同时设置 title 和 label 时 value 不居中的问题 [\#26](https://github.com/youzan/vant/pull/26) [@cookfront](https://github.com/cookfront)
- 修复 Popup zIndex 类型错误 [\#24](https://github.com/youzan/vant/pull/24) [@cookfront](https://github.com/cookfront)
- 修复 Picker 状态更新错误 [\#23](https://github.com/youzan/vant/pull/23) [@cookfront](https://github.com/cookfront)
**Improvements**
- 新增 reset.css [\#27](https://github.com/youzan/vant/pull/27) [@cookfront](https://github.com/cookfront)
- Cell: 新增 right-icon slot [\#27](https://github.com/youzan/vant/pull/27) [@cookfront](https://github.com/cookfront)
### [0.5.2](https://github.com/youzan/vant/tree/v0.5.2)
`2017-04-26`
**Improvements**
- 新增 Picker 组件测试用例 [\#20](https://github.com/youzan/vant/pull/20) [@cookfront](https://github.com/cookfront)
- 新增 Col & Row 组件测试用例 [\#16](https://github.com/youzan/vant/pull/16) [@w91](https://github.com/w91)
- 新增 Uploader 单元测试 [\#9](https://github.com/youzan/vant/pull/9) [@tsxuehu](https://github.com/tsxuehu)
**Bug Fixes**
- 修复 Webpack 打包错误 [\#21](https://github.com/youzan/vant/pull/21) [@cookfront](https://github.com/cookfront)
- 修复 Toast 关闭时未移除 Dom 节点的问题 [\#19](https://github.com/youzan/vant/pull/19) [@cookfront](https://github.com/cookfront)
- 修复组件样式问题 [\#5](https://github.com/youzan/vant/pull/5) [@cookfront](https://github.com/cookfront)
docs/markdown/zh-CN/checkbox.md
+101
View File
@@ -0,0 +1,101 @@
## Checkbox 复选框
### 使用指南
``` javascript
import { Checkbox, CheckboxGroup } from 'vant';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
```
### 代码演示
#### 基础用法
通过`v-model`绑定 checkbox 的勾选状态
```html
<van-checkbox v-model="checked">复选框 1</van-checkbox>
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
#### 禁用状态
```html
<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
```
#### Checkbox 组
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
```html
<van-checkbox-group v-model="result">
<van-checkbox
v-for="(item, index) in list"
:key="index"
:name="item"
>
复选框 {{ item }}
</van-checkbox>
</van-checkbox-group>
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
};
```
#### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件
```html
<van-checkbox-group v-model="result">
<van-cell-group>
<van-cell v-for="(item, index) in list" :key="index">
<van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
```
### Checkbox API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
| shape | 形状 | `String` | `round` | `square` |
### CheckboxGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用所有单选框 | `Boolean` | `false` | - |
### Checkbox Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
### CheckboxGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
docs/markdown/zh-CN/contact.md
+168
View File
@@ -0,0 +1,168 @@
## Contact 联系人
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
### 使用指南
``` javascript
import { ContactCard, ContactList, ContactEdit } from 'vant';
Vue.component(ContactCard.name, ContactCard);
Vue.component(ContactList.name, ContactList);
Vue.component(ContactEdit.name, ContactEdit);
```
### 代码演示
#### 基础用法
```html
<!-- 联系人卡片 -->
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
/>
<!-- 联系人列表 -->
<van-popup v-model="showList" position="bottom">
<van-contact-list
v-model="chosenContactId"
:list="list"
@add="onAdd"
@edit="onEdit"
@select="onSelect"
/>
</van-popup>
<!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contactInfo="editingContact"
:isEdit="isEdit"
@save="onSave"
@delete="onDelete"
/>
</van-popup>
```
``` javascript
export default {
data() {
return {
chosenContactId: null,
editingContact: {},
showList: false,
showEdit: false,
isEdit: false,
list: [{
name: '张三',
tel: '13000000000',
id: 0
}]
};
},
computed: {
cardType() {
return this.chosenContactId !== null ? 'edit' : 'add';
},
currentContact() {
const id = this.chosenContactId;
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
}
},
methods: {
// 添加联系人
onAdd() {
this.editingContact = { id: this.list.length };
this.isEdit = false;
this.showEdit = true;
},
// 编辑联系人
onEdit(item) {
this.isEdit = true;
this.showEdit = true;
this.editingContact = item;
},
// 选中联系人
onSelect() {
this.showList = false;
},
// 保存联系人
onSave(info) {
this.showEdit = false;
this.showList = false;
if (this.isEdit) {
this.list = this.list.map(item => item.id === info.id ? info : item);
} else {
this.list.push(info);
}
this.chosenContactId = info.id;
},
// 删除联系人
onDelete(info) {
this.showEdit = false;
this.list = this.list.filter(item => item.id !== info.id);
if (this.chosenContactId === info.id) {
this.chosenContactId = null;
}
}
}
};
```
### ContactCard API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型，分为添加和编辑两种样式 | `String` | `add` | `edit` |
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
| name | 联系人姓名 | `String` | - | - |
| tel | 联系人手机号 | `String` | - | - |
### ContactList API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
| list | 联系人列表 | `Array` | `[]` | - |
### ContactList Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
### ContactEdit API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| contactInfo | 联系人信息 | `Object` | `[]` | - |
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### ContactEdit Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 |
### 数据格式
#### 联系人数据格式
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| id | 每位联系人的唯一标识 | `String | Number` |
| name | 联系人姓名 | `String` |
| tel | 联系人手机号 | `String` |
docs/markdown/zh-CN/coupon.md
+118
View File
@@ -0,0 +1,118 @@
## Coupon 优惠券选择器
### 使用指南
``` javascript
import { CouponCell, CouponList } from 'vant';
Vue.component(CouponCell.name, CouponCell);
Vue.component(CouponList.name, CouponList);
```
### 代码演示
#### 基础用法
```html
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosenCoupon="chosenCoupon"
@click="showList = true"
/>
<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:disabledCoupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
</van-popup>
```
```javascript
const coupon = {
available: 1,
discount: 0,
denominations: 150,
origin_condition: 0,
reason: '',
value: 150,
condition: '下单立减 1.50 元',
name: '新手专用优惠券',
start_at: 1489104000,
end_at: 1514592000
};
export default {
data() {
return {
chosenCoupon: -1,
coupons: [coupon],
disabledCoupons: [coupon]
}
},
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
this.coupons.push(coupon);
}
}
}
```
### CouponCell API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
### CouponList API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
| showCloseButton | 是否显示列表底部按钮 | `Boolean` | `true` | - |
| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
| showExchangeBar | 是否展示兑换栏 | `Boolean` | `true` | - |
### CouponList Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
| exchange | 兑换优惠券回调 | code, 兑换码 |
### 数据格式
#### 优惠券字段说明
| key | 说明 | 类型 |
|-----------|-----------|-----------|
| id | 优惠券 id | `String` |
| name | 优惠券名称 | `String` |
| available | 是否可用, 1:可用,0:不可用 | `Number` |
| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
| denominations | 面值（0为折扣券）单位分 | `Number` |
| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
| start_at | 卡有效开始时间 | `Number` |
| end_at | 卡失效日期 | `Number` |
| reason | 不可用原因 | `String` |
| value | 订单优惠金额，单位分 | `Number` |
| condition | 格式化输出 value | `String` |
docs/markdown/zh-CN/datetime-picker.md
+93
View File
@@ -0,0 +1,93 @@
## DatetimePicker 时间选择
### 使用指南
``` javascript
import { DatetimePicker } from 'vant';
Vue.component(DatetimePicker.name, DatetimePicker);
```
### 代码演示
#### 基础用法
```html
<van-datetime-picker
v-model="currentDate"
type="datetime"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:maxDate="maxDate"
/>
```
```javascript
export default {
data() {
return {
minHour: 10,
maxHour: 20,
minDate: new Date(),
maxDate: new Date(2019, 10, 1),
currentDate: new Date(2018, 0, 1)
};
}
};
```
#### 选择日期
```html
<van-datetime-picker
v-model="currentDate"
type="date"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
/>
```
#### 选择时间
```html
<van-datetime-picker
v-model="currentDate"
type="time"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
/>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 组件类型 | `String` | 'datetime' | 'date', 'time' |
| minDate | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
| maxDate | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
| minHour | 可选的最小小时 | `Number` | `0` | - |
| maxHour | 可选的最大小时 | `Number` | `23` | - |
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当值变化时触发的事件 | picker 实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value |
| cancel | 点击取消按钮时触发的事件 | - |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | 说明 |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
docs/markdown/zh-CN/dialog.md
+63
View File
@@ -0,0 +1,63 @@
## Dialog 弹出框
### 使用指南
```js
import { Dialog } from 'vant';
```
### 代码演示
#### 消息提示
用于提示一些消息，只包含一个确认按钮
```javascript
Dialog.alert({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on close
});
Dialog.alert({
message: '弹窗内容'
}).then(() => {
// on close
});
```
#### 消息确认
用于确认消息，包含取消和确认按钮
```javascript
Dialog.confirm({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
```
### 方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
| Dialog.close | - | `void` | 关闭弹窗 |
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | - | - |
| message | 内容 | `String` | - | - |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
docs/markdown/zh-CN/field.md
+105
View File
@@ -0,0 +1,105 @@
## Field 输入框
`input`或`textarea`的输入框。
### 使用指南
``` javascript
import { Field } from 'vant';
Vue.component(Field.name, Field);
```
### 代码演示
#### 基础用法
通过 v-model 绑定输入框的值
```html
<van-cell-group>
<van-field v-model="value" placeholder="请输入用户名"></van-field>
</van-cell-group>
```
#### 自定义类型
根据`type`属性定义不同类型的输入框
```html
<van-cell-group>
<van-field
v-model="username"
label="用户名"
icon="clear"
placeholder="请输入用户名"
required
@click-icon="username = ''"
>
</van-field>
<van-field
v-model="password"
type="password"
label="密码"
placeholder="请输入密码"
required>
</van-field>
</van-cell-group>
```
#### 禁用输入框
```html
<van-cell-group>
<van-field value="输入框已禁用" label="用户名" disabled></van-field>
</van-cell-group>
```
#### 错误提示
```html
<van-cell-group>
<van-field label="用户名" placeholder="请输入用户名" error></van-field>
</van-cell-group>
```
#### 高度自适应
对于 textarea，可以通过`autosize`属性设置高度自适应
```html
<van-cell-group>
<van-field
v-model="message"
label="留言"
type="textarea"
placeholder="请输入留言"
rows="1"
autosize
>
</van-field>
</van-cell-group>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
| value | 输入框的值 | `String` | - | - |
| label | 输入框标签 | `String` | - | - |
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
| error | 输入框是否有错误 | `Boolean` | `false` | - |
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| focus | 输入框聚焦时触发 | - |
| blur | 输入框失焦时触发 | - |
| click-icon | 点击尾部图标时触发 | - |
### Slot
| name | 描述 |
|-----------|-----------|
| icon | 自定义icon |
docs/markdown/zh-CN/goods-action.md
+63
View File
@@ -0,0 +1,63 @@
## GoodsAction 商品页行动点
### 使用指南
``` javascript
import {
GoodsAction,
GoodsActionBigBtn,
GoodsActionMiniBtn
} from 'vant';
Vue.component(GoodsAction.name, GoodsAction);
Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
```
### 代码演示
```html
<van-goods-action>
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
客服
</van-goods-action-mini-btn>
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
购物车
</van-goods-action-mini-btn>
<van-goods-action-big-btn @click="onClickBigBtn">
加入购物车
</van-goods-action-big-btn>
<van-goods-action-big-btn @click="onClickBigBtn" primary>
立即购买
</van-goods-action-big-btn>
</van-goods-action>
```
```javascript
export default {
methods: {
onClickMiniBtn() {
Toast('点击图标');
},
onClickBigBtn() {
Toast('点击按钮');
}
}
}
```
### API
#### GoodsActionMiniBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - |
#### GoodsActionBigBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
docs/markdown/zh-CN/icon.md
+23
View File
@@ -0,0 +1,23 @@
## Icon 图标
### 使用指南
``` javascript
import { Icon } from 'vant';
Vue.component(Icon.name, Icon);
```
### 代码演示
#### 基础用法
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
```html
<van-icon name="success" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| name | icon名称 | `String` | `''` | - |
docs/markdown/zh-CN/image-preview.md
+36
View File
@@ -0,0 +1,36 @@
## ImagePreview 图片预览
### 使用指南
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
```js
import { ImagePreview } from 'vant';
```
### 代码演示
#### 基础用法
```javascript
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
```
#### 指定初始位置
```javascript
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
], 1);
```
### 方法参数
| 参数名 | 说明 | 类型 |
|-----------|-----------|-----------|
| imageUrls | 需要预览的图片 | `Array` |
| startPosition | 图片预览起始位置索引 | `Number` |
docs/markdown/zh-CN/layout.md
+62
View File
@@ -0,0 +1,62 @@
## Layout 布局
提供了`van-row`和`van-col`两个组件来进行行列布局
### 使用指南
``` javascript
import { Row, Col } from 'vant';
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
```
### 代码演示
#### 基本用法
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
```html
<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>
```
#### 设置列元素间距
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
```html
<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>
```
### API
#### Row
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | - |
#### Column
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| span | 列元素宽度 | `String | Number` | - | - |
| offset | 列元素偏移距离 | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | - |
docs/markdown/zh-CN/lazyload.md
+67
View File
@@ -0,0 +1,67 @@
## Lazyload 图片懒加载
### 使用指南
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
```js
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload, options);
```
### 代码演示
#### 基础用法
将`v-lazy`指令的值设置为你需要懒加载的图片
```html
<img v-for="img in imageList" v-lazy="img">
```
```javascript
export default {
data() {
return {
imageList: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
}
}
```
#### 背景图懒加载
和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
```html
<div v-for="img in imageList" v-lazy:background-image="img" />
```
#### 懒加载模块
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
```html
<lazy-component>
<img v-for="img in imageList" v-lazy="img">
</lazy-component>
```
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| loading | 加载时的图片 | `String` | - | - |
| error | 错误时的图片 | `String` | - | - |
| preload | 预加载高度的比例 | `String` | - | - |
| attempt | 尝试次数 | `Number` | `3` | - |
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
| adapter | 适配器 | `Object` | - | - |
| filter | 图片url过滤 | `Object` | - | - |
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
docs/markdown/zh-CN/loading.md
+38
View File
@@ -0,0 +1,38 @@
## Loading 加载
### 使用指南
``` javascript
import { Loading } from 'vant';
Vue.component(Loading.name, Loading);
```
### 代码演示
#### 单色圆环
```html
<van-loading type="circle" color="black" />
<van-loading type="circle" color="white" />
```
#### 渐变色圆环
```html
<van-loading type="gradient-circle" color="black" />
<van-loading type="gradient-circle" color="white" />
```
#### Spinner
```html
<van-loading type="spinner" color="black" />
<van-loading type="spinner" color="white" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| color | 颜色 | `String` | `black` | `black` `white` |
| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
docs/markdown/zh-CN/nav-bar.md
+48
View File
@@ -0,0 +1,48 @@
## NavBar 导航栏
### 使用指南
``` javascript
import { NavBar } from 'vant';
Vue.component(NavBar.name, NavBar);
```
### 代码演示
#### 基础用法
```html
<van-nav-bar
title="标题"
leftText="返回"
rightText="按钮"
leftArrow
/>
```
#### 高级用法
通过 slot 定制内容
```html
<van-nav-bar title="标题" leftText="返回" leftArrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | `''` | - |
| leftText | 左侧文案 | `String` | `''` | - |
| rightText | 右侧文案 | `String` | `''` | - |
| leftArrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
| fixed | 是否固定在顶部 | `Boolean` | `false` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| title | 自定义标题 |
| left | 自定义左侧区域内容 |
| right | 自定义右侧区域内容 |
docs/markdown/zh-CN/notice-bar.md
+61
View File
@@ -0,0 +1,61 @@
## NoticeBar 通告栏
### 使用指南
``` javascript
import { NoticeBar } from 'vant';
Vue.component(NoticeBar.name, NoticeBar);
```
### 代码演示
#### 基础用法
```html
<van-notice-bar
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
leftIcon="https://img.yzcdn.cn/1.png"
/>
```
#### 禁用滚动
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
```html
<van-notice-bar :scrollable="false">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
```
#### 通告栏模式
默认模式为空，支持`closeable`和`link`。
```html
<!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
<!-- link 模式，在右侧显示链接箭头 -->
<van-notice-bar mode="link">
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
</van-notice-bar>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| mode | 通告栏模式 | String | `''` | `closeable` `link` |
| delay | 动画延迟时间，单位秒 | Number | `1` | - |
| speed | 滚动速率，单位px | Number | `50` | - |
| scrollable | 是否滚动 | Boolean | `true` | - |
| leftIcon | 左侧图标图片链接 | String | - | - |
| color | 文本颜色 | String | `#f60` | - |
| background | 滚动条背景 | String | `#fff7cc` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 点击事件回调 | - |
docs/markdown/zh-CN/number-keyboard.md
+69
View File
@@ -0,0 +1,69 @@
## NumberKeyboard 数字键盘
### 使用指南
``` javascript
import { NumberKeyboard } from 'vant';
Vue.component(NumberKeyboard.name, NumberKeyboard);
```
### 代码演示
#### 基础用法
```html
<van-button @touchstart.native.stop="showKeyboard = true">
弹出键盘
</van-button>
<van-button @touchstart.native.stop="showKeyboard = false">
收起键盘
</van-button>
<van-number-keyboard
:show="showKeyboard"
@blur="showKeyboard = false"
@input="onInput"
@delete="onDelete"
/>
```
```javascript
export default {
data() {
return {
showKeyboard: true
}
},
methods: {
onInput(value) {
Toast(value);
},
onDelete() {
Toast('delete');
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| show | 是否显示键盘 | `Boolean` | - | - |
| title | 键盘标题 | `String` | - | - |
| extraKey | 左下角按键内容 | `String` | `''` | - |
| zIndex | 键盘 z-index | `Number` | `100` | - |
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| input | 点击按键时触发 | key: 按键内容 |
| delete | 点击删除键时触发 | - |
| blur | 点击非键盘区域时触发 | - |
| show | 键盘完全弹出时触发 | - |
| hide | 键盘完全收起时触发 | - |
docs/markdown/zh-CN/panel.md
+48
View File
@@ -0,0 +1,48 @@
## Panel 面板
### 使用指南
``` javascript
import { Panel } from 'vant';
Vue.component(Panel.name, Panel);
```
### 代码演示
#### 基础用法
面板只是一个容器，里面可以放入自定义的内容
```html
<van-panel title="标题" desc="描述信息" status="状态">
<div>内容</div>
</van-panel>
```
#### 高级用法
使用`slot`自定义内容
```html
<van-panel title="标题" desc="描述信息" status="状态">
<div>内容</div>
<div slot="footer">
<van-button size="small">按钮</van-button>
<van-button size="small" type="danger">按钮</van-button>
</div>
</van-panel>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| status | 状态 | `String` | - | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| header | 自定义 header |
| footer | 自定义 footer |
docs/markdown/zh-CN/password-input.md
+66
View File
@@ -0,0 +1,66 @@
## PasswordInput 密码输入框
密码输入框组件通常与 [数字键盘](#/zh-CN/component/number-keyboard) 组件配合使用
### 使用指南
``` javascript
import { PasswordInput, NumberKeyBoard } from 'vant';
Vue.component(PasswordInput.name, PasswordInput);
Vue.component(NumberKeyBoard.name, NumberKeyBoard);
```
### 代码演示
#### 基础用法
```html
<!-- 密码输入框 -->
<van-password-input
:value="value"
info="密码为 6 位数字"
@focus="showKeyboard = true"
/>
<!-- 数字键盘 -->
<van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/>
```
```javascript
export default {
data() {
return {
value: '',
showKeyboard: true
};
},
methods: {
onInput(key) {
this.value = (this.value + key).slice(0, 6);
},
onDelete() {
this.value = this.value.slice(0, this.value.length - 1);
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| value | 密码值 | `String` | `''` | - |
| length | 密码最大长度 | `Number` | `6` | - |
| info | 输入框下方提示 | `String` | - | - |
| errorInfo | 输入框下方错误提示 | `String` | - | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| focus | 输入框聚焦时触发 | - |
docs/markdown/zh-CN/picker.md
+129
View File
@@ -0,0 +1,129 @@
## Picker 选择器
### 使用指南
``` javascript
import { Picker } from 'vant';
Vue.component(Picker.name, Picker);
```
### 代码演示
#### 基础用法
```html
<van-picker :columns="pickerColumns" @change="onChange" />
```
```javascript
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys['浙江'],
className: 'column2'
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
```
#### 带 toolbar 的 Picker
```html
<van-picker
showToolbar
:title="title"
:columns="pickerColumns"
@change="onChange"
@cancel="onCancel"
@confirm="onConfirm"
/>
```
```javascript
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
};
export default {
data() {
return {
title: '地区选择',
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys['浙江'],
className: 'column2'
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
onCancel() {
Toast('picker cancel');
},
onConfirm() {
Toast('picker confirm');
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
| itemHeight | 选中元素区高度 | `Number` | `44` | - |
| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
| title | 在toolbar上显示的标题文字 | `String` | - | - |
### columns
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | 说明 |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
docs/markdown/zh-CN/popup.md
+48
View File
@@ -0,0 +1,48 @@
## Popup 弹出层
### 使用指南
``` javascript
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
```
### 代码演示
#### 基础用法
`popup`默认从中间弹出
```html
<van-popup v-model="show">内容</van-popup>
```
```javascript
export default {
data() {
return {
show: false
}
}
};
```
#### 弹出位置
通过`position`属性设置 Popup 弹出位置
```html
<van-popup v-model="show" position="top" :overlay="false">
内容
</van-popup>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
docs/markdown/zh-CN/progress.md
+51
View File
@@ -0,0 +1,51 @@
## Progress 进度条
### 使用指南
``` javascript
import { Progress } from 'vant';
Vue.component(Progress.name, Progress);
```
### 代码演示
#### 基础用法
进度条默认为蓝色，使用`percentage`属性来设置当前进度
```html
<van-progress :percentage="0" />
<van-progress :percentage="46" />
<van-progress :percentage="100" />
```
#### 进度条置灰
```html
<van-progress inactive :percentage="0" />
<van-progress inactive :percentage="46" />
<van-progress inactive :percentage="100" />
```
#### 样式定制
可以使用`pivotText`属性自定义文字，`color`属性自定义进度条颜色
```html
<van-progress pivotText="红色" color="#ed5050" :percentage="26" />
<van-progress pivotText="橙色" color="#f60" :percentage="46" />
<van-progress pivotText="黄色" color="#f09000" :percentage="66" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
| showPivot | 是否显示进度文字 | `Boolean` | `true` | - |
| pivotText | 文字显示 | `String` | 百分比文字 | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
docs/markdown/zh-CN/pull-refresh.md
+61
View File
@@ -0,0 +1,61 @@
## PullRefresh 下拉刷新
### 使用指南
``` javascript
import { PullRefresh } from 'vant';
Vue.component(PullRefresh.name, PullRefresh);
```
### 代码演示
```html
<!-- 通过 v-model 控制加载状态 -->
<van-pull-refresh v-model="isLoading">
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
```
```javascript
export default {
data() {
return {
count: 0,
isLoading: false
}
},
watch: {
isLoading() {
if (this.isLoading) {
setTimeout(() => {
Toast('刷新成功');
this.isLoading = false;
this.count++;
}, 500);
}
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否在加载中 | `Boolean` | - | - |
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
| animationDuration | 动画时长 | `Number` | `300` | - |
| headHeight | 顶部内容高度 | `Number` | `50` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义内容 |
| normal | 非下拉状态时顶部内容 |
| pulling | 下拉过程中顶部内容 |
| loosing | 释放过程中顶部内容 |
| loading | 加载过程中顶部内容 |
docs/markdown/zh-CN/quickstart.md
+67
View File
@@ -0,0 +1,67 @@
## Vant
基于`Vue 2.0`的 Mobile 组件库
### 安装
```shell
npm i vant -S
```
### 引入组件
#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```bash
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
```
```js
// 在 .babelrc 或 babel-loader 中添加插件配置
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
```
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
```js
import { Button } from 'vant';
```
#### 方式二. 按需引入组件
```js
import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';
```
#### 方式三. 导入所有组件
```js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css';
Vue.use(Vant);
```
### CDN
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<!-- 引入组件 --><script></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
```
### vue-cli 模板
可以使用`vue-cli`来初始化`Vant`的通用模板：
```shell
vue init youzan/vue-cli-template-vant projectName
```
docs/markdown/zh-CN/radio.md
+82
View File
@@ -0,0 +1,82 @@
## Radio 单选框
### 使用指南
``` javascript
import { Radio } from 'vant';
Vue.component(Radio.name, Radio);
```
### 代码演示
#### 基础用法
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
```html
<van-radio name="1" v-model="radio">单选框 1</van-radio>
<van-radio name="2" v-model="radio">单选框 2</van-radio>
```
```javascript
export default {
data() {
return {
radio: '1'
}
}
};
```
#### 禁用状态
设置`disabled`属性即可，此时`Radio`不能点击。
```html
<van-radio name="1" v-model="radio" disabled>未选中禁用</van-radio>
<van-radio name="2" v-model="radio" disabled>选中且禁用</van-radio>
```
#### Radio 组
需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
```html
<van-radio-group v-model="radio">
<van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio>
</van-radio-group>
```
#### 与 Cell 组件一起使用
此时你需要再引入`Cell`和`CellGroup`组件。
```html
<van-radio-group v-model="radio">
<van-cell-group>
<van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
<van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
</van-cell-group>
</van-radio-group>
```
### Radio API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
### RadioGroup API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
### RadioGroup Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
docs/markdown/zh-CN/search.md
+67
View File
@@ -0,0 +1,67 @@
## Search 搜索
### 使用指南
``` javascript
import { Search } from 'vant';
Vue.component(Search.name, 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 弹出的输入法中显示搜索按钮
```html
<form action="/">
<van-search
v-model="value"
placeholder="请输入商品名称"
:showAction="true"
@search="onSearch"
@cancel="onCancel">
</van-search>
</form>
```
#### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
```html
<van-search
v-model="value"
:showAction="true"
@search="onSearch">
<div slot="action" @click="onSearch">搜索</div>
</van-search>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `String` | - | - |
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| cancel | 取消搜索 | - |
| search | 确定搜索 | - |
### Slot
| name | 描述 |
|-----------|-----------|
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
docs/markdown/zh-CN/sku.md
+176
View File
@@ -0,0 +1,176 @@
## Sku 商品购买组件
### 使用指南
```javascript
import { Sku } from 'vant';
Vue.component(Sku.name, Sku);
```
### 代码演示
#### 基础用法
```html
<van-sku
v-model="showBase"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="resetStepperOnHide"
:disableStepperInput="disableStepperInput"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
/>
```
#### 自定义 sku slot 区块
```html
<van-sku
v-model="showCustomAction"
stepperTitle="我要买"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:showAddCartBtn="true"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="true"
:initialSku="initialSku"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
<!-- 隐藏sku messages -->
<template slot="sku-messages"></template>
<!-- 自定义sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
积分兑换
</button>
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
买买买
</button>
</div>
</template>
</van-sku>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否显示sku | Boolean | false | 是 |
| sku | 商品sku数据 | Object | - | 是 |
| goods | 商品信息 | Object | - | 是 |
| goodsId | 商品id | String/Number | - | 是 |
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
### slots
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
| Name | 说明 |
|-----------|-----------|
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
| sku-group | 商品sku展示区 |
| extra-sku-group | 额外商品sku展示区，一般用不到 |
| sku-stepper | 商品数量选择区 |
| sku-messages | 商品留言区 |
| sku-actions | 操作按钮区 |
### 数据结构
#### sku对象结构
```javascript
"sku": {
// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
"tree": [{
"k": "颜色", // skuKeyName：规格类目名称
"v": [{
"id": "30349", // skuValueId：规格值id
"name": "红色", // skuValueName：规格值名称
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
}, {
"id": "1215",
"name": "蓝色",
"imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
}],
"k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id
}, ...],
// 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
"list": [{
"id": 2259, // skuId，下单时后端需要
"price": 100, // 价格（单位分）
"s1": "1215", // 规格类目k_s为s1的对应规格值id
"s2": "1193", // 规格类目k_s为s2的对应规格值id
"s3": "0", // 最多包含3个规格值，为0表示不存在该规格
"stock_num": 110 // 当前sku组合对应的库存
}, ...],
"price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
"stock_num": 227, // 商品总库存
"collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
"none_sku": false, // 是否无规格商品
"messages": [{ // 商品留言
"datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
"multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
"name": "留言", // 留言名称
"type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
"required": "1" // 是否必填 “1”表示必填
}, ...],
"hide_stock": false // 是否隐藏剩余库存
},
```
#### goods对象结构
```javascript
"goods": {
// 商品标题
"title": "测试商品",
// 默认商品sku缩略图
"picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
},
```
#### 添加购物车和点击购买回调函数接收的skuData对象结构
```javascript
skuData: {
// 商品id
goodsId:"946755",
// 留言信息
messages: {
message_0:"12",
message_1:"",
... // 有几个留言就有几条
},
// 另一种格式的留言，key不同
cartMessages: {
'留言1': 'xxxx',
... // key是message的name
},
// 选择的商品数量
selectedNum:1,
// 选择的sku组合
selectedSkuComb: {
id:2257,
price:100,
s1:"30349",
s2:"1193",
s3:"0",
stock_num:111
}
}
```
docs/markdown/zh-CN/stepper.md
+61
View File
@@ -0,0 +1,61 @@
## Stepper 步进器
### 使用指南
``` javascript
import { Stepper } from 'vant';
Vue.component(Stepper.name, Stepper);
```
### 代码演示
#### 基础用法
```html
<van-stepper v-model="value" />
```
```javascript
export default {
data() {
return {
value: 1
}
}
}
```
#### 禁用状态
通过设置`disabled`属性来禁用 stepper
```html
<van-stepper v-model="value" disabled />
```
#### 高级用法
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
```html
<van-stepper v-model="value" min="5" max="40" step="2" defaultValue="9" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| min | 最小值 | `String | Number` | `1` | - |
| max | 最大值 | `String | Number` | - | - |
| defaultValue | 默认值 | `String | Number` | `1` | - |
| step | 步数 | `String | Number` | `1` | - |
| disabled | 是否禁用 | `Boolean` | `false` | - |
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
### Event
| 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
| overlimit | 点击不可用的按钮时触发 | - |
| plus | 点击增加按钮时触发 | - |
| minus | 点击减少按钮时触发 | - |
docs/markdown/zh-CN/steps.md
+89
View File
@@ -0,0 +1,89 @@
## Steps 步骤条
### 使用指南
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### 代码演示
#### 基础用法
```html
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
```javascript
export default {
data() {
return {
active: 0
};
}
}
```
#### 物流描述
通过`title`和`description`属性来定义物流描述信息
```html
<van-steps
:active="active"
icon="logistics"
title="标题"
description="描述信息"
>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式
```html
<van-steps direction="vertical" :active="0" activeColor="#f60">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
```
### Steps API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | - | - |
| icon | 当前步骤的icon | `String` | - | - |
| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
| title | 当前步骤标题 | `String` | - | - |
| description | 当前步骤描述 | `String` | - | - |
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | - |
### Steps Slot
| Name | 说明 |
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |
docs/markdown/zh-CN/submit-bar.md
+83
View File
@@ -0,0 +1,83 @@
## SubmitBar 提交订单栏
### 使用指南
``` javascript
import { SubmitBar } from 'vant';
Vue.component(SubmitBar.name, SubmitBar);
```
### 代码演示
#### 基础用法
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
/>
```
#### 禁用状态
禁用状态下不会触发`submit`事件
```html
<van-submit-bar
disabled
:price="3050"
buttonText="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
@submit="onClickButton"
/>
```
#### 加载状态
加载状态下不会触发`submit`事件
```html
<van-submit-bar
loading
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
/>
```
#### 高级用法
提示文案中的额外操作和说明
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
@submit="onClickButton"
>
<span slot="tip">
您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
</span>
</van-submit-bar>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | - | 是 |
| buttonText | 按钮文字 | `String` | - | 是 |
| buttonType | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | - | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| submit | 按钮点击事件回调 | - |
### Slot
| Name | 说明 |
|-----------|-----------|
| tip | 提示文案中的额外操作和说明 |
docs/markdown/zh-CN/swipe.md
+62
View File
@@ -0,0 +1,62 @@
## Swipe 轮播
### 使用指南
``` javascript
import { Swipe, SwipeItem } from 'vant';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
### 代码演示
#### 基础用法
通过`autoplay`属性设置自动轮播间隔
```html
<van-swipe :autoplay="3000">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
```
#### 图片懒加载
配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载
```html
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(image, index) in images" :key="index">
<img v-lazy="image" />
</van-swipe-item>
</van-swipe>
```
```javascript
export default {
data() {
return {
images: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
}
}
}
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
| duration | 动画时长，单位为 ms | `Number` | `500` | - |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
| initialSwipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
### 事件
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 |
docs/markdown/zh-CN/switch-cell.md
+64
View File
@@ -0,0 +1,64 @@
## SwitchCell 开关单元格
`SwitchCell`组件是对`Switch`和`Cell`组件的封装
### 使用指南
``` javascript
import { SwitchCell } from 'vant';
Vue.component(SwitchCell.name, SwitchCell);
```
### 代码演示
#### 基础用法
```html
<van-cell-group>
<van-switch-cell v-model="checked" title="标题" />
</van-cell-group>
```
```javascript
export default {
data() {
return {
checked: true
}
}
}
```
#### 禁用状态
通过`disabled`属性可以将组件设置为禁用状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" disabled title="标题" />
</van-cell-group>
```
#### 加载状态
通过`loading`属性可以将组件设置为加载状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" loading title="标题" />
</van-cell-group>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | - | - |
| title | 左侧标题 | `String` | `''` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 |
docs/markdown/zh-CN/switch.md
+76
View File
@@ -0,0 +1,76 @@
## Switch 开关
### 使用指南
``` javascript
import { Switch } from 'vant';
Vue.component(Switch.name, Switch);
```
### 代码演示
#### 基础用法
```html
<van-switch v-model="checked" />
```
```javascript
export default {
data() {
return {
checked: true
};
}
};
```
#### 禁用状态
```html
<van-switch v-model="checked" disabled />
```
#### 加载状态
```html
<van-switch v-model="checked" loading />
```
#### 高级用法
```html
<van-switch :value="checked" @input="onInput" />
```
```js
export default {
data() {
return {
checked: true
};
},
methods: {
onInput(checked) {
Dialog.confirm({
title: '提醒',
message: '是否切换开关？'
}).then(() => {
this.checked = checked;
});
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 开关选中状态 | `Boolean` | `false` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 |
docs/markdown/zh-CN/tab.md
+129
View File
@@ -0,0 +1,129 @@
<script>
</script>
## Tabs 标签页
### 使用指南
``` javascript
import { Tab, Tabs } from 'vant';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
```
### 代码演示
#### 基础用法
默认情况下启用第一个 tab，可以通过`active`属性激活对应特定索引的 tab
```html
<van-tabs :active="active">
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
```js
export default {
data() {
return {
active: 2
};
}
}
```
#### 横向滚动
默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
```html
<van-tabs>
<van-tab v-for="index in 8" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
#### 禁用标签
在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
```html
<van-tabs @disabled="onClickDisabled">
<van-tab v-for="index in 4" :title="'选项 ' + index" :disabled="index === 2">
内容 {{ index }}
</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
onClickDisabled() {
Toast('Disabled!')
}
}
};
```
#### 样式风格
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
```html
<van-tabs type="card">
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
#### 点击事件
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
```html
<van-tabs @click="handleTabClick">
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
handleTabClick(index) {
Toast(index);
}
}
};
```
### Tabs API
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| type | Tab 样式类型 | `String` | `line` | `card` |
| active | 默认激活的 tab | `String` `Number` | `0` | - |
| duration | 切换 tab 的动画时间 | `Number` | `0.3` | - | - |
| swipeThreshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - | - |
### Tab API
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `String` | - | - |
| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
### Tabs Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
docs/markdown/zh-CN/tabbar.md
+87
View File
@@ -0,0 +1,87 @@
## Tabbar 标签栏
### 使用指南
``` javascript
import { Tabbar, TabbarItem } from 'vant';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabbarItem.name, TabbarItem);
```
### 代码演示
#### 基础用法
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">标签</van-tabbar-item>
<van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
<van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
<van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
</van-tabbar>
```
```javascript
export default {
data() {
return {
active: 0
}
}
}
```
#### 自定义图标
通过 icon slot 自定义图标
```html
<van-tabbar v-model="active">
<van-tabbar-item icon="shop">
<span>自定义</span>
<img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
</van-tabbar-item>
<van-tabbar-item icon="chat">标签</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item>
</van-tabbar>
```
```javascript
export default {
data() {
return {
active: 0,
icon: {
normal: '//img.yzcdn.cn/1.png',
active: '//img.yzcdn.cn/2.png'
}
}
}
}
```
### Tabbar API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中标签的索引 | `Number` | - | - |
### Tabbar Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| change | 切换标签时触发 | active: 当前选中标签 |
### TabbarItem API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
| dot | 是否显示小红点 | `Boolean` | - | - |
| info | 图标右上角提示信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
docs/markdown/zh-CN/tag.md
+54
View File
@@ -0,0 +1,54 @@
## Tag 标记
### 使用指南
``` javascript
import { Tag } from 'vant';
Vue.component(Tag.name, Tag);
```
### 代码演示
#### 基础用法
通过 type 属性控制 Tag 颜色，默认为灰色
```html
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
```
#### 空心样式
设置`plain`属性设置为空心样式
```html
<van-tag plain>标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="success">标签</van-tag>
```
#### 标记样式
通过`mark`设置为标记样式
```html
<van-tag mark>标签</van-tag>
<van-tag mark type="danger">标签</van-tag>
<van-tag mark type="primary">标签</van-tag>
<van-tag mark type="success">标签</van-tag>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | - |
| mark | 是否为标记样式 | `Boolean` | `false` | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义 Tag 显示内容 |
docs/markdown/zh-CN/theme.md
+55
View File
@@ -0,0 +1,55 @@
## 定制主题
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
### 方案一. PostCSS 插件
在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
```javascript
// 引入基础样式
import 'vant/packages/vant-css/src/base.css';
// 引入组价对应的样式
import 'vant/packages/vant-css/src/button.css';
import 'vant/packages/vant-css/src/checkbox.css';
```
接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
```javascript
module.exports = {
plugins: [
require('postcss-easy-import')({
extensions: ['pcss', 'css']
}),
require('postcss-theme-variables')({
vars: {
red: '#F60',
gray: '#CCC',
blue: '#03A9F4'
},
prefix: '$'
}),
require('precss')(),
require('postcss-calc')(),
require('autoprefixer')({
browsers: ['Android >= 4.0', 'iOS >= 7']
})
]
};
```
### 方案二. 本地构建
可以通过在本地构建 vant-css 的方式生成所需的主题
```bash
# 克隆仓库
git clone git@github.com:youzan/vant.git
cd packages/vant-css
```
在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
```bash
npm run build
```
docs/markdown/zh-CN/toast.md
+74
View File
@@ -0,0 +1,74 @@
## Toast 轻提示
### 使用指南
```javascript
import { Toast } from 'vant';
```
### 代码演示
#### 文字提示
```javascript
Toast('我是提示文案，建议不超过十五字~');
```
#### 加载提示
```javascript
Toast.loading({ mask: true });
```
#### 成功/失败提示
```javascript
Toast.success('成功文案');
Toast.fail('失败文案');
```
#### 高级用法
```javascript
const toast = Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true, // 禁用背景点击
message: '倒计时 3 秒'
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `倒计时 ${second} 秒`;
} else {
clearInterval(timer);
Toast.clear();
}
}, 1000);
```
### 方法
| 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Toast | `options | message` | toast 实例 | 展示提示 |
| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
| Toast.clear | - | `void` | 关闭提示 |
### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
| message | 内容 | `String` | `''` | - |
| position | 位置 | `String` | `middle` | `top` `bottom` |
| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
docs/markdown/zh-CN/tree-select.md
+90
View File
@@ -0,0 +1,90 @@
## TreeSelect 分类选择
### 使用指南
``` javascript
import { TreeSelect } from 'vant';
Vue.component(TreeSelect.name, TreeSelect);
```
### 代码演示
#### 基础用法
```html
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@navclick="onNavClick"
@itemclick="onItemClick"
/>
```
```javascript
export default {
data() {
return {
items: items,
// 左侧高亮元素的index
mainActiveIndex: 0,
// 被选中元素的id
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
this.activeId = data.id;
}
}
}
```
### API
#### 传入参数
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` | - |
| mainActiveIndex | 左侧导航高亮的索引 | `Number` | `0` | - |
| activeId | 右侧选择项，高亮的数据id | `Number` | `0` | - |
#### 事件
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
### 数据格式
#### items 分类显示所需数据的数据结构
`items` 整体为一个数组，数组内包含一系列描述分类的 object。
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
```javascript
[
{
// 导航名称
text: '所有城市',
// 该导航下所有的可选项
children: [
{
// 可选项的名称
text: '温州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1002
},
{
// 可选项的名称
text: '杭州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1001
}
]
}
]
```
docs/markdown/zh-CN/uploader.md
+43
View File
@@ -0,0 +1,43 @@
## Uploader 图片上传
### 使用指南
``` javascript
import { Uploader } from 'vant';
Vue.component(Uploader.name, Uploader);
```
### 代码演示
#### 基础用法
```html
<van-uploader :afterRead="logContent">
<van-icon name="photograph"></van-icon>
</van-uploader>
```
```javascript
export default {
methods: {
logContent(file) {
console.log(file)
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
### Slot
| name | 描述 |
|-----------|-----------|
| - | 自定义上传显示图标 |
docs/markdown/zh-CN/waterfall.md
+80
View File
@@ -0,0 +1,80 @@
## Waterfall 瀑布流
### 使用指南
#### 全局注册
```js
import Vue from 'vue';
import { Waterfall } from 'vant';
Vue.use(Waterfall);
```
#### 局部注册
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
```js
import { Waterfall } from 'vant';
export default {
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
}
};
```
### 代码演示
#### 基础用法
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
```html
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400">
<li v-for="item in list">{{ item }}</li>
</ul>
```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |