blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] add some english documents (#220)

Browse Source 
* [bugfix] Checkbox border render error in weixin browser

* [bugfix] TreeSelect dependency path error

* [bugfix] Swipe should clear autoplay timer when destroyed
This commit is contained in:
neverland 2017-10-18 07:14:25 -05:00 committed by GitHub
parent 10ab0e52c4
commit 14de879a3b
48 changed files with 4710 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
docs/examples-docs/en-US/actionsheet.md Normal file
View File

@ -0,0 +1,165 @@
<script>
export default {
data() {
return {
show1: false,
show2: false,
show3: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
loading: true
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
},
methods: {
handleActionClick(item) {
console.log(item);
}
}
}
</script>
## Actionsheet
### Install
``` javascript
import { Actionsheet } from 'vant';
Vue.component(Actionsheet.name, Actionsheet);
```
### Usage
#### Basic Usage
需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
:::demo Basic Usage
```html
<van-button @click="show1 = true">弹出actionsheet</van-button>
<van-actionsheet v-model="show1" :actions="actions1">
</van-actionsheet>
```
```javascript
export default {
data() {
return {
show1: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
loading: true
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
},
methods: {
handleActionClick(item) {
console.log(item);
}
}
}
```
:::
#### 带取消按钮的 Actionsheet
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
:::demo 带取消按钮的 Actionsheet
```html
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
</van-actionsheet>
```
```javascript
export default {
data() {
return {
show2: false,
actions1: [
{
name: '微信安全支付',
className: 'actionsheet-wx',
callback: this.handleActionClick
},
{
name: '支付宝支付',
loading: true
},
{
name: '信用卡支付'
},
{
name: '其他支付方式'
}
]
};
}
}
```
:::
#### 带标题的 Actionsheet
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
:::demo 带标题的 Actionsheet
```html
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
<p>一些内容</p>
</van-actionsheet>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | |
| title | 标题 | `String` | | |
| cancelText | 取消按钮文案 | `String` | | |
| overlay | 是否显示遮罩 | `Boolean` | | |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
### actions
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | Description |
|-----------|-----------|
| name | 标题 |
| subname | 二级标题 |
| className | 为对应列添加特殊的`class` |
| loading | 是否是`loading`状态 |
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |

142
docs/examples-docs/en-US/address-edit.md Normal file
View File

@ -0,0 +1,142 @@
<script>
import { Toast } from 'packages';
import areaList from '../../mock/area.json';
export default {
data() {
return {
areaList,
searchResult: []
}
},
methods: {
onSave() {
Toast('save');
},
onDelete() {
Toast('delete');
},
onChangeDetail(val) {
if (val) {
this.searchResult = [{
name: '黄龙万科中心',
address: '杭州市西湖区'
}, {
name: '黄龙万科中心H座'
}, {
name: '黄龙万科中心H座',
address: '杭州市西湖区'
}];
} else {
this.searchResult = [];
}
}
}
};
</script>
## AddressEdit
### Install
``` javascript
import { AddressEdit } from 'vant';
Vue.component(AddressEdit.name, AddressEdit);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-address-edit
:area-list="areaList"
:show-postal="true"
:show-set-default="true"
:show-search-result="true"
:search-result="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) 组件。

122
docs/examples-docs/en-US/address-list.md Normal file
View File

@ -0,0 +1,122 @@
<script>
import { Toast } from 'packages';
export default {
data() {
return {
chosenAddressId: '1',
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
},
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号'
}
]
}
},
methods: {
onAdd() {
Toast('新增收货地址');
},
onEdit(item, index) {
Toast('编辑收货地址:' + index);
}
}
}
</script>
## AddressList
### Install
``` javascript
import { AddressList } from 'vant';
Vue.component(AddressList.name, AddressList);
```
### Usage
#### Basic Usage
:::demo 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` |

133
docs/examples-docs/en-US/area.md Normal file
View File

@ -0,0 +1,133 @@
<script>
import AreaList from '../../mock/area.json';
export default {
data() {
return {
areaList: AreaList
}
}
};
</script>
## Area
### Install
``` javascript
import { Area } from 'vant';
Vue.component(Area.name, Area);
```
### Usage
#### Basic Usage
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
:::demo Basic Usage
```html
<van-area :area-list="areaList"></van-area>
<script>
import AreaList from '../../mock/area.json';
export default {
data() {
return {
areaList: AreaList
}
}
};
</script>
```
:::
#### 选中省市县
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
:::demo 选中省市县
```html
<van-area :area-list="areaList" value="110101"></van-area>
```
:::
#### 配置显示列
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
:::demo 配置显示列
```html
<van-area :area-list="areaList" :columns-num="2"></van-area>
```
:::
### 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 | 回调参数 |
|-----------|-----------|-----------|
| 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: '河北区',
// ....
}
}
```
#### 点击完成时返回的Data Structure
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
```javascript
[{
code: '110000',
name: '北京市'
}, {
code: '110100',
name: '北京市'
},{
code: '110101',
name: '东城区'
}]
```

67
docs/examples-docs/en-US/badge.md Normal file
View File

@ -0,0 +1,67 @@
<script>
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onClick(key) {
this.activeKey = key;
}
}
};
</script>
## Badge
### Install
``` javascript
import { Badge } from 'vant';
Vue.component(Badge.name, Badge);
```
### Usage
#### Basic Usage
Use `active-key` prop to set index of chosen 'badge'
:::demo Basic Usage
```html
<van-badge-group :active-key="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 |
|-----------|-----------|-----------|-------------|-------------|
| active-key | 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` | - | - |

89
docs/examples-docs/en-US/button.md Normal file
View File

@ -0,0 +1,89 @@
## Button
### Install
``` javascript
import { Button } from 'vant';
Vue.component(Button.name, Button);
```
### Usage
#### Type
:::demo Type
```html
<van-button type="default">Default</van-button>
<van-button type="primary">Primary</van-button>
<van-button type="danger">Danger</van-button>
```
:::
#### Size
:::demo 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
:::demo Disabled
```html
<van-button disabled>Diabled</van-button>
```
:::
#### Loading
:::demo Loading
```html
<van-button loading></van-button>
<van-button loading type="primary"></van-button>
```
:::
#### Custom Tag
Use `tag` prop to custom button tag
:::demo Custom Tag
```html
<van-button tag="a" href="https://www.youzan.com" target="_blank">
Button
</van-button>
```
:::
#### Action Button
:::demo Action Button
```html
<van-button type="primary" bottom-action>Text</van-button>
<van-row>
<van-col span="12">
<van-button bottom-action>Text</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottom-action>Text</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` | - |

75
docs/examples-docs/en-US/card.md Normal file
View File

@ -0,0 +1,75 @@
<script>
export default {
data() {
return {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
}
}
}
</script>
## Card
### Install
``` javascript
import { Card } from 'vant';
Vue.component(Card.name, Card);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-card
title="Title"
desc="Description"
num="2"
price="2.00"
:thumb="imageURL"
/>
```
:::
#### Advanced Usage
Use `slot` to custom content.
:::demo Advanced Usage
```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 |

39
docs/examples-docs/en-US/cell-swipe.md Normal file
View File

@ -0,0 +1,39 @@
## CellSwipe
### Install
``` javascript
import { CellSwipe } from 'vant';
Vue.component(CellSwipe.name, CellSwipe);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-cell-swipe :right-width="65" :left-width="65">
<span slot="left">选择</span>
<van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell>
</van-cell-group>
<span slot="right">删除</span>
</van-cell-swipe>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | 自定义显示内容 |
| left | 左侧滑动内容 |
| right | 右侧滑动内容 |

105
docs/examples-docs/en-US/cell.md Normal file
View File

@ -0,0 +1,105 @@
<script>
export default {
methods: {
handleClick() {
console.log('cell click');
}
}
};
</script>
## Cell
### Install
``` javascript
import { Cell, CellGroup } from 'vant';
Vue.component(Cell.name, Cell);
Vue.component(CellGroup.name, CellGroup);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-cell-group>
<van-cell title="Title" value="Text"></van-cell>
<van-cell title="Title" value="Text" label="Description"></van-cell>
</van-cell-group>
```
:::
#### Value only
:::demo Value only
```html
<van-cell-group>
<van-cell value="Text"></van-cell>
</van-cell-group>
```
:::
#### Left Icon
:::demo Left Icon
```html
<van-cell-group>
<van-cell title="Title" icon="location"></van-cell>
</van-cell-group>
```
:::
#### Link
:::demo Link
```html
<van-cell-group>
<van-cell title="Title" is-link></van-cell>
<van-cell title="Title" is-link value="Text"></van-cell>
</van-cell-group>
```
:::
#### Advanced Usage
:::demo Advanced Usage
```html
<van-cell-group>
<van-cell value="Text" icon="home" is-link>
<template slot="title">
<span class="van-cell-text">Title</span>
<van-tag type="danger">Tag</van-tag>
</template>
</van-cell>
<van-cell title="Title" icon="location" is-link></van-cell>
<van-cell title="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` | - | - |
| 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 |

237
docs/examples-docs/en-US/contact.md Normal file
View File

@ -0,0 +1,237 @@
<script>
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;
}
}
}
};
</script>
## 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
:::demo Basic Usage
```html
<!-- 联系人卡片 -->
<van-contact-card
:type="cardType"
:name="currentContact.name"
:tel="currentContact.tel"
@click="showList = true"
></van-contact-card>
<!-- 联系人列表 -->
<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
:contact-info="editingContact"
:is-edit="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` |

177
docs/examples-docs/en-US/coupon.md Normal file
View File

@ -0,0 +1,177 @@
<script>
import { Toast } from 'packages';
const coupon = {
available: 1,
discount: 0,
denominations: 150,
origin_condition: 0,
reason: '',
value: 150,
condition: '下单立减 1.50 元',
name: '新手专用优惠券',
start_at: 1489104000,
end_at: 1514592000
};
const discountCoupon = {
...coupon,
discount: 88,
denominations: 0,
origin_condition: 50,
value: 12,
condition: '下单即享 8.8 折',
};
const disabledCoupon = {
...coupon,
avaliable: 0,
reason: '未满足使用门槛'
};
const disabledDiscountCoupon = {
...discountCoupon,
avaliable: 0,
reason: '未满足使用门槛'
};
export default {
data() {
return {
showList: false,
chosenCoupon: -1,
coupons: [coupon, discountCoupon],
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
}
},
methods: {
onChange(index) {
this.showList = false;
this.chosenCoupon = index;
},
onExchange(code) {
Toast('兑换成功');
this.coupons.push(coupon);
}
}
}
</script>
## Coupon
### Install
``` javascript
import { CouponCell, CouponList } from 'vant';
Vue.component(CouponCell.name, CouponCell);
Vue.component(CouponList.name, CouponList);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="chosenCoupon"
@click="showList = true"
></van-coupon-cell>
<!-- 优惠券列表 -->
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
></van-coupon-list>
</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` |

137
docs/examples-docs/en-US/datetime-picker.md Normal file
View File

@ -0,0 +1,137 @@
<script>
export default {
data() {
return {
minHour: 10,
maxHour: 20,
minDate: new Date(),
maxDate: new Date(2019, 10, 1),
currentDate1: new Date(2018, 0, 1),
currentDate2: null,
currentDate3: null
};
},
methods: {
handlePickerChange(picker) {
console.log(picker);
},
handlePickerCancel() {
console.log('picker cancel');
},
handlePickerConfirm() {
console.log('picker confirm');
}
}
};
</script>
## DatetimePicker
### Install
``` javascript
import { DatetimePicker } from 'vant';
Vue.component(DatetimePicker.name, DatetimePicker);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-datetime-picker
v-model="currentDate1"
type="datetime"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
:max-date="maxDate"
@change="handlePickerChange">
</van-datetime-picker>
```
```javascript
export default {
data() {
return {
minHour: 10,
maxHour: 20,
minDate: new Date(),
maxDate: new Date(2019, 10, 1),
currentDate: new Date(2018, 0, 1)
};
},
methods: {
handlePickerChange(picker) {
console.log(picker);
}
}
};
```
:::
#### 选择日期
:::demo 选择日期
```html
<van-datetime-picker
v-model="currentDate2"
type="date"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@change="handlePickerChange">
</van-datetime-picker>
```
:::
#### 选择时间
:::demo 选择时间
```html
<van-datetime-picker
v-model="currentDate3"
type="time"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
@change="handlePickerChange">
</van-datetime-picker>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
| minHour | 可选的最小小时 | Number | 0 | |
| maxHour | 可选的最大小时 | Number | 23 | |
### Event
| Event | Description | 回调参数 |
|-----------|-----------|-----------|
| change | 当值变化时触发的事件 | picker 实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value |
| cancel | 点击取消按钮时触发的事件 | - |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | Description |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |

124
docs/examples-docs/en-US/dialog.md Normal file
View File

@ -0,0 +1,124 @@
<script>
import { Dialog } from 'packages';
const message = '弹窗内容';
export default {
methods: {
onClickAlert() {
Dialog.alert({
title: '标题',
message
});
},
onClickAlert2() {
Dialog.alert({
message
});
},
onClickConfirm() {
Dialog.confirm({
title: '标题',
message
}).catch(action => {
console.log(action);
});
}
}
};
</script>
## Dialog
### Install
```js
import { Dialog } from 'vant';
```
### Usage
#### 消息提示
用于提示一些消息，只包含一个确认按钮
:::demo 消息提示
```html
<van-button @click="onClickAlert">Alert</van-button>
<van-button @click="onClickAlert2">无标题 Alert</van-button>
```
```javascript
export default {
methods: {
onClickAlert() {
Dialog.alert({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on close
});
},
onClickAlert2() {
Dialog.alert({
message: '弹窗内容'
}).then(() => {
// on close
});
}
}
};
```
:::
#### 消息确认
用于确认消息，包含取消和确认按钮
:::demo 消息确认
```html
<van-button @click="onClickConfirm">Confirm</van-button>
```
```javascript
export default {
methods: {
onClickConfirm() {
Dialog.confirm({
title: '标题',
message: '弹窗内容'
}).then(() => {
// on confirm
}).catch(() => {
// on cancel
});
}
}
};
```
:::
### 方法
| 方法名 | Attribute | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
| Dialog.close | - | `void` | 关闭弹窗 |
### Options
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | | |
| message | 内容 | `String` | | |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |

80
docs/examples-docs/en-US/goods-action.md Normal file
View File

@ -0,0 +1,80 @@
<script>
import { Toast } from 'packages';
export default {
methods: {
onClickMiniBtn() {
Toast('点击图标');
},
onClickBigBtn() {
Toast('点击按钮');
}
}
}
</script>
## 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
:::demo
```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` | - |

136
docs/examples-docs/en-US/icon.md Normal file
View File

@ -0,0 +1,136 @@
<script>
import Vue from 'vue';
const icons = [
'close',
'location',
'clock',
'gold-coin',
'chat',
'exchange',
'upgrade',
'edit',
'contact',
'passed',
'points',
'delete',
'records',
'logistics',
'check',
'checked',
'gift',
'like-o',
'like',
'qr',
'qr-invalid',
'shop',
'photograph',
'add',
'add2',
'photo',
'cart',
'arrow',
'search',
'clear',
'success',
'fail',
'wechat',
'alipay',
'password-view',
'wap-nav',
'password-not-view',
'wap-home',
'ecard-pay',
'balance-pay',
'peer-pay',
'credit-pay',
'debit-pay',
'other-pay',
'cart',
'browsing-history',
'goods-collect',
'shop-collect',
'receive-gift',
'send-gift',
'setting',
'coupon',
'free-postage',
'discount',
'birthday-privilege',
'member-day-privilege',
'balance-details',
'cash-back-record',
'points-mall',
'exchange-record',
'pending-payment',
'pending-orders',
'pending-deliver',
'pending-evaluate',
'cash-on-deliver',
'gift-card-pay',
'underway',
'point-gift',
'after-sale',
'edit-data',
'question',
'description',
'card',
'gift-card',
'coupon',
'completed',
'value-card'
];
const IconListConstructor = Vue.extend({
render(h) {
return (
<div>
{icons.map(icon => (
<van-col span="8">
<van-icon name={icon}></van-icon>
<span>{icon}</span>
</van-col>
))}
</div>
)
}
});
export default {
mounted() {
const IconList = new IconListConstructor({
el: document.createElement('div')
});
const block = document.querySelector('.zan-doc-demo-block');
if (block) {
block.appendChild(IconList.$el);
}
}
};
</script>
## Icon
### Install
``` javascript
import { Icon } from 'vant';
Vue.component(Icon.name, Icon);
```
### Usage
#### Basic Usage
View all usable icons on the right.
:::demo Icon List
```html
<van-icon name="success" />
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| name | Icon name | `String` | `''` | - |

52
docs/examples-docs/en-US/image-preview.md Normal file
View File

@ -0,0 +1,52 @@
<script>
import { ImagePreview } from 'packages';
export default {
methods: {
showImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]);
}
}
};
</script>
## ImagePreview
### Install
```js
import { ImagePreview } from 'vant';
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-button @click="showImagePreview">Show</van-button>
```
```javascript
export default {
methods: {
showImagePreview() {
ImagePreview([
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]);
}
}
};
```
:::
### 方法参数
| Attribute | Description | Type |
|-----------|-----------|-----------|
| imageUrls | Image URL list | `Array` |

122
docs/examples-docs/en-US/lazyload.md Normal file
View File

@ -0,0 +1,122 @@
<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
:::demo 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'
]
};
}
}
```
:::
#### Background Image
Use `v-lazy:background-image` to set background url, and declare the height of the container.
:::demo Background Image
```html
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
```
```javascript
export default {
data() {
return {
backgroundImageList: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
}
}
```
:::
#### Lazyload Component
:::demo Lazyload Component
```html
<lazy-component>
<img v-for="img in componentImageList" v-lazy="img">
</lazy-component>
```
```javascript
export default {
data() {
return {
componentImageList: [
'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/2.jpg'
]
};
}
}
```
:::
### 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)

35
docs/examples-docs/en-US/loading.md Normal file
View File

@ -0,0 +1,35 @@
## Loading
### Install
``` javascript
import { Loading } from 'vant';
Vue.component(Loading.name, Loading);
```
### Usage
#### Solid color
:::demo Solid color
```html
<van-loading type="circle" color="black"></van-loading>
<van-loading type="circle" color="white"></van-loading>
```
:::
#### Gradient color
:::demo Gradient color
```html
<van-loading type="gradient-circle" color="black"></van-loading>
<van-loading type="gradient-circle" color="white"></van-loading>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| color | Color | `String` | `black` | `black` `white` |
| type | Type | `String` | `gradient-circle` | `gradient-circle` `circle` |

51
docs/examples-docs/en-US/nav-bar.md Normal file
View File

@ -0,0 +1,51 @@
## NavBar
### Install
``` javascript
import { NavBar } from 'vant';
Vue.component(NavBar.name, NavBar);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-nav-bar
title="Title"
left-text="Back"
right-text="Button"
left-arrow
/>
```
:::
#### Advanced Usage
:::demo Advanced Usage
```html
<van-nav-bar title="Title" left-text="Back" left-arrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | `''` | - |
| left-text | Left Text | `String` | `''` | - |
| right-text | Right Text | `String` | `''` | - |
| left-arrow | 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 |

57
docs/examples-docs/en-US/notice-bar.md Normal file
View File

@ -0,0 +1,57 @@
## NoticeBar
### Install
``` javascript
import { NoticeBar } from 'vant';
Vue.component(NoticeBar.name, NoticeBar);
```
### Usage
#### Basic Usage
:::demo 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." />
```
:::
#### Disable scroll
:::demo 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
:::demo 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 | `40` | - |
| scrollable | Whether to scroll content | Boolean | `true` | - |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| click | Triggered when click notice bar | - |

51
docs/examples-docs/en-US/panel.md Normal file
View File

@ -0,0 +1,51 @@
## Panel
### Install
``` javascript
import { Panel } from 'vant';
Vue.component(Panel.name, Panel);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-panel title="Title" desc="Description" status="Status">
<div>Panel Content</div>
</van-panel>
```
:::
#### Advanced Usage
:::demo Advanced Usage
```html
<van-panel title="Title" desc="Description" status="Status">
<div>Panel 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 |

173
docs/examples-docs/en-US/picker.md Normal file
View File

@ -0,0 +1,173 @@
<script>
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
title: '地区选择',
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
handlePickerCancel() {
alert('picker cancel');
},
handlePickerConfirm() {
alert('picker confirm');
}
}
};
</script>
## Picker
### Install
``` javascript
import { Picker } from 'vant';
Vue.component(Picker.name, Picker);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
```
```javascript
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
};
```
:::
#### 带toolbar的Picker
:::demo 带toolbar的Picker
```html
<van-picker
:title="title"
:columns="pickerColumns"
show-toolbar
@change="handlePickerChange"
@cancel="handlePickerCancel"
@confirm="handlePickerConfirm"
></van-picker>
```
```javascript
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
};
export default {
data() {
return {
title: '地区选择',
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
className: 'column2'
}
]
};
},
methods: {
handlePickerChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
handlePickerCancel() {
alert('picker cancel');
},
handlePickerConfirm() {
alert('picker confirm');
}
}
};
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
| itemHeight | 选中元素区高度 | `Number` | `44` | |
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
| title | 在toolbar上显示的标题文字 | `String` | | |
### columns
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | Description |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | Description |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |

136
docs/examples-docs/en-US/popup.md Normal file
View File

@ -0,0 +1,136 @@
<script>
import Dialog from 'packages/dialog';
export default {
data() {
return {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false,
popupShow5: false
}
},
watch: {
popupShow3(val) {
if (val) {
setTimeout(() => {
this.popupShow3 = false;
}, 2000);
}
}
},
methods: {
showDialog() {
Dialog.confirm({
title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => {
console.log(action);
}, (error) => {
console.log(error);
});
}
}
};
</script>
## Popup
### Install
``` javascript
import { Popup } from 'vant';
Vue.component(Popup.name, Popup);
```
### Usage
#### Basic Usage
`popup`默认情况下是从中间弹出。
:::demo Basic Usage
```html
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
从中间弹出popup
</van-popup>
```
```javascript
export default {
data() {
return {
popupShow1: false
}
}
};
```
:::
#### 从不同位置弹出层
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
:::demo 从不同位置弹出层
```html
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
<van-button @click="showDialog">弹出dialog</van-button>
</van-popup>
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
更新成功
</van-popup>
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
<van-button @click.native="popupShow4 = false">关闭 popup</van-button>
</van-popup>
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
</van-popup>
```
```javascript
export default {
data() {
return {
popupShow1: false,
popupShow2: false,
popupShow3: false,
popupShow4: false
}
},
watch: {
popupShow2(val) {
if (val) {
setTimeout(() => {
this.popupShow2 = false;
}, 2000);
}
}
}
};
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| 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` | - |

56
docs/examples-docs/en-US/progress.md Normal file
View File

@ -0,0 +1,56 @@
## Progress
### Install
``` javascript
import { Progress } from 'vant';
Vue.component(Progress.name, Progress);
```
### Usage
#### Basic Usage
进度条默认为蓝色，使用`percentage`属性来设置当前进度
:::demo Basic Usage
```html
<van-progress :percentage="0"></van-progress>
<van-progress :percentage="46"></van-progress>
<van-progress :percentage="100"></van-progress>
```
:::
#### 进度条置灰
:::demo 进度条置灰
```html
<van-progress inactive :percentage="0"></van-progress>
<van-progress inactive :percentage="46"></van-progress>
<van-progress inactive :percentage="100"></van-progress>
```
:::
#### 样式定制
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
:::demo 样式定制
```html
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | |
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
| pivotText | 文字显示 | `String` | 百分比文字 | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |

93
docs/examples-docs/en-US/pull-refresh.md Normal file
View File

@ -0,0 +1,93 @@
<script>
import { Toast } from 'packages';
export default {
data() {
return {
count: 0,
isLoading: false
}
},
watch: {
isLoading() {
if (this.isLoading) {
setTimeout(() => {
Toast('刷新成功');
this.isLoading = false;
this.count++;
}, 500);
}
}
},
mounted() {
const head = document.querySelector('.van-pull-refresh__head');
head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh 下拉刷新</h1>');
}
}
</script>
## PullRefresh
### Install
``` javascript
import { PullRefresh } from 'vant';
Vue.component(PullRefresh.name, PullRefresh);
```
### Usage
:::demo
```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
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否在加载中 | `Boolean` | - | - |
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
| animationDuration | 动画时长 | `Number` | `300` | - |
| headHeight | 顶部内容高度 | `Number` | `50` | - |
### Slot
| name | Description |
|-----------|-----------|
| - | 自定义内容 |
| normal | 非下拉状态时顶部内容 |
| pulling | 下拉过程中顶部内容 |
| loosing | 释放过程中顶部内容 |
| loading | 加载过程中顶部内容 |

101
docs/examples-docs/en-US/search.md Normal file
View File

@ -0,0 +1,101 @@
<script>
export default {
data() {
return {
search: '',
basicSearch: '',
slotSearch: ''
};
},
methods: {
goSearch() {
alert(this.search);
},
goSlotSearch() {
alert(this.slotSearch);
},
handleCancel() {
alert('cancel');
}
}
};
</script>
## Search
### Install
``` javascript
import { Search } from 'vant';
Vue.component(Search.name, Search);
```
### Usage
#### Basic Usage
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
:::demo Basic Usage
```html
<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search>
```
:::
#### 监听对应事件
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
:::demo 监听对应事件
```html
<form action="/">
<van-search
placeholder="请输入商品名称"
v-model="search"
:show-action="true"
@search="goSearch"
@cancel="handleCancel"></van-search>
</form>
```
:::
#### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
:::demo 自定义行动按钮
```html
<van-search
v-model="slotSearch"
:show-action="true"
@search="goSlotSearch">
<template slot="action">
<div class="demo-search-action" @click="goSlotSearch">搜索</div>
</template>
</van-search>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `String` | | |
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| cancel | 取消搜索 | - |
| search | 确定搜索 | - |
### Slot
| name | Description |
|-----------|-----------|
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |

227
docs/examples-docs/en-US/sku.md Normal file
View File

@ -0,0 +1,227 @@
## Sku
<script>
import data from '../../mock/sku';
const goods = data.goods_info;
goods.picture = goods.picture[0];
export default {
data() {
return {
showBase: false,
showCustomAction: false,
sku: data.sku,
goods: goods,
goodsId: data.goods_id,
quota: data.quota,
quotaUsed: data.quota_used,
disableStepperInput: true,
resetStepperOnHide: true,
initialSku: {
s1: '30349',
s2: '1193'
}
}
},
methods: {
handleBuyClicked(data) {
alert(JSON.stringify(data));
},
handleAddCartClicked(data) {
alert(JSON.stringify(data));
},
handlePointClicked() {
alert('积分兑换');
}
}
}
</script>
### Install
```javascript
import { Sku } from 'vant';
Vue.component(Sku.name, Sku);
```
### Usage
#### Basic Usage
:::demo
```html
<template>
<div class="sku-container">
<van-sku
v-model="showBase"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide"
:disable-stepper-input="disableStepperInput"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
</van-sku>
<van-button type="primary" @click="showBase = true" block>基础用法</van-button>
</d>
</template>
```
:::
#### 自定义sku slot区块
:::demo
```html
<template>
<div class="sku-container">
<van-sku
v-model="showCustomAction"
stepper-title="我要买"
:sku="sku"
:goods="goods"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:show-add-cart-btn="true"
:quota="quota"
:quota-used="quotaUsed"
:reset-stepper-on-hide="true"
:initial-sku="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>
<van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
</d>
</template>
```
:::
### 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，可以按需进行替换。区块顺序见下表：
| 名称 | 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
}
}
```

68
docs/examples-docs/en-US/stepper.md Normal file
View File

@ -0,0 +1,68 @@
<script>
export default {
data() {
return {
stepper1: 1,
stepper2: null,
};
}
};
</script>
## Stepper
### Install
``` javascript
import { Stepper } from 'vant';
Vue.component(Stepper.name, Stepper);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-stepper v-model="stepper1"></van-stepper>
<p class="curr-stepper">当前值：{{ stepper1 }}</p>
```
:::
#### Disabled
通过设置`disabled`属性来禁用 stepper
:::demo 禁用状态
```html
<van-stepper v-model="stepper1" disabled></van-stepper>
```
:::
#### Advanced Usage
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
:::demo Advanced Usage
```html
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| min | 最小值 | `String | Number` | `1` | - |
| max | 最大值 | `String | Number` | - | - |
| defaultValue | Default | `String | Number` | `1` | - |
| step | 步数 | `String | Number` | `1` | - |
| disabled | 是否禁用 | `Boolean` | `false` | - |
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
### Event
| Event | Description | 回调参数 |
|-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
| overlimit | 点击不可用的按钮时触发 | - |

137
docs/examples-docs/en-US/steps.md Normal file
View File

@ -0,0 +1,137 @@
<script>
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
this.active = ++this.active % 4;
}
}
}
</script>
## Steps
### Install
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-steps :active="active">
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
<van-button @click="nextStep">下一步</van-button>
```
```javascript
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
this.active = ++this.active % 4;
}
}
}
```
:::
#### 物流描述
通过`title`和`description`属性来定义物流描述信息
:::demo 物流描述
```html
<van-steps
:active="active"
icon="logistics"
icon-class="steps-success"
title="等待商家发货"
description="物流描述"
>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
:::
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式
:::demo 竖向步骤条
```html
<van-steps direction="vertical" :active="0" active-color="#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>
```
:::
### #### Advanced Usage
使用`slot`增加自定义内容
:::demo Advanced Usage
```html
<van-steps :active="active" title="等待商家发货">
<van-icon slot="icon" name="location"></van-icon>
<p slot="message-extra">物流进度</p>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
:::
### Steps API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | | |
| icon | 当前步骤的icon | `String` | | |
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
| title | 当前步骤从标题 | `String` | | |
| description | 当前步骤描述 | `String` | | |
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | |
### Steps Slot
| 名称 | Description |
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |

115
docs/examples-docs/en-US/submit-bar.md Normal file
View File

@ -0,0 +1,115 @@
## 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
:::demo Basic Usage
```html
<van-submit-bar
:price="3050"
button-text="提交订单"
@submit="onClickButton"
/>
```
:::
#### Disabled
禁用状态下不会触发`submit`事件
:::demo 禁用状态
```html
<van-submit-bar
disabled
:price="3050"
button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
@submit="onClickButton"
/>
```
:::
#### Loading
加载状态下不会触发`submit`事件
:::demo 加载状态
```html
<van-submit-bar
loading
:price="3050"
button-text="提交订单"
@submit="onClickButton"
/>
```
:::
####
提示文案中的额外操作和说明
:::demo 提示文案中添加操作
```html
<van-submit-bar
:price="3050"
button-text="提交订单"
@submit="onClickButton"
>
<span slot="tip">
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
</span>
</van-submit-bar>
```
:::
### API
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | | 是 |
| button-text | 按钮文字 | `String` | | 是 |
| button-type | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| submit | 按钮点击事件回调 | - |
### Slot
| 名称 | Description |
|-----------|-----------|
| tip | 提示文案中的额外操作和说明 |

80
docs/examples-docs/en-US/swipe.md Normal file
View File

@ -0,0 +1,80 @@
<script>
export default {
data() {
return {
images: [
'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'
]
};
}
};
</script>
## Swipe
### Install
``` javascript
import { Swipe, SwipeItem } from 'vant';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
### Usage
#### Basic Usage
通过`autoplay`属性设置自动轮播间隔
:::demo Basic Usage
```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) 组件实现图片懒加载
:::demo 图片懒加载
```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 | 自动轮播间隔，单位为 ms | `Number` | - | - |
| duration | 动画时长，单位为 ms | `Number` | `500` | - |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
### 事件
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 |

79
docs/examples-docs/en-US/switch-cell.md Normal file
View File

@ -0,0 +1,79 @@
## SwitchCell
`SwitchCell`组件是对`Switch`和`Cell`组件的封装
<script>
export default {
data() {
return {
checked: true
}
}
}
</script>
### Install
``` javascript
import { SwitchCell } from 'vant';
Vue.component(SwitchCell.name, SwitchCell);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-cell-group>
<van-switch-cell v-model="checked" title="标题" />
</van-cell-group>
```
```javascript
export default {
data() {
return {
checked: true
}
}
}
```
:::
#### Disabled
通过`disabled`属性可以将组件设置为禁用状态
:::demo 禁用状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" :disabled="true" title="标题" />
</van-cell-group>
```
:::
#### Loading
通过`loading`属性可以将组件设置为加载状态
:::demo 加载状态
```html
<van-cell-group>
<van-switch-cell v-model="checked" :loading="true" title="标题" />
</van-cell-group>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | | |
| title | 左侧标题 | `String` | `''` | |
| loading | 是否为加载状态 | `Boolean` | `false` | |
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 |

230
docs/examples-docs/en-US/tab.md Normal file
View File

@ -0,0 +1,230 @@
<script>
export default {
data() {
return {
active: 2
};
},
mounted() {
setTimeout(() => {
this.active = 3;
}, 1000);
},
methods: {
popalert() {
alert('haha')
},
handleTabClick(index) {
alert(index);
}
}
};
</script>
## Tab
### Install
``` javascript
import { Tab, Tabs } from 'vant';
Vue.component(Tab.name, Tab);
Vue.component(Tabs.name, Tabs);
```
### Usage
#### Basic Usage
默认情况下是启用第一个`tab`。
:::demo Basic Usage
```html
<van-tabs>
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
</van-tabs>
```
:::
#### active特定tab
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
:::demo Basic Usage
```html
<van-tabs :active="active">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
</van-tabs>
```
:::
#### 设置切换tab的动画时间
通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
:::demo 设置切换tab的动画时间
```html
<van-tabs :duration="0.6">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
</van-tabs>
```
:::
#### 横向滚动tab
默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
:::demo 横向滚动tab
```html
<van-tabs>
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
<van-tab title="选项五">内容五</van-tab>
<van-tab title="选项六">内容六</van-tab>
<van-tab title="选项七">内容七</van-tab>
<van-tab title="选项八">内容八</van-tab>
</van-tabs>
```
:::
#### 禁用tab
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
:::demo 禁用tab
```html
<van-tabs>
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
popalert() {
alert('haha')
}
}
};
```
:::
#### card样式
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
:::demo card样式
```html
<van-tabs type="card">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
</van-tabs>
```
:::
<style>
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
</style>
#### 自定义样式
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
:::demo 自定义样式
```html
<van-tabs active="2" class="custom-tabwrap">
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
</van-tabs>
<style>
.custom-tabwrap .van-tab-active {
color: #20a0ff;
}
.custom-tabwrap .van-tabs-nav-bar {
background: #20a0ff;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
</style>
```
:::
#### click事件
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
:::demo click事件
```html
<van-tabs @click="handleTabClick">
<van-tab title="选项一">内容一</van-tab>
<van-tab title="选项二">内容二</van-tab>
<van-tab title="选项三">内容三</van-tab>
<van-tab title="选项四">内容四</van-tab>
</van-tabs>
```
```javascript
export default {
methods: {
handleTabClick(index) {
alert(index);
}
}
};
```
:::
### van-tabs API
| Attribute | Description | Type | Default | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| classtype | 两种UI | `String` | `line` | `line`, `card` |
| active | 默认激活的tab | `String`, `Number` | `0` | |
| navclass | tabs的内部nav上的自定义classname | `String` | | |
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
### van-tab API
| Attribute | Description | Type | Default | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `String` | | |
| disabled | 是否禁用这个tab | `Boolean` | `false` | |
### van-tabs Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |

98
docs/examples-docs/en-US/tabbar.md Normal file
View File

@ -0,0 +1,98 @@
## Tabbar
<script>
export default {
data() {
return {
active: 0,
active2: 0,
icon: {
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
}
}
}
}
</script>
### Install
``` javascript
import { Tabbar, TabbarItem } from 'vant';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabbarItem.name, TabbarItem);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```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">标签</van-tabbar-item>
<van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
</van-tabbar>
```
```javascript
export default {
data() {
return {
active: 0
}
}
}
```
:::
#### 自定义图标
通过 icon slot 自定义图标
:::demo 自定义图标
```html
<van-tabbar v-model="active2">
<van-tabbar-item icon="shop">
<span>自定义</span>
<img slot="icon" :src="active2 === 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 {
active2: 0,
icon: {
normal: '//img.yzcdn.cn/1.png',
active: '//img.yzcdn.cn/2.png'
}
}
}
}
```
:::
### Tabbar API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中标签的索引 | `Number` | - | - |
### Tabbar Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| change | 切换标签时触发 | active: 当前选中标签 |
### TabbarItem API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
| dot | 是否显示小红点 | `Boolean` | - | - |

59
docs/examples-docs/en-US/tag.md Normal file
View File

@ -0,0 +1,59 @@
## Tag
### Install
``` javascript
import { Tag } from 'vant';
Vue.component(Tag.name, Tag);
```
### Usage
#### Basic Usage
通过 type 属性控制 Tag 颜色，默认为灰色
:::demo Basic Usage
```html
<van-tag>标签</van-tag>
<van-tag type="danger">标签</van-tag>
<van-tag type="success">标签</van-tag>
<van-tag type="primary">标签</van-tag>
```
:::
#### 空心样式
设置`plain`属性设置为空心样式
:::demo 空心样式
```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`设置为标记样式
:::demo 标记样式
```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
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | |
| mark | 是否为标记样式 | `Boolean` | `false` | |
### Slot
| name | Description |
|-----------|-----------|
| - | 自定义 Tag 显示内容 |

158
docs/examples-docs/en-US/toast.md Normal file
View File

@ -0,0 +1,158 @@
<script>
import { Toast } from 'packages';
export default {
methods: {
showToast() {
Toast('我是提示文案，建议不超过十五字~');
},
showLoadingToast() {
Toast.loading();
},
showSuccessToast() {
Toast.success('成功文案');
},
showFailToast() {
Toast.fail('失败文案');
},
showCustomizedToast(duration) {
const toast = Toast.loading({
duration: 0,
forbidClick: true,
message: '倒计时 3 秒'
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `倒计时 ${second} 秒`;
} else {
clearInterval(timer);
Toast.clear();
}
}, 1000);
}
}
};
</script>
## Toast
### Install
```javascript
import { Toast } from 'vant';
```
### Usage
#### 文字提示
:::demo 文字提示
```html
<van-button @click="showToast">文字提示</van-button>
```
```javascript
export default {
methods: {
showToast() {
Toast('我是提示文案，建议不超过十五字~');
}
}
}
```
:::
#### 加载提示
:::demo 加载提示
```html
<van-button @click="showLoadingToast">加载提示</van-button>
```
```javascript
export default {
methods: {
showLoadingToast() {
Toast.loading();
}
}
}
```
:::
#### 成功/失败提示
:::demo 成功/失败提示
```html
<van-button @click="showSuccessToast">成功提示</van-button>
<van-button @click="showFailToast">失败提示</van-button>
```
```javascript
export default {
methods: {
showSuccessToast() {
Toast.success('成功文案');
},
showFailToast() {
Toast.fail('失败文案');
}
}
}
```
:::
#### Advanced Usage
:::demo Advanced Usage
```html
<van-button @click="showCustomizedToast">#### Advanced Usage</van-button>
```
```javascript
export default {
methods: {
showCustomizedToast() {
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);
}
}
};
```
:::
### 方法
| 方法名 | Attribute | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------|
| Toast | `options | message` | toast 实例 | 展示提示 |
| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
| Toast.clear | - | `void` | 关闭提示 |
### Options
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
| message | 内容 | `String` | `''` | - |
| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |

168
docs/examples-docs/en-US/tree-select.md Normal file
View File

@ -0,0 +1,168 @@
<script>
export default {
data() {
return {
items: [{
text: '所有城市',
children: [{
text: '杭州',
id: 1001
}, {
text: '温州',
id: 1002
}, {
text: '海南',
id: 1100
}, {
text: '宁波',
id: 1003
}, {
text: '义乌',
id: 1004
}, {
text: '无锡',
id: 1011
}, {
text: '常州',
id: 1012
}, {
text: '大连',
id: 1031
}, {
text: '诸暨',
id: 1005
}]
}, {
text: '浙江',
children: [{
text: '杭州',
id: 1001
}, {
text: '温州',
id: 1002
}, {
text: '宁波',
id: 1003
}, {
text: '义乌',
id: 1004
}]
}, {
text: '江苏',
children: [{
text: '无锡',
id: 1011
}, {
text: '常州',
id: 1012
}]
}],
mainActiveIndex: 0,
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
console.log(data);
this.activeId = data.id;
}
}
}
</script>
## TreeSelect
### Install
``` javascript
import { TreeSelect } from 'vant';
Vue.component(TreeSelect.name, TreeSelect);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<van-tree-select
:items="items"
:main-active-index="mainActiveIndex"
:active-id="activeId"
@navclick="onNavClick"
@itemclick="onItemClick"
></van-tree-select>
```
```javascript
export default {
data() {
return {
items: items,
// 左侧高亮元素的index
mainActiveIndex: 0,
// 被选中元素的id
activeId: 1001
};
},
methods: {
onNavClick(index) {
this.mainActiveIndex = index;
},
onItemClick(data) {
console.log(data);
this.activeId = data.id;
}
}
}
```
:::
### API
#### 传入参数
| Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
| activeId | 右侧选择项，高亮的数据id | Number | 0 | |
#### 事件
| Event | Description | Attribute |
|-----------|-----------|-----------|
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |
### Data Structure
#### items 分类显示所需数据的数据结构
`items` 整体为一个数组，数组内包含一系列描述分类的 object。
每个分类里，text表示当前分类的名称。children 表示分类里的可选项，为数组结构，id被用来唯一标识每个选项
```javascript
[
{
// 导航名称
text: '所有城市',
// 该导航下所有的可选项
children: [
{
// 可选项的名称
text: '温州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1002
},
{
// 可选项的名称
text: '杭州',
// 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
id: 1001
}
]
}
]
```

57
docs/examples-docs/en-US/uploader.md Normal file
View File

@ -0,0 +1,57 @@
<script>
export default {
methods: {
logContent(file) {
console.log(file)
}
}
};
</script>
## Uploader
### Install
``` javascript
import { Uploader } from 'vant';
Vue.component(Uploader.name, Uploader);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
<div class="uploader-container">
<van-uploader :after-read="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 | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
### Slot
| name | Description |
|-----------|-----------|
| - | 自定义上传显示图标 |

121
docs/examples-docs/en-US/waterfall.md Normal file
View File

@ -0,0 +1,121 @@
## Waterfall
### Install
#### 全局注册
`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')
}
};
```
### Usage
<script>
import { Waterfall } from 'packages';
export default {
data() {
return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
loading: false,
finished: false
};
},
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
},
methods: {
loadMore() {
if (this.list.length >= 50) {
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i ++) {
lastNumber += 1;
this.list.push(lastNumber);
}
this.loading = false;
}, 200);
}
},
computed: {
isWaterfallDisabled() {
return this.loading || this.finished;
}
}
};
</script>
<style>
.demo-waterfall {
ul {
max-height: 360px;
overflow: scroll;
border-top: 1px solid #e5e5e5;
}
li {
line-height: 50px;
border-bottom: 1px solid #e5e5e5;
background: #fff;
text-align: center;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: #666;
}
}
</style>
#### Basic Usage
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
:::demo Basic Usage
```html
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="isWaterfallDisabled"
waterfall-offset="400">
<li v-for="(item, index) in list">{{ item }}</li>
</ul>
```
:::
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |

5
docs/examples-docs/zh-CN/image-preview.md
View File

@ -4,6 +4,11 @@
margin-left: 15px; margin-left: 15px;
} }
} }
.van-image-preview {
img {
pointer-events: none;
}
}
</style> </style>
<script> <script>

5
docs/examples-docs/zh-CN/lazyload.md
View File

@ -15,6 +15,11 @@
background-repeat: no-repeat; background-repeat: no-repeat;
box-sizing: border-box; box-sizing: border-box;
} }
.zan-doc-demo-block__title,
.zan-doc-demo-block__subtitle {
padding-left: 0;
}
} }
</style> </style>

484
docs/src/doc.config.js
View File

@ -1,6 +1,6 @@
/* eslint-disable */ /* eslint-disable */
module.exports = { module.exports = {
"zh-CN": { 'zh-CN': {
header: { header: {
Github: 'https://github.com/youzan/vant', Github: 'https://github.com/youzan/vant',
English: '#/en-US/' English: '#/en-US/'
@ -8,30 +8,31 @@ module.exports = {
footer: { footer: {
github: 'https://github.com/youzan/vant', github: 'https://github.com/youzan/vant',
nav: { nav: {
'React': 'https://www.youzanyun.com/zanui/react', React: 'https://www.youzanyun.com/zanui/react',
'微信小程序': 'https://github.com/youzan/zanui-weapp', 微信小程序: 'https://github.com/youzan/zanui-weapp',
'意见反馈': 'https://github.com/youzan/vant/issues', 意见反馈: 'https://github.com/youzan/vant/issues',
'开发指南': 'https://github.com/youzan/vant/blob/dev/docs/examples-docs/zh-CN/contribute.md' 开发指南:
'https://github.com/youzan/vant/blob/dev/docs/examples-docs/zh-CN/contribute.md'
} }
}, },
nav: [ nav: [
{ {
"name": "开发指南", name: '开发指南',
"groups": [ groups: [
{ {
"list": [ list: [
{ {
"path": "/quickstart", path: '/quickstart',
"title": "快速上手", title: '快速上手',
noExample: true noExample: true
}, },
{ {
"title": "业务组件", title: '业务组件',
"link": "/zanui/captain/component/quickstart" link: '/zanui/captain/component/quickstart'
}, },
{ {
"path": "/changelog", path: '/changelog',
"title": "更新日志", title: '更新日志',
noExample: true noExample: true
} }
] ]
@ -39,215 +40,215 @@ module.exports = {
] ]
}, },
{ {
"name": "组件", name: '组件',
"showInMobile": true, showInMobile: true,
"groups": [ groups: [
{ {
"groupName": "基础组件", groupName: '基础组件',
"list": [ list: [
{ {
"path": "/layout", path: '/layout',
"title": "Layout - 布局" title: 'Layout - 布局'
}, },
{ {
"path": "/badge", path: '/badge',
"title": "Badge - 徽章" title: 'Badge - 徽章'
}, },
{ {
"path": "/button", path: '/button',
"title": "Button - 按钮" title: 'Button - 按钮'
}, },
{ {
"path": "/card", path: '/card',
"title": "Card - 卡片" title: 'Card - 卡片'
}, },
{ {
"path": "/cell", path: '/cell',
"title": "Cell - 单元格" title: 'Cell - 单元格'
}, },
{ {
"path": "/icon", path: '/icon',
"title": "Icon - 图标" title: 'Icon - 图标'
}, },
{ {
"path": "/image-preview", path: '/image-preview',
"title": "ImagePreview - 图片预览" title: 'ImagePreview - 图片预览'
}, },
{ {
"path": "/lazyload", path: '/lazyload',
"title": "Lazyload - 图片懒加载" title: 'Lazyload - 图片懒加载'
}, },
{ {
"path": "/loading", path: '/loading',
"title": "Loading - 加载" title: 'Loading - 加载'
}, },
{ {
"path": "/nav-bar", path: '/nav-bar',
"title": "NavBar - 导航栏" title: 'NavBar - 导航栏'
}, },
{ {
"path": "/notice-bar", path: '/notice-bar',
"title": "NoticeBar - 通告栏" title: 'NoticeBar - 通告栏'
}, },
{ {
"path": "/panel", path: '/panel',
"title": "Panel - 面板" title: 'Panel - 面板'
}, },
{ {
"path": "/popup", path: '/popup',
"title": "Popup - 弹出层" title: 'Popup - 弹出层'
}, },
{ {
"path": "/progress", path: '/progress',
"title": "Progress - 进度条" title: 'Progress - 进度条'
}, },
{ {
"path": "/search", path: '/search',
"title": "Search - 搜索" title: 'Search - 搜索'
}, },
{ {
"path": "/stepper", path: '/stepper',
"title": "Stepper - 步进器" title: 'Stepper - 步进器'
}, },
{ {
"path": "/steps", path: '/steps',
"title": "Steps - 步骤条" title: 'Steps - 步骤条'
}, },
{ {
"path": "/swipe", path: '/swipe',
"title": "Swipe - 轮播" title: 'Swipe - 轮播'
}, },
{ {
"path": "/tab", path: '/tab',
"title": "Tab - 标签页" title: 'Tab - 标签页'
}, },
{ {
"path": "/tabbar", path: '/tabbar',
"title": "Tabbar - 标签栏" title: 'Tabbar - 标签栏'
}, },
{ {
"path": "/tag", path: '/tag',
"title": "Tag - 标记" title: 'Tag - 标记'
}, },
{ {
"path": "/waterfall", path: '/waterfall',
"title": "Waterfall - 瀑布流" title: 'Waterfall - 瀑布流'
} }
] ]
}, },
{ {
"groupName": "表单", groupName: '表单',
"list": [ list: [
{ {
"path": "/checkbox", path: '/checkbox',
"title": "Checkbox - 复选框" title: 'Checkbox - 复选框'
}, },
{ {
"path": "/field", path: '/field',
"title": "Field - 输入框" title: 'Field - 输入框'
}, },
{ {
"path": "/number-keyboard", path: '/number-keyboard',
"title": "NumberKeyboard - 数字键盘" title: 'NumberKeyboard - 数字键盘'
}, },
{ {
"path": "/password-input", path: '/password-input',
"title": "PasswordInput - 密码输入框" title: 'PasswordInput - 密码输入框'
}, },
{ {
"path": "/radio", path: '/radio',
"title": "Radio - 单选框" title: 'Radio - 单选框'
}, },
{ {
"path": "/switch", path: '/switch',
"title": "Switch - 开关" title: 'Switch - 开关'
}, },
{ {
"path": "/uploader", path: '/uploader',
"title": "Uploader - 图片上传" title: 'Uploader - 图片上传'
} }
] ]
}, },
{ {
"groupName": "操作反馈", groupName: '操作反馈',
"list": [ list: [
{ {
"path": "/actionsheet", path: '/actionsheet',
"title": "Actionsheet - 行动按钮" title: 'Actionsheet - 行动按钮'
}, },
{ {
"path": "/datetime-picker", path: '/datetime-picker',
"title": "DatetimePicker - 时间选择" title: 'DatetimePicker - 时间选择'
}, },
{ {
"path": "/dialog", path: '/dialog',
"title": "Dialog - 弹出框" title: 'Dialog - 弹出框'
}, },
{ {
"path": "/picker", path: '/picker',
"title": "Picker - 选择器" title: 'Picker - 选择器'
}, },
{ {
"path": "/pull-refresh", path: '/pull-refresh',
"title": "PullRefresh - 下拉刷新" title: 'PullRefresh - 下拉刷新'
}, },
{ {
"path": "/toast", path: '/toast',
"title": "Toast - 轻提示" title: 'Toast - 轻提示'
} }
] ]
}, },
{ {
"groupName": "高阶组件", groupName: '高阶组件',
"list": [ list: [
{ {
"path": "/cell-swipe", path: '/cell-swipe',
"title": "CellSwipe - 滑动单元格" title: 'CellSwipe - 滑动单元格'
}, },
{ {
"path": "/switch-cell", path: '/switch-cell',
"title": "SwitchCell - 开关单元格" title: 'SwitchCell - 开关单元格'
}, },
{ {
"path": "/tree-select", path: '/tree-select',
"title": "TreeSelect - 分类选择" title: 'TreeSelect - 分类选择'
}, }
] ]
}, },
{ {
"groupName": "业务组件", groupName: '业务组件',
"list": [ list: [
{ {
"path": "/address-edit", path: '/address-edit',
"title": "AddressEdit - 地址编辑" title: 'AddressEdit - 地址编辑'
}, },
{ {
"path": "/address-list", path: '/address-list',
"title": "AddressList - 地址列表" title: 'AddressList - 地址列表'
}, },
{ {
"path": "/area", path: '/area',
"title": "Area - 省市区选择" title: 'Area - 省市区选择'
}, },
{ {
"path": "/contact", path: '/contact',
"title": "Contact - 联系人" title: 'Contact - 联系人'
}, },
{ {
"path": "/coupon", path: '/coupon',
"title": "Coupon - 优惠券选择器" title: 'Coupon - 优惠券选择器'
}, },
{ {
"path": "/goods-action", path: '/goods-action',
"title": "GoodsAction - 商品页行动点" title: 'GoodsAction - 商品页行动点'
}, },
{ {
"path": "/submit-bar", path: '/submit-bar',
"title": "SubmitBar - 提交订单栏" title: 'SubmitBar - 提交订单栏'
}, },
{ {
"path": "/sku", path: '/sku',
"title": "Sku - 商品规格弹层" title: 'Sku - 商品规格弹层'
} }
] ]
} }
@ -255,85 +256,256 @@ module.exports = {
} }
] ]
}, },
"en-US": { 'en-US': {
header: { header: {
Github: 'https://github.com/youzan/vant', Github: 'https://github.com/youzan/vant',
'中文': '#/zh-CN' 中文: '#/zh-CN'
}, },
footer: { footer: {
github: 'https://github.com/youzan/vant', github: 'https://github.com/youzan/vant',
nav: { nav: {
'React': 'https://www.youzanyun.com/zanui/react', React: 'https://www.youzanyun.com/zanui/react',
'Weapp': 'https://github.com/youzan/zanui-weapp', Weapp: 'https://github.com/youzan/zanui-weapp',
'Feedback': 'https://github.com/youzan/vant/issues', Feedback: 'https://github.com/youzan/vant/issues',
'Contribute': 'https://github.com/youzan/vant/blob/dev/docs/examples-docs/en-US/contribute.md' Contribute:
'https://github.com/youzan/vant/blob/dev/docs/examples-docs/en-US/contribute.md'
} }
}, },
nav: [ nav: [
{ {
"name": "Essentials", name: 'Essentials',
"groups": [ groups: [
{ {
"list": [ list: [
{ {
"path": "/quickstart", path: '/quickstart',
"title": "Getting Started", title: 'Getting Started',
noExample: true noExample: true
}, },
{ {
"path": "/changelog", path: '/changelog',
"title": "Changelog", title: 'Changelog',
noExample: true noExample: true
} }
] ]
} }
] ]
}, },
// translation needed
{ {
"name": "Components", name: 'Components',
"showInMobile": true, showInMobile: true,
"groups": [ groups: [
{ {
"groupName": "Base Components", groupName: 'Basic Components',
"list": [ list: [
{ {
"path": "/layout", path: '/layout',
"title": "Layout" title: 'Layout'
},
{
path: '/badge',
title: 'Badge'
},
{
path: '/button',
title: 'Button'
},
{
path: '/card',
title: 'Card'
},
{
path: '/cell',
title: 'Cell'
},
{
path: '/icon',
title: 'Icon'
},
{
path: '/image-preview',
title: 'ImagePreview'
},
{
path: '/lazyload',
title: 'Lazyload'
},
{
path: '/loading',
title: 'Loading'
},
{
path: '/nav-bar',
title: 'NavBar'
},
{
path: '/notice-bar',
title: 'NoticeBar'
},
{
path: '/panel',
title: 'Panel'
},
{
path: '/popup',
title: 'Popup'
},
{
path: '/progress',
title: 'Progress'
},
{
path: '/search',
title: 'Search'
},
{
path: '/stepper',
title: 'Stepper'
},
{
path: '/steps',
title: 'Steps'
},
{
path: '/swipe',
title: 'Swipe'
},
{
path: '/tab',
title: 'Tab'
},
{
path: '/tabbar',
title: 'Tabbar'
},
{
path: '/tag',
title: 'Tag'
},
{
path: '/waterfall',
title: 'Waterfall'
} }
] ]
}, },
{ {
"groupName": "Form", groupName: 'Form Components',
"list": [ list: [
{ {
"path": "/checkbox", path: '/checkbox',
"title": "Checkbox" title: 'Checkbox'
}, },
{ {
"path": "/field", path: '/field',
"title": "Field" title: 'Field'
}, },
{ {
"path": "/number-keyboard", path: '/number-keyboard',
"title": "NumberKeyboard" title: 'NumberKeyboard'
}, },
{ {
"path": "/password-input", path: '/password-input',
"title": "PasswordInput" title: 'PasswordInput'
}, },
{ {
"path": "/radio", path: '/radio',
"title": "Radio" title: 'Radio'
}, },
{ {
"path": "/switch", path: '/switch',
"title": "Switch" title: 'Switch'
},
{
path: '/uploader',
title: 'Uploader'
} }
] ]
}, },
{
groupName: 'Action Components',
list: [
{
path: '/actionsheet',
title: 'Actionsheet'
},
{
path: '/datetime-picker',
title: 'DatetimePicker'
},
{
path: '/dialog',
title: 'Dialog'
},
{
path: '/picker',
title: 'Picker'
},
{
path: '/pull-refresh',
title: 'PullRefresh'
},
{
path: '/toast',
title: 'Toast'
}
]
},
{
groupName: 'Advanced Components',
list: [
{
path: '/cell-swipe',
title: 'CellSwipe'
},
{
path: '/switch-cell',
title: 'SwitchCell'
},
{
path: '/tree-select',
title: 'TreeSelect'
}
]
},
{
groupName: 'Business Components',
list: [
{
path: '/address-edit',
title: 'AddressEdit'
},
{
path: '/address-list',
title: 'AddressList'
},
{
path: '/area',
title: 'Area'
},
{
path: '/contact',
title: 'Contact'
},
{
path: '/coupon',
title: 'Coupon'
},
{
path: '/goods-action',
title: 'GoodsAction'
},
{
path: '/submit-bar',
title: 'SubmitBar'
},
{
path: '/sku',
title: 'Sku'
}
]
}
] ]
} }
] ]
} }
} };