[Improvement] Reorganize document (#1066)
This commit is contained in:
neverland
@@ -1,89 +0,0 @@
|
||||
## Actionsheet
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Actionsheet } from 'vant';
|
||||
|
||||
Vue.use(Actionsheet);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `actions` prop to set options of actionsheet.
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" :actions="actions" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{
|
||||
name: 'Option',
|
||||
callback: this.onClick
|
||||
},
|
||||
{
|
||||
name: 'Option',
|
||||
description: 'Description'
|
||||
},
|
||||
{
|
||||
name: 'Option',
|
||||
loading: true
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Actionsheet with cancel button
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" :actions="actions" cancel-text="Cancel" />
|
||||
```
|
||||
|
||||
#### Actionsheet with title
|
||||
Actionsheet will get another style if there is a `title` prop.
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" title="Title">
|
||||
<p>Content</p>
|
||||
</van-actionsheet>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| actions | Options | `Array` | `[]` |
|
||||
| title | Title | `String` | - |
|
||||
| cancel-text | Text of cancel button | `String` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | - |
|
||||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | - |
|
||||
| get-container | Return the mount node for actionsheet | `() => HTMLElement` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| cancel | Triggered when cancel click | - |
|
||||
|
||||
### Data struct of actions
|
||||
|
||||
| key | Description |
|
||||
|-----------|-----------|
|
||||
| name | Title |
|
||||
| subname | Subtitle |
|
||||
| className | className for the option |
|
||||
| loading | Whether to be loading status |
|
||||
| callback | Triggered when click option |
|
||||
@@ -1,116 +0,0 @@
|
||||
## AddressEdit
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { AddressEdit } from 'vant';
|
||||
|
||||
Vue.use(AddressEdit);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
show-postal
|
||||
show-delete
|
||||
show-set-default
|
||||
show-search-result
|
||||
: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 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| area-list | Area List | `Object` | - |
|
||||
| address-info | Address Info | `Object` | `{}` |
|
||||
| search-result | Address search result | `Array` | `[]` |
|
||||
| show-postal | Whether to show postal field | `Boolean` | `false` |
|
||||
| show-delete | Whether to show delete button | `Boolean` | `false` |
|
||||
| show-set-default | Whether to show default address switch | `Boolean` | `false` |
|
||||
| show-search-result | Whether to show address search result | `Boolean` | `false` |
|
||||
| is-saving | Whether to show save button loading status | `Boolean` | `false` |
|
||||
| is-deleting | Whether to show delete button loading status | `Boolean` | `false` |
|
||||
| tel-validator | The method to validate tel | `(tel: string) => boolean` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| save | Triggered when click save button | content：form content |
|
||||
| focus | Triggered when focus field | key: filed name |
|
||||
| delete | Triggered when confirm delete | content：form content |
|
||||
| cancel-delete | Triggered when cancel delete | content：form content |
|
||||
| select-search | Triggered when select search result | value: search content |
|
||||
| change-area | Triggered when change area | values: area values |
|
||||
| change-detail | Triggered when address detail changed | value: address detail |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Custom content below postal |
|
||||
|
||||
### Data Structure
|
||||
|
||||
#### addressInfo Data Structure
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | Address Id | `String | Number` |
|
||||
| name | Name | `String` |
|
||||
| tel | Phone | `String` |
|
||||
| province | Province | `String` |
|
||||
| city | City | `String` |
|
||||
| county | County | `String` |
|
||||
| address_detail | Detailed Address | `String` |
|
||||
| area_code | Area code | `String` |
|
||||
| postal_code | Postal code | `String` |
|
||||
| is_default | Is default address | `Boolean` |
|
||||
|
||||
#### searchResult Data Structure
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| name | Name | `String` |
|
||||
| address | Address | `String` |
|
||||
|
||||
#### Area Data Structure
|
||||
Please refer to [Area](#/en-US/area) component。
|
||||
@@ -1,79 +0,0 @@
|
||||
## AddressList
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { AddressList } from 'vant';
|
||||
|
||||
Vue.use(AddressList);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: 'Somewhere'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Ned Stark',
|
||||
tel: '1310000000',
|
||||
address: 'Somewhere'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('Add');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('Edit:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Id of chosen address | String | - |
|
||||
| list | Address list | Array | `[]` |
|
||||
| add-button-text | Add button text | String | `Add new address` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| add | Triggered when click add button | - |
|
||||
| edit | Triggered when click edit button | item: address object，index |
|
||||
| select | Triggered when select address | item: address object，index |
|
||||
|
||||
### Address Data Structure
|
||||
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | Id | `String | Number` |
|
||||
| name | Name | `String` |
|
||||
| tel | Phone | `String` |
|
||||
| address | Address | `String` |
|
||||
@@ -1,108 +0,0 @@
|
||||
## Area
|
||||
The Picker component is usually used with [Popup](#/en-US/popup) Component.
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Area } from 'vant';
|
||||
|
||||
Vue.use(Area);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
```
|
||||
|
||||
#### Initial Value
|
||||
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
#### Columns Number
|
||||
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
|
||||
Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | the `code` of selected area | `String` | - |
|
||||
| title | Toolbar title | `String` | - |
|
||||
| area-list | Area data | `Object` | - |
|
||||
| columns-num | level of picker | `String | Number` | `3` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | triggers when clicking the confirm button | an array |
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
| change | Triggered when current option changed | Picker instance, current values，column index |
|
||||
|
||||
### Data Structure
|
||||
|
||||
#### areaList
|
||||
|
||||
An object contains three properties: `province_list`, `city_list` and `county_list`.
|
||||
Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
|
||||
|
||||
Example of `AreaList`
|
||||
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: 'Beijing',
|
||||
330000: 'Zhejiang Province'
|
||||
},
|
||||
city_list: {
|
||||
110100: 'Beijing City',
|
||||
330100: 'Hangzhou',
|
||||
},
|
||||
county_list: {
|
||||
110101: 'Dongcheng District',
|
||||
110102: 'Xicheng District',
|
||||
110105: 'Chaoyang District',
|
||||
110106: 'Fengtai District'
|
||||
330105: 'Gongshu District',
|
||||
330106: 'Xihu District',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)
|
||||
|
||||
#### argument of callback function confirm
|
||||
An array contains selected area objects.
|
||||
|
||||
`code` - code of selected area, `name` - name of selected area
|
||||
```javascript
|
||||
[{
|
||||
code: '330000',
|
||||
name: 'Zhejiang Province'
|
||||
}, {
|
||||
code: '330100',
|
||||
name: 'Hangzhou'
|
||||
},{
|
||||
code: '330105',
|
||||
name: 'Xihu District'
|
||||
}]
|
||||
```
|
||||
@@ -1,51 +0,0 @@
|
||||
## Badge
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
Vue.use(Badge);
|
||||
Vue.use(BadgeGroup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `active-key` prop to set index of chosen 'badge'
|
||||
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge title="Title" @click="onClick" />
|
||||
<van-badge title="Title" @click="onClick" info="8" />
|
||||
<van-badge title="Title" @click="onClick" info="99" />
|
||||
<van-badge title="Title" @click="onClick" info="199" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| active-key | Index of chosen badge | `String | Number` | `0` |
|
||||
|
||||
### Badge API
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | Content | `String` | `''` |
|
||||
| info | Info Message | `String | Number` | `''` |
|
||||
| url | Link | `String` | - |
|
||||
@@ -1,84 +0,0 @@
|
||||
## Button
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Type
|
||||
|
||||
```html
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
|
||||
#### Size
|
||||
|
||||
```html
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-button disabled>Diabled</van-button>
|
||||
```
|
||||
|
||||
#### Loading
|
||||
|
||||
```html
|
||||
<van-button loading />
|
||||
<van-button loading type="primary" />
|
||||
```
|
||||
|
||||
#### Custom Tag
|
||||
Use `tag` prop to custom button tag
|
||||
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
Button
|
||||
</van-button>
|
||||
```
|
||||
|
||||
#### Action Button
|
||||
|
||||
```html
|
||||
<van-button type="primary" bottom-action>Button</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>Button</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>Button</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | Can be set to `default` `primary` `danger` | `String` | `default` |
|
||||
| size | Can be set to `normal` `large` `small` `mini` | `String` | `normal` |
|
||||
| text | Text | `String` | - |
|
||||
| tag | Tag | `String` | `button` |
|
||||
| native-type | Native Type Attribute | `String` | `''` |
|
||||
| disabled | Whether disable button | `Boolean` | `false` |
|
||||
| loading | Whether show loading status | `Boolean` | `false` |
|
||||
| block | Whether to set display block | `Boolean` | `false` |
|
||||
| bottom-action | Whether to be action button | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click button and not disabled or loading | - |
|
||||
@@ -1,62 +0,0 @@
|
||||
## Card
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Card } from 'vant';
|
||||
|
||||
Vue.use(Card);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-card
|
||||
title="Title"
|
||||
desc="Description"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
Use `slot` to custom content.
|
||||
|
||||
```html
|
||||
<van-card
|
||||
title="Title"
|
||||
desc="Description"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">Button</van-button>
|
||||
<van-button size="mini">Button</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| 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` |
|
||||
| currency | Currency symbol | `String` | `¥` |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| title | Custom title |
|
||||
| desc | Custom description |
|
||||
| tags | Custom tags |
|
||||
| thumb | Custom thumb |
|
||||
| footer | Custom footer |
|
||||
@@ -1,79 +0,0 @@
|
||||
## CellSwipe
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { CellSwipe } from 'vant';
|
||||
|
||||
Vue.use(CellSwipe);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">Select</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell" value="Cell Content" />
|
||||
</van-cell-group>
|
||||
<span slot="right">Delete</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
|
||||
#### Async close
|
||||
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
|
||||
<span slot="left">Select</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell" value="Cell Content" />
|
||||
</van-cell-group>
|
||||
<span slot="right">Delete</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClose(clickPosition, instance) {
|
||||
switch (clickPosition) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
case 'right':
|
||||
Dialog.confirm({
|
||||
message: 'Are you sure to delete?'
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| left-width | Width of the left scrollable area | `Number` | `0` |
|
||||
| right-width | Width of the right scrollable area | `Number` | `0` |
|
||||
| on-close | Callback function before close | `Function` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | custom content |
|
||||
| left | content of left scrollable area |
|
||||
| right | content of right scrollabe area |
|
||||
|
||||
### onClose Params
|
||||
| Argument | Type | Description |
|
||||
|-----------|-----------|-----------|
|
||||
| clickPosition | `String` | Click positon (`left` `right` `cell` `outside`) |
|
||||
| instance | `Object` | CellSwipe instance with a close method |
|
||||
@@ -1,99 +0,0 @@
|
||||
## Cell
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.use(Cell).use(CellGroup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" value="Content" />
|
||||
<van-cell title="Cell title" value="Content" label="Description" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Value only
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Content" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Left Icon
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" icon="location" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Link
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" is-link />
|
||||
<van-cell title="Cell title" is-link value="Content" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Content" icon="shop" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">Cell title</span>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="Cell title" icon="location" is-link />
|
||||
<van-cell title="Cell title">
|
||||
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### CellGroup API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| border | Whether to show outer border | `Boolean` | `true` |
|
||||
|
||||
### Cell API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| icon | Left Icon | `String` | - |
|
||||
| title | Title | `String` | - |
|
||||
| value | Right text | `String` | - |
|
||||
| label | Description below the title | `String` | - |
|
||||
| border | Whether to show inner border | `Boolean` | `true` |
|
||||
| center | Whether to center content vertically | `Boolean` | `true` |
|
||||
| url | Link URL | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `String` | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
|
||||
| is-link | Whether to show link icon | `Boolean` | `false` |
|
||||
| required | Whether to show required mark | `Boolean` | `false` |
|
||||
|
||||
### Cell Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click cell | - |
|
||||
|
||||
### Cell Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Default slot |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| right-icon | Custom right icon |
|
||||
@@ -1,120 +0,0 @@
|
||||
## Checkbox
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.use(Checkbox).use(CheckboxGroup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Disable Label click event
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox Group
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
Checkbox {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Maximum amount of checked options
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:name="item"
|
||||
:key="item"
|
||||
>
|
||||
Checkbox {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Check status | `Boolean` | `false` |
|
||||
| name | Checkbox name | `any` | - |
|
||||
| disabled | Diable checkbox | `Boolean` | `false` |
|
||||
| label-disabled | Whether to disable label click | `Boolean` | `false` |
|
||||
| shape | Can be set to `round` `square` | `String` | `round` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Names of all checked checkboxes | `Array` | - |
|
||||
| disabled | Disable all checkboxes | `Boolean` | `false` |
|
||||
| max | Maximum amount of checked options | `Number` | `0`(Unlimited) |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
@@ -1,75 +0,0 @@
|
||||
## Circle
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Circle } from 'vant';
|
||||
|
||||
Vue.use(Circle);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
:rate="30"
|
||||
:speed="100"
|
||||
:text="text"
|
||||
/>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentRate: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.currentRate.toFixed(0) + '%'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Custom style
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
color="#13ce66"
|
||||
fill="#fff"
|
||||
size="120px"
|
||||
layer-color="#eee"
|
||||
:text="text"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
:clockwise="false"
|
||||
:stroke-width="60"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Current rate | `Number` | - |
|
||||
| rate | Target rate | `Number` | `100` |
|
||||
| size | Circle size | `String` | `100px` |
|
||||
| color | Progress bar color | `String` | `#38f` |
|
||||
| layer-color | Layer color | `String` | `#fff` |
|
||||
| fill | Fill color | `String` | `none` |
|
||||
| speed | Animate speed（rate/s）| `Number` | - |
|
||||
| text | Text | `String` | - |
|
||||
| stroke-width | Stroke width | `Number` | `40` |
|
||||
| clockwise | Is clockwise | `Boolean` | `true` |
|
||||
|
||||
### Cell Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | custom text content |
|
||||
@@ -1,65 +0,0 @@
|
||||
## Layout
|
||||
|
||||
Quickly and easily create layouts with `van-row` and `van-col`
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
Vue.use(Row).use(Col);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
|
||||
|
||||
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||
<van-col span="6">span: 6</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
|
||||
#### Column Spacing
|
||||
|
||||
Set grid spacing using `gutter` attribute. The default value is 0
|
||||
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| gutter | grid spacing（px） | `String | Number` | - |
|
||||
|
||||
#### Column
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| span | number of column the grid spans | `String | Number` | - |
|
||||
| offset | number of spacing on the left side of the grid | `String | Number` | - |
|
||||
@@ -1,95 +0,0 @@
|
||||
## Collapse
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Collapse, CollapseItem } from 'vant';
|
||||
|
||||
Vue.use(Collapse).use(CollapseItem);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `v-model` to control the name of active panels
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Accordion
|
||||
In accordion mode, only one panel can be expanded at the same time.
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Custom title
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<div slot="title">Title1<van-icon name="question" /></div>
|
||||
Content
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">
|
||||
Content
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Collapse API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | names of current active panels | `Array | String | Number` | - |
|
||||
| accordion | Whether to be accordion mode | `Boolean` | `false` |
|
||||
|
||||
### Collapse Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when switch panel | activeNames: `string | array` |
|
||||
|
||||
### CollapseItem API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | Name | `String | Number` | `index` |
|
||||
| title | Title | `String` | - |
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| default | Content |
|
||||
| title | Custom title |
|
||||
@@ -1,181 +0,0 @@
|
||||
## Contact
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { ContactCard, ContactList, ContactEdit } from 'vant';
|
||||
|
||||
Vue
|
||||
.use(ContactCard)
|
||||
.use(ContactList)
|
||||
.use(ContactEdit);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
|
||||
```html
|
||||
<!-- Contact Card -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- Contact List -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- Contact Edit -->
|
||||
<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: 'John Snow',
|
||||
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: {
|
||||
// add contact
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
// edit contact
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
// select contact
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
// save contact
|
||||
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;
|
||||
},
|
||||
|
||||
// delete contact
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Uneditable
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
name="John Snow"
|
||||
tel="13000000000"
|
||||
:editable="false"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
### ContactCard API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | Can be set to `add` `edit` | `String` | `add` |
|
||||
| name | Name | `String` | - |
|
||||
| tel | Phone | `String` | - |
|
||||
| add-text | Add card text | `String` | `Add contact info` |
|
||||
|
||||
### ContactList API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | Id of chosen contact | `String | Number` | - |
|
||||
| list | Contact list | `Array` | `[]` |
|
||||
| add-text | Add button text | `String` | `Add new contact` |
|
||||
|
||||
### ContactList Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| add | Triggered when click add button | - |
|
||||
| edit | Triggered when click edit button | item: contact object，index |
|
||||
| select | Triggered when select contact | item: contact object |
|
||||
|
||||
### ContactEdit API
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| contact-info | Contact Info | `Object` | `[]` |
|
||||
| is-edit | Whether is editing | `Boolean` | `false` |
|
||||
| is-saving | Whether to show save button loading status | `Boolean` | `false` |
|
||||
| is-deleting | Whether to show delete button loading status | `Boolean` | `false` |
|
||||
| tel-validator | The method to validate tel | `(tel: string) => boolean` | - |
|
||||
|
||||
### ContactEdit Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| save | Triggered when click save button | content：contact info |
|
||||
| delete | Triggered when click delete button | content：contact info |
|
||||
|
||||
### Contact Data Structure
|
||||
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | ID | `String | Number` |
|
||||
| name | Name | `String` |
|
||||
| tel | Phone | `String` |
|
||||
@@ -1,114 +0,0 @@
|
||||
## Coupon
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { CouponCell, CouponList } from 'vant';
|
||||
|
||||
Vue.use(CouponCell).use(CouponList);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- Coupon Cell -->
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- Coupon List -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: 'Coupon 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 | Cell title | `String` | `Coupon` |
|
||||
| chosen-coupon | Index of chosen coupon | `Number` | `-1` |
|
||||
| coupons | Coupon list | `Array` | `[]` |
|
||||
| editable | Cell editable | `Boolean` | `true` |
|
||||
|
||||
### CouponList API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Current exchange code | `String` | - |
|
||||
| chosen-coupon | Index of chosen coupon | `Number` | `-1` |
|
||||
| coupons | Coupon list | `Array` | `[]` |
|
||||
| disabled-coupons | Disabled voupon list | `Array` | `[]` |
|
||||
| exchange-button-text | Exchange button text | `String` | `Exchange` |
|
||||
| exchange-button-loading | Whether to show loading in exchange button | `Boolean` | `false` |
|
||||
| exchange-button-disabled | Whether to disable exchange button | `Boolean` | `false` |
|
||||
| exchange-min-length | Min length to enable exchange button | `Number` | `1` |
|
||||
| displayed-coupon-index | Index of displayed coupon | `Number` | - |
|
||||
| close-button-text | Close button text | `String` | `Close` |
|
||||
| disabled-list-title | Disabled list title | `String` | `Unavailable` |
|
||||
| input-placeholder | Input placeholder | `String` | `Coupon code` |
|
||||
|
||||
### CouponList Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when change chosen coupon | index: index of chosen coupon |
|
||||
| exchange | Triggered when exchange coupon | code: exchange code |
|
||||
|
||||
### Coupon Item Data Structure
|
||||
|
||||
| key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| id | Id | `String` |
|
||||
| name | Name | `String` |
|
||||
| discount | Discount | `Number` |
|
||||
| denominations | Denominations | `Number` |
|
||||
| origin_condition | Condition | `Number` |
|
||||
| start_at | Start time (Timestmap, unit second) | `Number` |
|
||||
| end_at | End time (Timestmap, unit second) | `Number` |
|
||||
| reason | Unavailable reason | `String` |
|
||||
| value | Value | `Number` |
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
## DatetimePicker
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.use(DatetimePicker);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Choose Date
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Choose Year-Month
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Choose Time
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="time"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: '12:00'
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Can be set to `date` `time` `year-month` | `String` | `datetime` |
|
||||
| min-date | Min date | `Date` | Ten years ago on January 1 |
|
||||
| max-date | Max date | `Date` | Ten years later on December 31 |
|
||||
| min-hour | Min hour | `Number` | `0` |
|
||||
| max-hour | Max hour | `Number` | `23` |
|
||||
| title | Toolbar title | `String` | `''` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| confirm-button-text | Text of confirm button | `String` | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | `String` | `Cancel` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | picker: picker instance |
|
||||
| confirm | Triggered when click confirm button | value: current value |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
@@ -1,147 +0,0 @@
|
||||
## Dialog
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Alert dialog
|
||||
Used to prompt for some messages, only including one confirm button
|
||||
|
||||
```javascript
|
||||
Dialog.alert({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
```
|
||||
|
||||
#### Confirm dialog
|
||||
Used to confirm some messages, including a confirm button and a cancel button
|
||||
|
||||
```javascript
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
#### $dialog Method
|
||||
After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
mounted() {
|
||||
this.$dialog.alert({
|
||||
message: 'Content'
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog | `options` | `Promise` | Show dialog |
|
||||
| Dialog.alert | `options` | `Promise` | Show alert dialog |
|
||||
| Dialog.confirm | `options` | `Promise` | Show confim dialog |
|
||||
| Dialog.setDefaultOptions | `options` | `void` | Set default options of all dialogs |
|
||||
| Dialog.resetDefaultOptions | - | `void` | Reset default options of all dialogs |
|
||||
| Dialog.close | - | `void` | Close dialog |
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | Title | `String` | - |
|
||||
| message | Message | `String` | - |
|
||||
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` |
|
||||
| showCancelButton | Whether to show cancel button | `Boolean` | `false` |
|
||||
| confirmButtonText | Confirm button text | `String` | `Confirm` |
|
||||
| cancelButtonText | Cancel button test | `String` | `Cancel` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` |
|
||||
| lockScroll | Whether to lock body scroll | `Boolean` | `true` |
|
||||
| beforeClose | Callback before close，call done to close dialog | (action: string, done: function) => void | - |
|
||||
|
||||
#### Advanced Usage
|
||||
If you need to render vue components within a dialog, you can use dialog component.
|
||||
|
||||
```html
|
||||
<van-dialog v-model="show" :asyncConfirm="onClickConfirmAsync">
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="Password"
|
||||
:placeholder="Password"
|
||||
/>
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
```js
|
||||
Vue.use(Dialog);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeClose(action, done) {
|
||||
if (action === 'confirm') {
|
||||
setTimeout(done, 1000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Whether to show dialog | `Boolean` | - |
|
||||
| title | Title | `String` | - |
|
||||
| message | Message | `String` | - |
|
||||
| async-confirm | Whether to close async，The incoming function is triggered when you click confirm. | `Function` | - |
|
||||
| show-confirm-button | Whether to show confirm button | `Boolean` | `true` |
|
||||
| show-cancel-button | Whether to show cancel button | `Boolean` | `false` |
|
||||
| confirm-button-text | Confirm button text | `String` | `Confirm` |
|
||||
| cancel-button-text | Cancel button test | `String` | `Cancel` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` |
|
||||
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
|
||||
| before-close | Callback before close，call done to close dialog | (action: string, done: function) => void | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | Triggered when click confirm button | - |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
@@ -1,138 +0,0 @@
|
||||
## Field
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.use(Field);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
The value of filed is bound with v-model.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Username" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Custom type
|
||||
Use `type` prop to custom diffrent type fileds.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="Username"
|
||||
icon="clear"
|
||||
placeholder="Username"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="Disabled"
|
||||
label="Username"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Error info
|
||||
Use `error` or `error-message` to show error info
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
label="Phone"
|
||||
placeholder="Phone"
|
||||
error-message="Invalid phone"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Auto resize
|
||||
Textarea Filed can be auto resize when has `autosize` prop
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="Message"
|
||||
type="textarea"
|
||||
placeholder="Message"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### Insert button
|
||||
Use button slot to insert button
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
center
|
||||
v-model="sms"
|
||||
label="SMS"
|
||||
placeholder="SMS"
|
||||
icon="clear"
|
||||
@click-icon="sms = ''"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">Send SMS</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### API
|
||||
Filed support all native properties of input tag，such as `maxlength`、`placeholder`、`readonly`、`autofocus`
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | Filed value | `String` | - |
|
||||
| label | Filed label | `String` | - |
|
||||
| type | Input type | `String` | `text` |
|
||||
| disabled | Disable field | `Boolean` | `false` |
|
||||
| error | Whether to show error info | `Boolean` | `false` |
|
||||
| error-message | Error message | `String` | `''` |
|
||||
| autosize | Textarea auto resize，can accpet an object, e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` |
|
||||
| icon | Right side Icon name | `String` | - |
|
||||
|
||||
### Event
|
||||
Filed support all native events of input tag，such as `focus`、`blur`、`keypress`
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| click-icon | Triggered when click the icon of filed | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| label | Custom label |
|
||||
| icon | Custom icon |
|
||||
| button | Insert button |
|
||||
@@ -1,78 +0,0 @@
|
||||
## GoodsAction
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionBigBtn,
|
||||
GoodsActionMiniBtn
|
||||
} from 'vant';
|
||||
|
||||
Vue
|
||||
.use(GoodsAction)
|
||||
.use(GoodsActionBigBtn)
|
||||
.use(GoodsActionMiniBtn);
|
||||
```
|
||||
|
||||
### Usage
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="Icon1" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" text="Icon2" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn text="Button1" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn text="Button2" @click="onClickBigBtn" primary />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('Click Icon');
|
||||
},
|
||||
onClickBigBtn() {
|
||||
Toast('Click Button');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Icon info
|
||||
Use `info` prop to show messages in upper right corner of icon
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="Icon1" />
|
||||
<van-goods-action-mini-btn icon="cart" text="Icon2" info="5" />
|
||||
<van-goods-action-mini-btn icon="shop" text="Icon3" />
|
||||
<van-goods-action-big-btn text="Button1" />
|
||||
<van-goods-action-big-btn text="Button2" primary />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### GoodsActionMiniBtn
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| text | Button text | `String` | - |
|
||||
| icon | Icon | `String` | - |
|
||||
| icon-class | Icon class name | `String` | `''` |
|
||||
| info | Info message | `String | Number` | - |
|
||||
| url | Link | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `String` | `false` |
|
||||
|
||||
|
||||
#### GoodsActionBigBtn
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| text | Button text | `String` | - |
|
||||
| primary | Is primary button (red color) | `Boolean` | `false` |
|
||||
| url | Link | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `String` | `false` |
|
||||
@@ -1,40 +0,0 @@
|
||||
## Internationalization
|
||||
The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below.
|
||||
|
||||
### Switch languages
|
||||
Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to diffrent languages.
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
import enUS from 'vant/lib/locale/lang/en-US';
|
||||
|
||||
Locale.use('en-US', enUS);
|
||||
```
|
||||
|
||||
### Modify default configs
|
||||
Use `Locale.add` method to modify the default configs.
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
|
||||
const messages = {
|
||||
'en-US': {
|
||||
vanPicker: {
|
||||
confirm: 'Close'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Locale.add(messages);
|
||||
```
|
||||
|
||||
### Config files
|
||||
Current supported languages:
|
||||
|
||||
| Language | Filename |
|
||||
|-----------|-----------|
|
||||
| Chinese | zh-CN |
|
||||
| English | en-US |
|
||||
| Traditional Chinese | zh-HK |
|
||||
|
||||
View all language configs [Here](https://github.com/youzan/vant/tree/dev/packages/locale/lang).
|
||||
@@ -1,60 +0,0 @@
|
||||
## Icon
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.use(Icon);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
View all usable icons on the right.
|
||||
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
|
||||
#### Use local font file
|
||||
Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
|
||||
|
||||
```js
|
||||
import 'vant/lib/vant-css/icon-local.css';
|
||||
```
|
||||
|
||||
#### Add custom iconfont
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'custom-iconfont';
|
||||
src: url('./iconfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-family: 'vant-icon', 'custom-iconfont' !important;
|
||||
}
|
||||
|
||||
.van-icon-extra:before {
|
||||
content: '\e626';
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<van-icon name="extra" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | Icon name | `String` | `''` |
|
||||
| info | Info message | `String | Number` | `''` |
|
||||
| color | Icon color | `String` | `''` | - |
|
||||
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click icon | - |
|
||||
@@ -1,45 +0,0 @@
|
||||
## ImagePreview
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
```
|
||||
|
||||
#### Custom Start Position
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
], 1);
|
||||
```
|
||||
|
||||
#### Close Manually
|
||||
|
||||
```javascript
|
||||
const instance = ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
|
||||
setTimeout(() => {
|
||||
instance.close();
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### Arguments
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | Image URL list | `Array` |
|
||||
@@ -1,61 +0,0 @@
|
||||
## Lazyload
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Lazyload } from 'vant';
|
||||
|
||||
Vue.use(Lazyload, options);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<img v-for="img in imageList" v-lazy="img" >
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Lazyload Background Image
|
||||
Use `v-lazy:background-image` to set background url, and declare the height of the container.
|
||||
|
||||
```html
|
||||
<div v-for="img in imageList" v-lazy:background-image="img" />
|
||||
```
|
||||
|
||||
#### Lazyload Component
|
||||
|
||||
```html
|
||||
<lazy-component>
|
||||
<img v-for="img in imageList" v-lazy="img" >
|
||||
</lazy-component>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| 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)
|
||||
@@ -1,66 +0,0 @@
|
||||
## List
|
||||
A list component to show items and control loading status.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { List } from 'vant';
|
||||
|
||||
Vue.use(List);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in list" :key="item" :title="item + ''" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.list.push(this.list.length + 1);
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| loading | Whether to show loading info，the `load` event will not be triggered when loading | `Boolean` | `false` |
|
||||
| finished | Whether loading is finished，the `load` event will not be triggered when finished | `Boolean` | `false` |
|
||||
| offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | `Number` | `300` |
|
||||
| loading-text | Loading text | `String` | `Loading...` |
|
||||
| immediate-check | Whether to check loading position immediately after mounted | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| load | Triggered when the distance between the scrollbar and the bottom is less than offset | - |
|
||||
@@ -1,32 +0,0 @@
|
||||
## Loading
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.use(Loading);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Circular
|
||||
|
||||
```html
|
||||
<van-loading color="black" />
|
||||
<van-loading color="white" />
|
||||
```
|
||||
|
||||
#### Spinner
|
||||
|
||||
```html
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| color | Can be set to `black` `white` | `String` | `black` | |
|
||||
| type | Can be set to `circular` `spinner` | `String` | `circular` |
|
||||
| size | Size | `String` | `30px` |
|
||||
@@ -1,71 +0,0 @@
|
||||
## NavBar
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { NavBar } from 'vant';
|
||||
|
||||
Vue.use(NavBar);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="Title"
|
||||
left-text="Back"
|
||||
right-text="Button"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
Toast('Back');
|
||||
},
|
||||
onClickRight() {
|
||||
Toast('Button');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 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 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| 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` |
|
||||
| z-index | Z-index | `Number` | `1` |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| title | Custom title |
|
||||
| left | Custom left side content |
|
||||
| right | Custom right side content |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click-left | Triggered when click left button | - |
|
||||
| click-right | Triggered when click right button | - |
|
||||
@@ -1,58 +0,0 @@
|
||||
## NoticeBar
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { NoticeBar } from 'vant';
|
||||
|
||||
Vue.use(NoticeBar);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
|
||||
left-icon="https://img.yzcdn.cn/1.png"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Disable scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### Mode
|
||||
|
||||
```html
|
||||
<van-notice-bar mode="closeable">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
|
||||
<van-notice-bar mode="link">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| mode | Mode, can be set to `closeable` `link` | `String` | `''` |
|
||||
| delay | Animation delay (s) | `Number` | `1` |
|
||||
| speed | Scroll speed (px/s) | `Number` | `50` |
|
||||
| scrollable | Whether to scroll content | `Boolean` | `true` |
|
||||
| left-icon | Image url of left icon | `String` | - |
|
||||
| color | Text color | `String` | `#f60` |
|
||||
| background | Background color | `String` | `#fff7cc` |
|
||||
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click notice bar | - |
|
||||
@@ -1,84 +0,0 @@
|
||||
## NumberKeyboard
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.use(NumberKeyboard);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Default Style
|
||||
|
||||
```html
|
||||
<van-button @touchstart.native.stop="show = true">
|
||||
Show Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
extra-key="."
|
||||
close-button-text="Close"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast(value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Custom Style
|
||||
|
||||
```html
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
theme="custom"
|
||||
extra-key="."
|
||||
close-button-text="Close"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| show | Whether to show keyboard | `Boolean` | - |
|
||||
| theme | Keyboard theme，can be set to `default` `custom` | `String` | `default` |
|
||||
| title | Keyboard title | `String` | - |
|
||||
| transition | Whether to show transition animation | `Boolean` | `true` |
|
||||
| z-index | Keyboard z-index | `Number` | `100` |
|
||||
| extra-key | Content of bottom left key | `String` | `''` |
|
||||
| close-button-text | Close button text | `String` | `-` |
|
||||
| show-delete-key | Whether to show delete button | `Boolean` | `true` |
|
||||
| hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| input | Triggered when keydown | key: Content of the key |
|
||||
| delete | Triggered when press delete key | - |
|
||||
| blur | Triggered when blur keyboard | - |
|
||||
| show | Triggered when keyboard is fully displayed. | - |
|
||||
| hide | Triggered when keyboard is fully hidden. | - |
|
||||
@@ -1,69 +0,0 @@
|
||||
## Pagination
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Pagination } from 'vant';
|
||||
|
||||
Vue.use(Pagination);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Simple mode
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:page-count="12"
|
||||
mode="simple"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Show ellipses
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
force-ellipses
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Current page number | `Number` | - |
|
||||
| mode | Mode, can be set to `simple` `multi` | `String` | `multi` |
|
||||
| items-per-page | Item number per page | `Number` | `10` |
|
||||
| prev-text | Previous text | `String` | `Previous` |
|
||||
| next-text | Next text | `String` | `Next` |
|
||||
| show-page-size | Count of page size to show | `Number` | `5` |
|
||||
| force-ellipses | Whether to show ellipses | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered on page change | - |
|
||||
@@ -1,47 +0,0 @@
|
||||
## Panel
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Panel } from 'vant';
|
||||
|
||||
Vue.use(Panel);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-panel title="Title" desc="Description" status="Status">
|
||||
<div>Content</div>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-panel title="Title" desc="Description" status="Status">
|
||||
<div>Content</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">Button</van-button>
|
||||
<van-button size="small" type="danger">Button</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | Title | `String` | - |
|
||||
| desc | Description | `String` | - |
|
||||
| status | Status | `String` | - |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Default slot |
|
||||
| header | Custom header |
|
||||
| footer | Custom footer |
|
||||
@@ -1,65 +0,0 @@
|
||||
## PasswordInput
|
||||
The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { PasswordInput, NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.use(PasswordInput).use(NumberKeyboard);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | Password value | `String` | `''` |
|
||||
| length | Maxlength of password | `Number` | `6` |
|
||||
| info | Bottom info | `String` | - |
|
||||
| error-info | Bottom error info | `String` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | Triggered when input get focused | - |
|
||||
@@ -1,173 +0,0 @@
|
||||
## Picker
|
||||
The Picker component is usually used with [Popup](#/en-US/popup) Component.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.use(Picker);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, value, index) {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Disable option
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Show Toolbar
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="Title"
|
||||
:columns="columns"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('Cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Multi columns
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
const states = {
|
||||
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(states),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: states.Group1,
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, states[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Loading
|
||||
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" loading />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| columns | Columns data | `Array` | `[]` |
|
||||
| show-toolbar | Whether to show toolbar | `Boolean` | `false` |
|
||||
| title | Toolbar title | `String` | `''` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| value-key | Key of option text | `String` | `text` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| confirm-button-text | Text of confirm button | `String` | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | `String` | `Cancel` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
Picker events will pass different parameters according to the columns are single or multiple
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | Triggered when click confirm button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| cancel | Triggered when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| change | Triggered when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index |
|
||||
|
||||
|
||||
### Data struct of columns
|
||||
|
||||
| key | Description |
|
||||
|-----------|-----------|
|
||||
| values | Value of column |
|
||||
| defaultIndex | Default value index |
|
||||
| className | ClassName for this column |
|
||||
|
||||
### Picker instance
|
||||
You can get the picker instance in 'change' event, and
|
||||
|
||||
| Method | Description |
|
||||
|-----------|-----------|
|
||||
| getValues() | Get current values of all columns |
|
||||
| setValues(values) | Set current values of all columns |
|
||||
| getIndexes() | Get current indexes of all columns |
|
||||
| setIndexes(indexes) | Set current indexes of all columns |
|
||||
| getColumnValue(columnIndex) | Get current value of the column |
|
||||
| setColumnValue(columnIndex, value) | Set current value of the column |
|
||||
| getColumnIndex(columnIndex) | Get current index of the column |
|
||||
| setColumnIndex(columnIndex, optionIndex) | Set current index of the column |
|
||||
| getColumnValues(columnIndex) | Get columns data of the column |
|
||||
| setColumnValues(columnIndex, values) | Set columns data of the column |
|
||||
@@ -1,56 +0,0 @@
|
||||
## Popup
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Popup is located in the middle of the screen by default
|
||||
|
||||
```html
|
||||
<van-popup v-model="show">Content</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Position
|
||||
Use `position` prop to set popup display position
|
||||
|
||||
```html
|
||||
<van-popup v-model="show" position="top" :overlay="false">
|
||||
Content
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Whether to show popup | `Boolean` | `false` |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` |
|
||||
| position | Can be set to `top` `bottom` `right` `left` | `String` | - |
|
||||
| overlay-class | Custom overlay class | `String` | `` |
|
||||
| overlay-style | Custom overlay style | `Object` | - |
|
||||
| close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
|
||||
| transition | Transition | `String` | `popup-slide` |
|
||||
| lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
|
||||
| get-container | Return the mount node for Popup | `() => HTMLElement` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
@@ -1,49 +0,0 @@
|
||||
## Progress
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Progress } from 'vant';
|
||||
|
||||
Vue.use(Progress);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use 'percentage' prop to set current progress
|
||||
|
||||
```html
|
||||
<van-progress :percentage="0" />
|
||||
<van-progress :percentage="46" />
|
||||
<van-progress :percentage="100" />
|
||||
```
|
||||
|
||||
|
||||
#### Inactive
|
||||
|
||||
```html
|
||||
<van-progress inactive :percentage="0" />
|
||||
<van-progress inactive :percentage="46" />
|
||||
<van-progress inactive :percentage="100" />
|
||||
```
|
||||
|
||||
|
||||
#### Custom Style
|
||||
Use `pivot-text` to custom text，use `color` to custom bar color
|
||||
|
||||
```html
|
||||
<van-progress pivot-text="Red" color="#ed5050" :percentage="26" />
|
||||
<van-progress pivot-text="Orange" color="#f60" :percentage="46" />
|
||||
<van-progress pivot-text="Yellow" color="#f09000" :percentage="66" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| inactive | Whether to be gray | `Boolean` | `false` |
|
||||
| percentage | Percentage | `Number` | `false` |
|
||||
| show-pivot | Whether to show text | `Boolean` | `true` |
|
||||
| pivot-text | Text | `String` | percentage |
|
||||
| color | Color | `String` | `#38f` |
|
||||
| text-color | Text color | `String` | `#fff` |
|
||||
@@ -1,68 +0,0 @@
|
||||
## PullRefresh
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { PullRefresh } from 'vant';
|
||||
|
||||
Vue.use(PullRefresh);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<p>Refresh Count: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.$toast('Refresh Success');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Loading status | `Boolean` | - |
|
||||
| pulling-text | Text to show when pulling | `String` | `Pull to refresh...` |
|
||||
| loosing-text | Text to show when loosing | `String` | `Loose to refresh...` |
|
||||
| loading-text | Text to show when loading | `String` | `Loading...` |
|
||||
| animation-duration | Animation duration | `Number` | `300` |
|
||||
| head-height | Height of head | `Number` | `50` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| refresh | Triggered when pull refresh | - |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Default slot |
|
||||
| normal | Content of head when at normal status |
|
||||
| pulling | Content of head when at pulling |
|
||||
| loosing | Content of head when at loosing |
|
||||
| loading | Content of head when at loading |
|
||||
@@ -1,75 +0,0 @@
|
||||
## Radio
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { RadioGroup, Radio } from 'vant';
|
||||
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(Radio);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `v-model` to bind the name of checked radio
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio" disabled>
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell :title="Radio 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="Radio 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### Radio API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | Radio name | `any` | - |
|
||||
| disabled | Whether to disable radio | `Boolean` | `false` |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Name of checked radio | `any` | - |
|
||||
| disabled | Diable all radios | `Boolean` | `false` |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value changed | current value |
|
||||
@@ -1,56 +0,0 @@
|
||||
## Rate
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Rate } from 'vant';
|
||||
|
||||
Vue.use(Rate);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Custom Color
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:count="6"
|
||||
color="#2ba"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
### Rate API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Current rate | `Number` | - |
|
||||
| count | Count | `Number` | `5` |
|
||||
| size | Icon size (px) | `Number` | `20` |
|
||||
| color | Selected color | `String` | `#ffd21e` |
|
||||
| void-color | Void color | `String` | `#c7c7c7` |
|
||||
| disabled-color | Disabled color | `String` | `#bdbdbd` |
|
||||
| disabled | Whether to disable rate | `Boolean` | `false` |
|
||||
@@ -1,79 +0,0 @@
|
||||
## Search
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Search } from 'vant';
|
||||
|
||||
Vue.use(Search);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-search placeholder="Placeholder" v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Listen to Events
|
||||
`search` event will be triggered when click the search button on the keyboard.
|
||||
|
||||
`cancel` event will be triggered when click the cancel button.
|
||||
|
||||
Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
|
||||
|
||||
```html
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="Placeholder"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</form>
|
||||
```
|
||||
|
||||
#### Custom Button
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
|
||||
|
||||
```html
|
||||
<van-search
|
||||
v-model="value"
|
||||
show-action
|
||||
@search="onSearch"
|
||||
>
|
||||
<div slot="action" @click="onSearch">Search</div>
|
||||
</van-search>
|
||||
```
|
||||
|
||||
### API
|
||||
Search support all native properties of input tag，such as `maxlength`、`placeholder`、`readonly`、`autofocus`
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| placeholder | Input placeholder | `String` | - |
|
||||
| background | Background color | `String` | `#f2f2f2` |
|
||||
| show-action | Whether to show right button | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
Search support all native events of input tag，such as `focus`、`blur`、`keypress`
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
| search | Triggered when confirm search | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| action | Custom right button, displayed when `showAction` is true |
|
||||
@@ -1,257 +0,0 @@
|
||||
## Sku
|
||||
|
||||
### Install
|
||||
```javascript
|
||||
import { Sku } from 'vant';
|
||||
|
||||
Vue.use(Sku);
|
||||
```
|
||||
|
||||
### Usage
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<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"
|
||||
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:disable-stepper-input="disableStepperInput"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Custom Stepper Config
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goods-id="goodsId"
|
||||
:hide-stock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quota-used="quotaUsed"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepper-title="Stepper title"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goods-id="goodsId"
|
||||
:hide-stock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quota-used="quotaUsed"
|
||||
show-add-cart-btn
|
||||
reset-stepper-on-hide
|
||||
:initial-sku="initialSku"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
<!-- custom sku-header-price -->
|
||||
<template slot="sku-header-price" slot-scope="props">
|
||||
<div class="van-sku__goods-price">
|
||||
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- custom sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<van-button bottom-action @click="onPointClicked">Button</van-button>
|
||||
<!-- trigger sku inner event -->
|
||||
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Whether to show sku | `Boolean` | `false` |
|
||||
| sku | Sku data | `Object` | - |
|
||||
| goods | Goods info | `Object` | - |
|
||||
| goods-id | Goods id | `String | Number` | - |
|
||||
| hide-stock | Whether to hide stock | `Boolean` | `false` |
|
||||
| show-add-cart-btn | Whether to show cart button | `Boolean` | `true` |
|
||||
| quota | Quota (0 as no limit) | `Number` | `0` |
|
||||
| quota-used | Used quota | `Number` | `0` |
|
||||
| reset-stepper-on-hide | Whether to reset stepper when hide | `Boolean` | `false` |
|
||||
| reset-selected-sku-on-hide | Whether to reset selected sku when hide | `Boolean` | `false` |
|
||||
| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` |
|
||||
| close-on-click-overlay | Whether to close sku popup when click overlay | `Boolean` | `false` |
|
||||
| stepper-title | Quantity title | `String` | `Quantity` |
|
||||
| custom-stepper-config | Custom stepper related config | `Object` | `{}` |
|
||||
| message-config | Message related config | `Object` | `{}` |
|
||||
| get-container | Return the mount node for sku | `() => HTMLElement` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| add-cart | Triggered when click cart button | data: Object |
|
||||
| buy-clicked | Triggered when click buy button | data: Object |
|
||||
|
||||
### Methods
|
||||
|
||||
| Method | Description |
|
||||
|-----------|-----------|
|
||||
| getSkuData() | Get current sku data |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| sku-header | Custom header |
|
||||
| sku-header-price | Custom header price area |
|
||||
| sku-body-top | Custom content before sku-group |
|
||||
| sku-group | Custom sku |
|
||||
| extra-sku-group | Extra custom content |
|
||||
| sku-stepper | Custom stepper |
|
||||
| sku-messages | Custom messages |
|
||||
| sku-actions | Custom button actions |
|
||||
|
||||
#### Data Structure
|
||||
#### Sku Data Structure
|
||||
```javascript
|
||||
sku: {
|
||||
tree: [
|
||||
{
|
||||
k: 'Color',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: 'Red',
|
||||
imgUrl: 'https://img.yzcdn.cn/1.jpg'
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
name: 'Blue',
|
||||
imgUrl: 'https://img.yzcdn.cn/2.jpg'
|
||||
}
|
||||
],
|
||||
k_s: 's1'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
stock_num: 110
|
||||
}
|
||||
],
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
collection_id: 2261,
|
||||
none_sku: false,
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
multiple: '0',
|
||||
name: 'Message',
|
||||
type: 'text',
|
||||
required: '1'
|
||||
}
|
||||
],
|
||||
hide_stock: false
|
||||
}
|
||||
```
|
||||
|
||||
#### Goods Data Structure
|
||||
|
||||
```javascript
|
||||
goods: {
|
||||
title: 'Title',
|
||||
picture: 'https://img.yzcdn.cn/1.jpg'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### customStepperConfig Data Structure
|
||||
```javascript
|
||||
customStepperConfig: {
|
||||
// custom quota text
|
||||
quotaText: 'only 5 can buy',
|
||||
// custom callback when over limit
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota, quotaUsed } = data;
|
||||
|
||||
if (action === 'minus') {
|
||||
Toast('at least select one');
|
||||
} else if (action === 'plus') {
|
||||
// const { LIMIT_TYPE } = Sku.skuConstants;
|
||||
if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
|
||||
let msg = `Buy up to ${quota}`;
|
||||
if (quotaUsed > 0) msg += `，you already buy ${quotaUsed}`;
|
||||
Toast(msg);
|
||||
} else {
|
||||
Toast('not enough stock');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### messageConfig Data Structure
|
||||
```javascript
|
||||
messageConfig: {
|
||||
// the upload image callback
|
||||
uploadImg: () => {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => resolve('https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
|
||||
});
|
||||
},
|
||||
// max file size (MB)
|
||||
uploadMaxSize: 3,
|
||||
// placehold config
|
||||
placeholderMap: {
|
||||
text: 'xxx',
|
||||
tel: 'xxx',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Event Params Data Structure
|
||||
|
||||
```javascript
|
||||
skuData: {
|
||||
goodsId: '946755',
|
||||
messages: {
|
||||
message_0: '12',
|
||||
message_1: ''
|
||||
},
|
||||
cartMessages: {
|
||||
'Message 1': 'xxxx'
|
||||
},
|
||||
selectedNum: 1,
|
||||
selectedSkuComb: {
|
||||
id: 2257,
|
||||
price: 100,
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
stock_num: 111
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,66 +0,0 @@
|
||||
## Slider
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Slider } from 'vant';
|
||||
|
||||
Vue.use(Slider);
|
||||
```
|
||||
|
||||
### Usage
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" @change="onChange" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 50
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.$toast('Current value：' + value);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Range
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" :min="10" :max="90" />
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" disabled />
|
||||
```
|
||||
|
||||
#### Step size
|
||||
|
||||
```html
|
||||
<van-slider v-model="value" :step="10" bar-height="4px" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | Current value | `Number` | `0` |
|
||||
| disabled | Whether to disable slider | `Boolean` | `false` |
|
||||
| max | Max value | `Number` | `100` |
|
||||
| min | Min value | `Number` | `0` |
|
||||
| step | Step size | `Number` | `1` |
|
||||
| bar-height | Height of bar | `String` | `2px` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered after value change | value: current rate |
|
||||
@@ -1,66 +0,0 @@
|
||||
## Stepper
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Stepper } from 'vant';
|
||||
|
||||
Vue.use(Stepper);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-stepper v-model="value" disabled />
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-stepper
|
||||
v-model="value"
|
||||
integer
|
||||
:min="5"
|
||||
:max="40"
|
||||
:step="2"
|
||||
:default-value="9"
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| min | Min value | `String | Number` | `1` |
|
||||
| max | Max value | `String | Number` | - |
|
||||
| default-value | Default value | `String | Number` | `1` |
|
||||
| step | Value change step | `String | Number` | `1` |
|
||||
| integer | Whether to allow only integers | `Boolean` | `false` |
|
||||
| disabled | Disable value change | `Boolean` | `false` |
|
||||
| disable-input | Disable input | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when value change | value: current value |
|
||||
| overlimit | Triggered when click disabled button | - |
|
||||
| plus | Triggered when click plus button | - |
|
||||
| minus | Triggered when click minus button | - |
|
||||
@@ -1,85 +0,0 @@
|
||||
## Steps
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.use(Step).use(Steps);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 1
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Description
|
||||
|
||||
```html
|
||||
<van-steps
|
||||
:active="active"
|
||||
icon="logistics"
|
||||
title="Title"
|
||||
description="Description"
|
||||
>
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
|
||||
#### Vertical Steps
|
||||
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【City】Status1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【City】Status2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【City】Status3</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
|
||||
### Steps API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| active | Active step | `Number` | 0 |
|
||||
| icon | Action step icon | `String` | - |
|
||||
| icon-class | Icon class | `String` | - |
|
||||
| title | Title | `String` | - |
|
||||
| description | Description | `String` | - |
|
||||
| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` |
|
||||
| active-color | Active step color | `String` | `#06bf04` |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| icon | Custom icon |
|
||||
| message-extra | Extra content |
|
||||
@@ -1,87 +0,0 @@
|
||||
## SubmitBar
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { SubmitBar } from 'vant';
|
||||
|
||||
Vue.use(SubmitBar);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
button-text="Submit"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
`submit` event will not triggerd when disabled.
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
disabled
|
||||
:price="3050"
|
||||
button-text="Submit"
|
||||
tip="Some tips"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Loading
|
||||
`submit` event will not triggerd when loading.
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
loading
|
||||
:price="3050"
|
||||
button-text="Submit"
|
||||
@submit="onSubmit"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Advanced Usage
|
||||
Use slot to add custom contents.
|
||||
|
||||
```html
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
button-text="Submit"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<van-checkbox v-model="checked">Check</van-checkbox>
|
||||
<span slot="tip">
|
||||
Some tips, <span @click="onClickEditAddress">Link</span>
|
||||
</span>
|
||||
</van-submit-bar>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| price | Price | `Number` | - |
|
||||
| label | Price label | `String` | `合计：` |
|
||||
| button-text | Button text | `String` | - |
|
||||
| button-type | Button type | `String` | `danger` |
|
||||
| tip | Tip | `String` | - |
|
||||
| disabled | Whether to disable button | `Boolean` | `false` |
|
||||
| loading | Whether to show loading icon | `Boolean` | `false` |
|
||||
| currency | Currency symbol | `String` | `¥` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| submit | Triggerd when click submit button | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| default | Custom left content |
|
||||
| tip | Custom tips |
|
||||
@@ -1,96 +0,0 @@
|
||||
## Swipe
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
|
||||
Vue.use(Swipe).use(SwipeItem);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `autoplay` prop to set autoplay interval
|
||||
|
||||
```html
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
#### Image Lazyload
|
||||
Use [Lazyload](#/en-US/lazyload) component to lazyload image
|
||||
|
||||
```html
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(image, index) in images" :key="index">
|
||||
<img v-lazy="image" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### change event
|
||||
|
||||
```html
|
||||
<van-swipe @change="onChange">
|
||||
<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>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onChange(index) {
|
||||
Toast('Current Swipe index:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Vertical Scrolling
|
||||
|
||||
```html
|
||||
<van-swipe :autoplay="3000" vertical>
|
||||
<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>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| autoplay | Autoplay interval (ms) | `Number` | - |
|
||||
| duration | Animation duration (ms) | `Number` | `500` |
|
||||
| loop | Whether to enable loop | `Boolean` | `true` |
|
||||
| vertical | Vertical Scrolling | `Boolean` | `false` |
|
||||
| touchable | Whether touchable | `Boolean` | `true` |
|
||||
| show-indicators | Whether to show indocators | `Boolean` | `true` |
|
||||
| initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when current swipe change | index: index of current swipe |
|
||||
@@ -1,64 +0,0 @@
|
||||
## SwitchCell
|
||||
`SwitchCell` component is an encapsulation of `Switch` and `Cell`.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { SwitchCell } from 'vant';
|
||||
|
||||
Vue.use(SwitchCell);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" title="Title" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### Disabled
|
||||
use `disabled` property to disable the component
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" disabled title="Title" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
|
||||
#### Loading
|
||||
use `loading` property to keep component in loading state
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" loading title="Title" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | on-off state of the switch | `Boolean` | - |
|
||||
| title | the leftside title | `String` | `''` |
|
||||
| loading | whether the component is in loading state | `Boolean` | `false` |
|
||||
| disabled | whether to disable the component | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | triggered when the on-off state is changed | checked: switch is on or not |
|
||||
@@ -1,81 +0,0 @@
|
||||
## Switch
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.use(Switch);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" disabled />
|
||||
```
|
||||
|
||||
#### Loading
|
||||
|
||||
|
||||
```html
|
||||
<van-switch v-model="checked" loading />
|
||||
```
|
||||
|
||||
#### Advanced usage
|
||||
|
||||
```html
|
||||
<van-switch :value="checked" size="36px" @input="onInput" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}).then(() => {
|
||||
this.checked = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Check status of Switch | `Boolean` | `false` |
|
||||
| loading | Whether to show loading icon | `Boolean` | `false` |
|
||||
| disabled | Whether to disable switch | `Boolean` | `false` |
|
||||
| size | Size of switch | `String` | `30px` |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when check status changed | checked: is switch checked |
|
||||
@@ -1,168 +0,0 @@
|
||||
## Tab
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.use(Tab).use(Tabs);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
The first tab is actived by default, you can set `v-model` to active specified tab.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
<van-tab v-for="index in 4" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Swipe Tabs
|
||||
|
||||
By default more than 4 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.
|
||||
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab v-for="index in 8" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Disabled Tab
|
||||
|
||||
You can set `disabled` attribute on the corresponding `van-tab`.
|
||||
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab v-for="index in 4" :title="'tab' + index" :disabled="index === 2">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickDisabled(index, title) {
|
||||
this.$toast(title + ' is disabled');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Card Style
|
||||
|
||||
Tabs styled as cards.
|
||||
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
<van-tab v-for="index in 4" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Click Event
|
||||
|
||||
```html
|
||||
<van-tabs @click="onClick">
|
||||
<van-tab v-for="index in 4" :title="'tab' + index">
|
||||
content of tab {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClick(index, title) {
|
||||
this.$toast(title);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Sticky
|
||||
In sticky mode, the tab will be fixed to top when scroll to top
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" sticky>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Custom title
|
||||
Use title slot to custom tab title
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
<van-tab v-for="index in 2">
|
||||
<div slot="title">
|
||||
<van-icon name="more-o" />tab
|
||||
</div>
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
#### Swipeable
|
||||
|
||||
In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" swipeable>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Tabs API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Index of active tab | `String` `Number` | `0` |
|
||||
| type | Can be set to `line` `card` | `String` | `line` |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.2` | - |
|
||||
| line-width | Width of tab line (px) | `Number` | Width of active tab |
|
||||
| swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
|
||||
| sticky | Whether to use sticky mode | `Boolean` | `false` |
|
||||
| swipeable | Whether to switch tabs with swipe gestrue in the content | `Boolean` | `false` |
|
||||
|
||||
### Tab API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | Title | `String` | - |
|
||||
| disabled | Whether to disable tab | `Boolean` | `false` |
|
||||
|
||||
### Tab Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Content |
|
||||
| title | Custom tab |
|
||||
|
||||
### Tabs Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click tab | index：index of current tab，title: tab title |
|
||||
| disabled | Triggered when click disabled tab | index：index of current tab, title: tab title |
|
||||
@@ -1,90 +0,0 @@
|
||||
## Tabbar
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Tabbar, TabbarItem } from 'vant';
|
||||
|
||||
Vue.use(Tabbar).use(TabbarItem);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records" info="5">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Custom icon
|
||||
Use `icon` slot to custom icon
|
||||
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>Custom</span>
|
||||
<template slot="icon" slot-scope="props">
|
||||
<img :src="props.active ? icon.active : icon.normal" />
|
||||
</template>
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
icon: {
|
||||
normal: '//img.yzcdn.cn/1.png',
|
||||
active: '//img.yzcdn.cn/2.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Tabbar API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Index of current tab | `Number` | - |
|
||||
|
||||
### Tabbar Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | Triggered when change active tab | active: index of current tab |
|
||||
|
||||
### TabbarItem API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| icon | Icon name | `String` | - |
|
||||
| dot | Whether to show red dot | `Boolean` | - |
|
||||
| info | Info message | `String | Number` | - |
|
||||
| url | Link | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `String` | `false` |
|
||||
|
||||
### TabbarItem Slot
|
||||
|
||||
| Name | Description | Scope |
|
||||
|-----------|-----------|-----------|
|
||||
| icon | Custom icon | active |
|
||||
@@ -1,51 +0,0 @@
|
||||
## Tag
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Tag } from 'vant';
|
||||
|
||||
Vue.use(Tag);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
```
|
||||
|
||||
#### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
#### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | Type, can be set to `primary` `success` `danger` | `String` | `''`|
|
||||
| plain | Whether to be plain style | `Boolean` | `false` |
|
||||
| mark | Wtether to be mark style | `Boolean` | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Default slot |
|
||||
@@ -1,105 +0,0 @@
|
||||
## Toast
|
||||
|
||||
### Install
|
||||
|
||||
```javascript
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Text
|
||||
|
||||
```javascript
|
||||
Toast('Some messages');
|
||||
```
|
||||
|
||||
|
||||
#### Loading
|
||||
|
||||
```javascript
|
||||
Toast.loading({
|
||||
mask: true,
|
||||
message: 'Loading...'
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
#### Success/Fail
|
||||
|
||||
```javascript
|
||||
Toast.success('Success');
|
||||
Toast.fail('Fail');
|
||||
```
|
||||
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
```javascript
|
||||
const toast = Toast.loading({
|
||||
duration: 0, // continuous display toast
|
||||
forbidClick: true, // forbid click background
|
||||
loadingType: 'spinner',
|
||||
message: '3 seconds'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `${second} seconds`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
#### $toast Method
|
||||
After import the Toast component, the $toast method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
mounted() {
|
||||
this.$toast('Some messages');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Singleton
|
||||
Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example
|
||||
|
||||
```js
|
||||
Toast.allowMultiple();
|
||||
|
||||
const toast1 = Toast('First Toast');
|
||||
const toast2 = Toast.success('Second Toast');
|
||||
|
||||
toast1.clear();
|
||||
toast2.clear();
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
| Methods | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Toast | `options | message` | toast instance | Show toast |
|
||||
| Toast.loading | `options | message` | toast instance | Show loading toast |
|
||||
| Toast.success | `options | message` | toast instance | Show success toast |
|
||||
| Toast.fail | `options | message` | toast instance | Show fail toast |
|
||||
| Toast.clear | `clearAll` | `void` | Close |
|
||||
| Toast.allowMultiple | - | `void` | Allow multlple toast at the same time |
|
||||
| Toast.setDefaultOptions | `options` | `void` | Set default options of all toasts |
|
||||
| Toast.resetDefaultOptions | - | `void` | Reset default options of all toasts |
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | Can be set to `loading` `success` `fail` `html` | `String` | `text` |
|
||||
| position | Can be set to `top` `middle` `bottom` | `String` | `middle` |
|
||||
| message | Message | `String` | `''` |
|
||||
| mask | Whether to show mask | `Boolean` | `false` |
|
||||
| forbidClick | Whether to forbid click background | `Boolean` | `false` |
|
||||
| loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |
|
||||
| duration | Toast duration(ms), won't disappear if value is 0 | `Number` | `3000` |
|
||||
@@ -1,89 +0,0 @@
|
||||
## TreeSelect
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { TreeSelect } from 'vant';
|
||||
|
||||
Vue.use(TreeSelect);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:main-active-index="mainActiveIndex"
|
||||
:active-id="activeId"
|
||||
@navclick="onNavClick"
|
||||
@itemclick="onItemClick"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: items,
|
||||
// the index of parent item
|
||||
mainActiveIndex: 0,
|
||||
// the id of selected item
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onNavClick(index) {
|
||||
this.mainActiveIndex = index;
|
||||
},
|
||||
onItemClick(data) {
|
||||
this.activeId = data.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` |
|
||||
| main-Active-index | The index of selected parent node | `Number` | `0` |
|
||||
| active-id | Id of selected item | `Number` | `0` |
|
||||
|
||||
#### Event
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | triggered when parent node is selected | index: index of selected parent |
|
||||
| itemclick | triggered when item is selected | data: selected item |
|
||||
|
||||
### Data Structure
|
||||
`items` should be an array contains specified tree objects.
|
||||
|
||||
In every tree object, `text` property defines `id` stands for the unique key while the `children` contains sub-tree objects.
|
||||
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
// name of the parent node
|
||||
text: 'All Cities',
|
||||
// leaves of this parent node
|
||||
children: [
|
||||
{
|
||||
// name of the leaf node
|
||||
text: 'Washington',
|
||||
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
|
||||
id: 1002
|
||||
},
|
||||
{
|
||||
// name of the leaf node
|
||||
text: 'Baltimore',
|
||||
// id of the leaf node, component highlights leaf node by comparing the activeId with this.
|
||||
id: 1001
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@@ -1,68 +0,0 @@
|
||||
## Uploader
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
Vue.use(Uploader);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<van-uploader :after-read="onRead">
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onRead(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Set input attr
|
||||
You can set native properties such as `accpet`、`multiple` on Uploader, and the input will automatically inherits the attribute.
|
||||
|
||||
```html
|
||||
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` |
|
||||
| accept | Accepted file type | `String` | `image/*` |
|
||||
| disabled | Whether to disabled the upload | `Boolean` | `false` |
|
||||
| before-read | Hook before reading the file, return false to stop reading the file | `Function` | - |
|
||||
| after-read | Hook after reading the file | `Function` | - |
|
||||
| max-size | Max size of file | `Number` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| oversize | Triggered when file size over limit | Same as after-read |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| - | Custom icon |
|
||||
|
||||
### afterRead parematers
|
||||
| Key | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| file | file object | `Object` |
|
||||
| content | file content | `String` |
|
||||
@@ -1,48 +0,0 @@
|
||||
## Built-in Style
|
||||
Vant contains some common styles that can be used directly by the className.
|
||||
|
||||
### Text ellipsis
|
||||
When the text content length exceeds the maximum container width, the excess text is automatically omitted.
|
||||
|
||||
```html
|
||||
<div class="van-ellipsis">
|
||||
This is a paragraph of 250px width limit, the back will be omitted.
|
||||
</div>
|
||||
```
|
||||
|
||||
### Hairline
|
||||
Add 1px border under the Retina screen for the element, based on a pseudo element.
|
||||
|
||||
```html
|
||||
<!-- border top -->
|
||||
<div class="van-hairline--top"></div>
|
||||
|
||||
<!-- border bottom -->
|
||||
<div class="van-hairline--bottom"></div>
|
||||
|
||||
<!-- border left -->
|
||||
<div class="van-hairline--left"></div>
|
||||
|
||||
<!-- border right -->
|
||||
<div class="van-hairline--right"></div>
|
||||
|
||||
<!-- border top & bottom -->
|
||||
<div class="van-hairline--top-bottom"></div>
|
||||
|
||||
<!-- full border -->
|
||||
<div class="van-hairline--surround"></div>
|
||||
```
|
||||
|
||||
### Animation
|
||||
|
||||
```html
|
||||
<!-- fade in -->
|
||||
<transition name="van-fade">
|
||||
<div v-show="visible">Fade</div>
|
||||
</transition>
|
||||
|
||||
<!-- slide bottom -->
|
||||
<transition name="van-slide-bottom">
|
||||
<div v-show="visible">Fade</div>
|
||||
</transition>
|
||||
```
|
||||
@@ -1,77 +0,0 @@
|
||||
## Waterfall
|
||||
Note: Waterfall is deprecated and no longer maintained, please use the [List](#/zh-CN/list) component instead.
|
||||
|
||||
### Install
|
||||
|
||||
#### Global registration
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
Vue.use(Waterfall);
|
||||
```
|
||||
|
||||
#### Local registration
|
||||
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
|
||||
|
||||
```js
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - |
|
||||
| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - |
|
||||
| waterfall-disabled | Key of the property to control disable status in instance | `String` | - |
|
||||
| waterfall-offset | Offset to trigger callback function | `Number` | `300` |
|
||||
@@ -1,133 +0,0 @@
|
||||
// This file is auto gererated by build/bin/build-entry.js
|
||||
import progress from 'nprogress';
|
||||
|
||||
function wrapper(component) {
|
||||
return function(r) {
|
||||
progress.start();
|
||||
component(r).then(() => {
|
||||
progress.done();
|
||||
}).catch(() => {
|
||||
progress.done();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
'zh-CN/actionsheet': wrapper(r => require.ensure([], () => r(require('./zh-CN/actionsheet.md')), 'zh-CN/actionsheet')),
|
||||
'zh-CN/address-edit': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-edit.md')), 'zh-CN/address-edit')),
|
||||
'zh-CN/address-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/address-list.md')), 'zh-CN/address-list')),
|
||||
'zh-CN/area': wrapper(r => require.ensure([], () => r(require('./zh-CN/area.md')), 'zh-CN/area')),
|
||||
'zh-CN/badge': wrapper(r => require.ensure([], () => r(require('./zh-CN/badge.md')), 'zh-CN/badge')),
|
||||
'zh-CN/button': wrapper(r => require.ensure([], () => r(require('./zh-CN/button.md')), 'zh-CN/button')),
|
||||
'zh-CN/card': wrapper(r => require.ensure([], () => r(require('./zh-CN/card.md')), 'zh-CN/card')),
|
||||
'zh-CN/cell-swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell-swipe.md')), 'zh-CN/cell-swipe')),
|
||||
'zh-CN/cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/cell.md')), 'zh-CN/cell')),
|
||||
'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
|
||||
'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
|
||||
'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
|
||||
'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
|
||||
'zh-CN/col': wrapper(r => require.ensure([], () => r(require('./zh-CN/col.md')), 'zh-CN/col')),
|
||||
'zh-CN/collapse': wrapper(r => require.ensure([], () => r(require('./zh-CN/collapse.md')), 'zh-CN/collapse')),
|
||||
'zh-CN/contact-card': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact-card.md')), 'zh-CN/contact-card')),
|
||||
'zh-CN/coupon-list': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon-list.md')), 'zh-CN/coupon-list')),
|
||||
'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
|
||||
'zh-CN/dialog': wrapper(r => require.ensure([], () => r(require('./zh-CN/dialog.md')), 'zh-CN/dialog')),
|
||||
'zh-CN/field': wrapper(r => require.ensure([], () => r(require('./zh-CN/field.md')), 'zh-CN/field')),
|
||||
'zh-CN/goods-action': wrapper(r => require.ensure([], () => r(require('./zh-CN/goods-action.md')), 'zh-CN/goods-action')),
|
||||
'zh-CN/i18n': wrapper(r => require.ensure([], () => r(require('./zh-CN/i18n.md')), 'zh-CN/i18n')),
|
||||
'zh-CN/icon': wrapper(r => require.ensure([], () => r(require('./zh-CN/icon.md')), 'zh-CN/icon')),
|
||||
'zh-CN/image-preview': wrapper(r => require.ensure([], () => r(require('./zh-CN/image-preview.md')), 'zh-CN/image-preview')),
|
||||
'zh-CN/intro': wrapper(r => require.ensure([], () => r(require('./zh-CN/intro.md')), 'zh-CN/intro')),
|
||||
'zh-CN/lazyload': wrapper(r => require.ensure([], () => r(require('./zh-CN/lazyload.md')), 'zh-CN/lazyload')),
|
||||
'zh-CN/list': wrapper(r => require.ensure([], () => r(require('./zh-CN/list.md')), 'zh-CN/list')),
|
||||
'zh-CN/loading': wrapper(r => require.ensure([], () => r(require('./zh-CN/loading.md')), 'zh-CN/loading')),
|
||||
'zh-CN/nav-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/nav-bar.md')), 'zh-CN/nav-bar')),
|
||||
'zh-CN/notice-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/notice-bar.md')), 'zh-CN/notice-bar')),
|
||||
'zh-CN/number-keyboard': wrapper(r => require.ensure([], () => r(require('./zh-CN/number-keyboard.md')), 'zh-CN/number-keyboard')),
|
||||
'zh-CN/pagination': wrapper(r => require.ensure([], () => r(require('./zh-CN/pagination.md')), 'zh-CN/pagination')),
|
||||
'zh-CN/panel': wrapper(r => require.ensure([], () => r(require('./zh-CN/panel.md')), 'zh-CN/panel')),
|
||||
'zh-CN/password-input': wrapper(r => require.ensure([], () => r(require('./zh-CN/password-input.md')), 'zh-CN/password-input')),
|
||||
'zh-CN/picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/picker.md')), 'zh-CN/picker')),
|
||||
'zh-CN/popup': wrapper(r => require.ensure([], () => r(require('./zh-CN/popup.md')), 'zh-CN/popup')),
|
||||
'zh-CN/progress': wrapper(r => require.ensure([], () => r(require('./zh-CN/progress.md')), 'zh-CN/progress')),
|
||||
'zh-CN/pull-refresh': wrapper(r => require.ensure([], () => r(require('./zh-CN/pull-refresh.md')), 'zh-CN/pull-refresh')),
|
||||
'zh-CN/quickstart': wrapper(r => require.ensure([], () => r(require('./zh-CN/quickstart.md')), 'zh-CN/quickstart')),
|
||||
'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
|
||||
'zh-CN/rate': wrapper(r => require.ensure([], () => r(require('./zh-CN/rate.md')), 'zh-CN/rate')),
|
||||
'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
|
||||
'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
|
||||
'zh-CN/slider': wrapper(r => require.ensure([], () => r(require('./zh-CN/slider.md')), 'zh-CN/slider')),
|
||||
'zh-CN/stepper': wrapper(r => require.ensure([], () => r(require('./zh-CN/stepper.md')), 'zh-CN/stepper')),
|
||||
'zh-CN/steps': wrapper(r => require.ensure([], () => r(require('./zh-CN/steps.md')), 'zh-CN/steps')),
|
||||
'zh-CN/submit-bar': wrapper(r => require.ensure([], () => r(require('./zh-CN/submit-bar.md')), 'zh-CN/submit-bar')),
|
||||
'zh-CN/swipe': wrapper(r => require.ensure([], () => r(require('./zh-CN/swipe.md')), 'zh-CN/swipe')),
|
||||
'zh-CN/switch-cell': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch-cell.md')), 'zh-CN/switch-cell')),
|
||||
'zh-CN/switch': wrapper(r => require.ensure([], () => r(require('./zh-CN/switch.md')), 'zh-CN/switch')),
|
||||
'zh-CN/tab': wrapper(r => require.ensure([], () => r(require('./zh-CN/tab.md')), 'zh-CN/tab')),
|
||||
'zh-CN/tabbar': wrapper(r => require.ensure([], () => r(require('./zh-CN/tabbar.md')), 'zh-CN/tabbar')),
|
||||
'zh-CN/tag': wrapper(r => require.ensure([], () => r(require('./zh-CN/tag.md')), 'zh-CN/tag')),
|
||||
'zh-CN/theme': wrapper(r => require.ensure([], () => r(require('./zh-CN/theme.md')), 'zh-CN/theme')),
|
||||
'zh-CN/toast': wrapper(r => require.ensure([], () => r(require('./zh-CN/toast.md')), 'zh-CN/toast')),
|
||||
'zh-CN/tree-select': wrapper(r => require.ensure([], () => r(require('./zh-CN/tree-select.md')), 'zh-CN/tree-select')),
|
||||
'zh-CN/uploader': wrapper(r => require.ensure([], () => r(require('./zh-CN/uploader.md')), 'zh-CN/uploader')),
|
||||
'zh-CN/vant-css': wrapper(r => require.ensure([], () => r(require('./zh-CN/vant-css.md')), 'zh-CN/vant-css')),
|
||||
'zh-CN/waterfall': wrapper(r => require.ensure([], () => r(require('./zh-CN/waterfall.md')), 'zh-CN/waterfall')),
|
||||
'en-US/actionsheet': wrapper(r => require.ensure([], () => r(require('./en-US/actionsheet.md')), 'en-US/actionsheet')),
|
||||
'en-US/address-edit': wrapper(r => require.ensure([], () => r(require('./en-US/address-edit.md')), 'en-US/address-edit')),
|
||||
'en-US/address-list': wrapper(r => require.ensure([], () => r(require('./en-US/address-list.md')), 'en-US/address-list')),
|
||||
'en-US/area': wrapper(r => require.ensure([], () => r(require('./en-US/area.md')), 'en-US/area')),
|
||||
'en-US/badge': wrapper(r => require.ensure([], () => r(require('./en-US/badge.md')), 'en-US/badge')),
|
||||
'en-US/button': wrapper(r => require.ensure([], () => r(require('./en-US/button.md')), 'en-US/button')),
|
||||
'en-US/card': wrapper(r => require.ensure([], () => r(require('./en-US/card.md')), 'en-US/card')),
|
||||
'en-US/cell-swipe': wrapper(r => require.ensure([], () => r(require('./en-US/cell-swipe.md')), 'en-US/cell-swipe')),
|
||||
'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
|
||||
'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
|
||||
'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
|
||||
'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
|
||||
'en-US/col': wrapper(r => require.ensure([], () => r(require('./en-US/col.md')), 'en-US/col')),
|
||||
'en-US/collapse': wrapper(r => require.ensure([], () => r(require('./en-US/collapse.md')), 'en-US/collapse')),
|
||||
'en-US/contact-card': wrapper(r => require.ensure([], () => r(require('./en-US/contact-card.md')), 'en-US/contact-card')),
|
||||
'en-US/coupon-list': wrapper(r => require.ensure([], () => r(require('./en-US/coupon-list.md')), 'en-US/coupon-list')),
|
||||
'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),
|
||||
'en-US/dialog': wrapper(r => require.ensure([], () => r(require('./en-US/dialog.md')), 'en-US/dialog')),
|
||||
'en-US/field': wrapper(r => require.ensure([], () => r(require('./en-US/field.md')), 'en-US/field')),
|
||||
'en-US/goods-action': wrapper(r => require.ensure([], () => r(require('./en-US/goods-action.md')), 'en-US/goods-action')),
|
||||
'en-US/i18n': wrapper(r => require.ensure([], () => r(require('./en-US/i18n.md')), 'en-US/i18n')),
|
||||
'en-US/icon': wrapper(r => require.ensure([], () => r(require('./en-US/icon.md')), 'en-US/icon')),
|
||||
'en-US/image-preview': wrapper(r => require.ensure([], () => r(require('./en-US/image-preview.md')), 'en-US/image-preview')),
|
||||
'en-US/intro': wrapper(r => require.ensure([], () => r(require('./en-US/intro.md')), 'en-US/intro')),
|
||||
'en-US/lazyload': wrapper(r => require.ensure([], () => r(require('./en-US/lazyload.md')), 'en-US/lazyload')),
|
||||
'en-US/list': wrapper(r => require.ensure([], () => r(require('./en-US/list.md')), 'en-US/list')),
|
||||
'en-US/loading': wrapper(r => require.ensure([], () => r(require('./en-US/loading.md')), 'en-US/loading')),
|
||||
'en-US/nav-bar': wrapper(r => require.ensure([], () => r(require('./en-US/nav-bar.md')), 'en-US/nav-bar')),
|
||||
'en-US/notice-bar': wrapper(r => require.ensure([], () => r(require('./en-US/notice-bar.md')), 'en-US/notice-bar')),
|
||||
'en-US/number-keyboard': wrapper(r => require.ensure([], () => r(require('./en-US/number-keyboard.md')), 'en-US/number-keyboard')),
|
||||
'en-US/pagination': wrapper(r => require.ensure([], () => r(require('./en-US/pagination.md')), 'en-US/pagination')),
|
||||
'en-US/panel': wrapper(r => require.ensure([], () => r(require('./en-US/panel.md')), 'en-US/panel')),
|
||||
'en-US/password-input': wrapper(r => require.ensure([], () => r(require('./en-US/password-input.md')), 'en-US/password-input')),
|
||||
'en-US/picker': wrapper(r => require.ensure([], () => r(require('./en-US/picker.md')), 'en-US/picker')),
|
||||
'en-US/popup': wrapper(r => require.ensure([], () => r(require('./en-US/popup.md')), 'en-US/popup')),
|
||||
'en-US/progress': wrapper(r => require.ensure([], () => r(require('./en-US/progress.md')), 'en-US/progress')),
|
||||
'en-US/pull-refresh': wrapper(r => require.ensure([], () => r(require('./en-US/pull-refresh.md')), 'en-US/pull-refresh')),
|
||||
'en-US/quickstart': wrapper(r => require.ensure([], () => r(require('./en-US/quickstart.md')), 'en-US/quickstart')),
|
||||
'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
|
||||
'en-US/rate': wrapper(r => require.ensure([], () => r(require('./en-US/rate.md')), 'en-US/rate')),
|
||||
'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
|
||||
'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
|
||||
'en-US/slider': wrapper(r => require.ensure([], () => r(require('./en-US/slider.md')), 'en-US/slider')),
|
||||
'en-US/stepper': wrapper(r => require.ensure([], () => r(require('./en-US/stepper.md')), 'en-US/stepper')),
|
||||
'en-US/steps': wrapper(r => require.ensure([], () => r(require('./en-US/steps.md')), 'en-US/steps')),
|
||||
'en-US/submit-bar': wrapper(r => require.ensure([], () => r(require('./en-US/submit-bar.md')), 'en-US/submit-bar')),
|
||||
'en-US/swipe': wrapper(r => require.ensure([], () => r(require('./en-US/swipe.md')), 'en-US/swipe')),
|
||||
'en-US/switch-cell': wrapper(r => require.ensure([], () => r(require('./en-US/switch-cell.md')), 'en-US/switch-cell')),
|
||||
'en-US/switch': wrapper(r => require.ensure([], () => r(require('./en-US/switch.md')), 'en-US/switch')),
|
||||
'en-US/tab': wrapper(r => require.ensure([], () => r(require('./en-US/tab.md')), 'en-US/tab')),
|
||||
'en-US/tabbar': wrapper(r => require.ensure([], () => r(require('./en-US/tabbar.md')), 'en-US/tabbar')),
|
||||
'en-US/tag': wrapper(r => require.ensure([], () => r(require('./en-US/tag.md')), 'en-US/tag')),
|
||||
'en-US/theme': wrapper(r => require.ensure([], () => r(require('./en-US/theme.md')), 'en-US/theme')),
|
||||
'en-US/toast': wrapper(r => require.ensure([], () => r(require('./en-US/toast.md')), 'en-US/toast')),
|
||||
'en-US/tree-select': wrapper(r => require.ensure([], () => r(require('./en-US/tree-select.md')), 'en-US/tree-select')),
|
||||
'en-US/uploader': wrapper(r => require.ensure([], () => r(require('./en-US/uploader.md')), 'en-US/uploader')),
|
||||
'en-US/vant-css': wrapper(r => require.ensure([], () => r(require('./en-US/vant-css.md')), 'en-US/vant-css')),
|
||||
'en-US/waterfall': wrapper(r => require.ensure([], () => r(require('./en-US/waterfall.md')), 'en-US/waterfall'))
|
||||
};
|
||||
@@ -1,94 +0,0 @@
|
||||
## Actionsheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Actionsheet } from 'vant';
|
||||
|
||||
Vue.use(Actionsheet);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" :actions="actions" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{
|
||||
name: '选项',
|
||||
callback: this.onClick
|
||||
},
|
||||
{
|
||||
name: '选项',
|
||||
subname: '描述信息'
|
||||
},
|
||||
{
|
||||
name: '选项',
|
||||
loading: true
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 带取消按钮的 Actionsheet
|
||||
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" :actions="actions" cancel-text="取消" />
|
||||
```
|
||||
|
||||
#### 带标题的 Actionsheet
|
||||
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
|
||||
|
||||
```html
|
||||
<van-actionsheet v-model="show" title="支持以下配送方式">
|
||||
<p>一些内容</p>
|
||||
</van-actionsheet>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` |
|
||||
| title | 标题 | `String` | - |
|
||||
| cancel-text | 取消按钮文案 | `String` | - |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | - |
|
||||
| close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - |
|
||||
| get-container | 指定挂载的 HTML 节点 | `() => HTMLElement` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
|
||||
### actions
|
||||
|
||||
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是`loading`状态 |
|
||||
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
|
||||
@@ -1,115 +0,0 @@
|
||||
## AddressEdit 地址编辑
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressEdit } from 'vant';
|
||||
|
||||
Vue.use(AddressEdit);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
show-postal
|
||||
show-delete
|
||||
show-set-default
|
||||
show-search-result
|
||||
: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
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| area-list | 地区列表 | `Object` | - |
|
||||
| address-info | 收货人信息 | `Object` | `{}` |
|
||||
| search-result | 详细地址搜索结果 | `Array` | `[]` |
|
||||
| show-postal | 是否显示邮政编码 | `Boolean` | `false` |
|
||||
| show-delete | 是否显示删除按钮 | `Boolean` | `false` |
|
||||
| show-set-default | 是否显示默认地址栏 | `Boolean` | `false` |
|
||||
| show-search-result | 是否显示搜索结果 | `Boolean` | `false` |
|
||||
| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` |
|
||||
| tel-validator | 手机号格式校验函数 | `(tel: string) => boolean` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| focus | 输入框聚焦时触发 | key: 聚焦的输入框对应的 key |
|
||||
| delete | 确认删除地址时触发 | content：表单内容 |
|
||||
| cancel-delete | 取消删除地址时触发 | content：表单内容 |
|
||||
| select-search | 选中搜索结果时触发 | value: 搜索结果 |
|
||||
| change-area | 修改收件地区时触发 | values: 地区信息 |
|
||||
| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 在邮政编码下方插入内容 |
|
||||
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### addressInfo 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| province | 省份 | `String` |
|
||||
| city | 城市 | `String` |
|
||||
| county | 区县 | `String` |
|
||||
| address_detail | 详细地址 | `String` |
|
||||
| area_code | 地区编码，通过省市区选择获取 | `String` |
|
||||
| postal_code | 邮政编码 | `String` |
|
||||
| is_default | 是否为默认地址 | `Boolean` |
|
||||
|
||||
#### searchResult 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| name | 地名 | `String` |
|
||||
| address | 详细地址 | `String` |
|
||||
|
||||
#### 省市县列表数据格式
|
||||
请参考 [Area](#/zh-CN/area) 组件。
|
||||
@@ -1,80 +0,0 @@
|
||||
## AddressList 地址列表
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { AddressList } from 'vant';
|
||||
|
||||
Vue.use(AddressList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前选中地址的 id | String | - |
|
||||
| list | 地址列表 | Array | `[]` |
|
||||
| add-button-text | 底部按钮文字 | String | `新增收货地址` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
|
||||
| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
|
||||
|
||||
### 数据格式
|
||||
#### 地址列表字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
| tel | 收货人手机号 | `String` |
|
||||
| address | 收货地址 | `String` |
|
||||
@@ -1,118 +0,0 @@
|
||||
## Area 省市县选择组件
|
||||
省市县选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
|
||||
```javascript
|
||||
import { Area } from 'vant';
|
||||
|
||||
Vue.use(Area);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
```
|
||||
|
||||
#### 选中省市县
|
||||
|
||||
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
#### 配置显示列
|
||||
|
||||
可以通过`columns-num`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="标题" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前选中的省市区`code` | `String` | - |
|
||||
| title | 顶部栏标题 | `String` | - |
|
||||
| area-list | 省市县数据，格式见下方 | `Object` | - |
|
||||
| columns-num | 省市县显示列数，3-省市县，2-省市，1-省 | `String | Number` | `3` |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` |
|
||||
| item-height | 选项高度 | `Number` | `44` |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### 省市县列表数据格式
|
||||
|
||||
整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。
|
||||
|
||||
每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 `11`，以零补足 6 位，为 `110000`。
|
||||
|
||||
`AreaList`具体格式如下：
|
||||
|
||||
```javascript
|
||||
{
|
||||
province_list: {
|
||||
110000: '北京市',
|
||||
120000: '天津市'
|
||||
},
|
||||
city_list: {
|
||||
110100: '北京市',
|
||||
110200: '县',
|
||||
120100: '天津市',
|
||||
120200: '县'
|
||||
},
|
||||
county_list: {
|
||||
110101: '东城区',
|
||||
110102: '西城区',
|
||||
110105: '朝阳区',
|
||||
110106: '丰台区'
|
||||
120101: '和平区',
|
||||
120102: '河东区',
|
||||
120103: '河西区',
|
||||
120104: '南开区',
|
||||
120105: '河北区',
|
||||
// ....
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)
|
||||
|
||||
#### 点击完成时返回的数据格式
|
||||
|
||||
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
|
||||
`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
|
||||
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
code: '110000',
|
||||
name: '北京市'
|
||||
},
|
||||
{
|
||||
code: '110100',
|
||||
name: '北京市'
|
||||
},
|
||||
{
|
||||
code: '110101',
|
||||
name: '东城区'
|
||||
}
|
||||
];
|
||||
```
|
||||
@@ -1,52 +0,0 @@
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
Vue.use(Badge);
|
||||
Vue.use(BadgeGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
|
||||
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge title="标签名称" @click="onClick" />
|
||||
<van-badge title="标签名称" @click="onClick" info="8" />
|
||||
<van-badge title="标签名称" @click="onClick" info="99" />
|
||||
<van-badge title="标签名称" @click="onClick" info="199" />
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` |
|
||||
|
||||
### Badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 内容 | `String` | `''` |
|
||||
| info | 提示消息 | `String | Number` | `''` |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
@@ -1,88 +0,0 @@
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮类型
|
||||
支持`default`、`primary`、`danger`三种类型，默认为`default`
|
||||
|
||||
```html
|
||||
<van-button type="default">默认按钮</van-button>
|
||||
<van-button type="primary">主要按钮</van-button>
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
```
|
||||
|
||||
#### 按钮尺寸
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
```html
|
||||
<van-button size="large">大号按钮</van-button>
|
||||
<van-button size="normal">普通按钮</van-button>
|
||||
<van-button size="small">小型按钮</van-button>
|
||||
<van-button size="mini">迷你按钮</van-button>
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
通过`disabled`属性来禁用按钮，此时按钮不可点击
|
||||
|
||||
```html
|
||||
<van-button disabled>禁用状态</van-button>
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
|
||||
```html
|
||||
<van-button loading />
|
||||
<van-button loading type="primary" />
|
||||
```
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
|
||||
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
按钮
|
||||
</van-button>
|
||||
```
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
```html
|
||||
<van-button type="primary" bottom-action>按钮</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>按钮</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 按钮类型，可选值为 `default` `primary` `danger` | `String` | `default` |
|
||||
| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | `String` | `normal` |
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| tag | 按钮 HTML 标签 | `String` | `button` |
|
||||
| native-type | 按钮类型（原生） | `String` | - |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` |
|
||||
| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
|
||||
@@ -1,62 +0,0 @@
|
||||
## Card 卡片
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Card } from 'vant';
|
||||
|
||||
Vue.use(Card);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-card
|
||||
title="标题"
|
||||
desc="描述"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
可以通过具名`slot`添加定制内容
|
||||
|
||||
```html
|
||||
<van-card
|
||||
title="标题"
|
||||
desc="描述"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| thumb | 左侧图片 | `String` | - |
|
||||
| title | 标题 | `String` | - |
|
||||
| desc | 描述 | `String` | - |
|
||||
| num | 商品数量 | `String | Number` | - |
|
||||
| price | 商品价格 | `String | Number` | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` |
|
||||
| currency | 货币符号 | `String` | `¥` |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义 tags |
|
||||
| thumb | 自定义 thumb |
|
||||
| footer | 自定义 footer |
|
||||
@@ -1,79 +0,0 @@
|
||||
## CellSwipe 滑动单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { CellSwipe } from 'vant';
|
||||
|
||||
Vue.use(CellSwipe);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
|
||||
#### 异步关闭
|
||||
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
<span slot="right">删除</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClose(clickPosition, instance) {
|
||||
switch (clickPosition) {
|
||||
case 'left':
|
||||
case 'cell':
|
||||
case 'outside':
|
||||
instance.close();
|
||||
break;
|
||||
case 'right':
|
||||
Dialog.confirm({
|
||||
message: '确定删除吗？'
|
||||
}).then(() => {
|
||||
instance.close();
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` |
|
||||
| on-close | 关闭时的回调函数 | `Function` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| left | 左侧滑动内容 |
|
||||
| right | 右侧滑动内容 |
|
||||
|
||||
### onClose 参数
|
||||
| 参数 | 类型 | 说明 |
|
||||
|-----------|-----------|-----------|
|
||||
| clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
|
||||
| instance | `Object` | CellSwipe 实例，挂载有 close 方法 |
|
||||
@@ -1,106 +0,0 @@
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.use(Cell).use(CellGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
将`van-cell-group`组件看成一个容器即可
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 只设置value
|
||||
只设置`value`时会向左对齐
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="内容" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 展示图标
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" icon="location" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
|
||||
#### 展示箭头
|
||||
传入`is-link`属性则会在右侧显示箭头
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" is-link />
|
||||
<van-cell title="单元格" is-link value="内容" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="内容" icon="shop" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="单元格" icon="location" is-link />
|
||||
<van-cell title="单元格">
|
||||
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### CellGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| border | 是否显示外边框 | `Boolean` | `true` |
|
||||
|
||||
### Cell API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| icon | 左侧图标，可选值见 Icon 组件 | `String` | - |
|
||||
| title | 左侧标题 | `String` | - |
|
||||
| value | 右侧内容 | `String` | - |
|
||||
| label | 标题下方的描述信息 | `String` | - |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` |
|
||||
| center | 是否使内容垂直居中 | `Boolean` | `false` |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - |
|
||||
| replace | 跳转时是否替换当前 history | `String` | `false` |
|
||||
| clickable | 是否开启点击反馈 | `Boolean` | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |
|
||||
| required | 是否显示表单必填星号 | `Boolean` | `false` |
|
||||
|
||||
### Cell Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击 cell 时触发 | - |
|
||||
|
||||
### Cell Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
| right-icon | 自定义右侧按钮，默认是`arrow` |
|
||||
@@ -1,124 +0,0 @@
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
Vue.use(Checkbox).use(CheckboxGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过`v-model`绑定 checkbox 的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked">复选框</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### 禁用内容部分点击事件
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
#### Checkbox 组
|
||||
|
||||
需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 设置最大可选数
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="item"
|
||||
:name="item"
|
||||
>
|
||||
复选框 {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
|
||||
<van-checkbox :name="item" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 是否为选中状态 | `Boolean` | `false` |
|
||||
| name | 标识 Checkbox 名称 | `any` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` |
|
||||
| label-disabled | 是否禁用单选框内容点击 | `Boolean` | `false` |
|
||||
| shape | 形状，可选值为 `round` `square` | `String` | `round` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 所有选中项的 name | `Array` | - |
|
||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` |
|
||||
| max | 设置最大可选数 | `Number` | `0`（无限制） |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
@@ -1,76 +0,0 @@
|
||||
## Circle 环形进度条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Circle } from 'vant';
|
||||
|
||||
Vue.use(Circle);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
:rate="30"
|
||||
:speed="100"
|
||||
:text="text"
|
||||
/>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentRate: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.currentRate.toFixed(0) + '%'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 样式定制
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
color="#13ce66"
|
||||
fill="#fff"
|
||||
size="120px"
|
||||
layer-color="#eee"
|
||||
:text="text"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
:clockwise="false"
|
||||
:stroke-width="60"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前进度 | `Number` | - |
|
||||
| rate | 目标进度 | `Number` | `100` |
|
||||
| size | 圆环直径 | `String` | `100px` |
|
||||
| color | 进度条颜色 | `String` | `#38f` |
|
||||
| layer-color | 轨道颜色 | `String` | `#fff` |
|
||||
| fill | 填充颜色 | `String` | `none` |
|
||||
| speed | 动画速度（单位为 rate/s）| `Number` | - |
|
||||
| text | 文字 | `String` | - |
|
||||
| stroke-width | 进度条宽度 | `Number` | `40` |
|
||||
| clockwise | 是否顺时针增加 | `Boolean` | `true` |
|
||||
|
||||
### Circle Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义文字内容 |
|
||||
@@ -1,61 +0,0 @@
|
||||
## Layout 布局
|
||||
|
||||
提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
Vue.use(Row).use(Col);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基本用法
|
||||
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col span="4">span: 4</van-col>
|
||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
||||
</van-row>
|
||||
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
#### 设置列元素间距
|
||||
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - |
|
||||
|
||||
#### Column
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - |
|
||||
@@ -1,108 +0,0 @@
|
||||
## Collapse 折叠面板
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Collapse, CollapseItem } from 'vant';
|
||||
|
||||
Vue.use(Collapse).use(CollapseItem);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过`v-model`控制展开的面板列表，`activeNames`为数组格式
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="有赞微商城" name="1">
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞美业" name="3">
|
||||
线上拓客，随时预约，贴心顺手的开单收银
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeNames: ['1']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 手风琴
|
||||
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
<van-collapse-item title="有赞微商城" name="1">
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞美业" name="3">
|
||||
线上拓客，随时预约，贴心顺手的开单收银
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeName: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 自定义标题内容
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item name="1">
|
||||
<div slot="title">有赞微商城<van-icon name="question" /></div>
|
||||
提供多样店铺模板，快速搭建网上商城
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="有赞零售" name="2">
|
||||
网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Collapse API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前展开面板的 name | `Array | String | Number` | - |
|
||||
| accordion | 是否开启手风琴模式 | `Boolean` | `false` |
|
||||
|
||||
### Collapse Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 切换面板时触发 | activeNames: `string | array` |
|
||||
|
||||
### CollapseItem API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 面板唯一标识符，默认为索引值 | `String | Number` | `index` |
|
||||
| title | 标题 | `String` | - |
|
||||
|
||||
|
||||
### CollapseItem Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| default | 面板内容 |
|
||||
| title | 自定义标题内容 |
|
||||
@@ -1,183 +0,0 @@
|
||||
## Contact 联系人
|
||||
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { ContactCard, ContactList, ContactEdit } from 'vant';
|
||||
|
||||
Vue
|
||||
.use(ContactCard)
|
||||
.use(ContactList)
|
||||
.use(ContactEdit);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 联系人卡片 -->
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- 联系人列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 联系人编辑 -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 不可编辑
|
||||
|
||||
```html
|
||||
<van-contact-card
|
||||
type="edit"
|
||||
name="张三"
|
||||
tel="13000000000"
|
||||
:editable="false"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
### ContactCard API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| type | 类型，可选值为 `add` `edit` | `String` | `add` |
|
||||
| name | 联系人姓名 | `String` | - |
|
||||
| tel | 联系人手机号 | `String` | - |
|
||||
| add-text | 添加时的文案提示 | `String` | `添加订单联系人信息` |
|
||||
|
||||
### ContactList API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中联系人的 id | `String | Number` | - |
|
||||
| list | 联系人列表 | `Array` | `[]` |
|
||||
| add-text | 新建按钮文案 | `String` | `新建联系人` |
|
||||
|
||||
### ContactList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
|
||||
| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
|
||||
|
||||
### ContactEdit API
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| contact-info | 联系人信息 | `Object` | `[]` |
|
||||
| is-edit | 是否为编辑联系人 | `Boolean` | `false` |
|
||||
| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` |
|
||||
| tel-validator | 手机号格式校验函数 | `(tel: string) => boolean` | - |
|
||||
|
||||
### ContactEdit Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content：表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content：表单内容 |
|
||||
|
||||
### 数据格式
|
||||
|
||||
#### 联系人数据格式
|
||||
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每位联系人的唯一标识 | `String | Number` |
|
||||
| name | 联系人姓名 | `String` |
|
||||
| tel | 联系人手机号 | `String` |
|
||||
@@ -1,116 +0,0 @@
|
||||
## Coupon 优惠券选择器
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { CouponCell, CouponList } from 'vant';
|
||||
|
||||
Vue.use(CouponCell).use(CouponList);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 优惠券单元格 -->
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
name: '优惠券名称',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon],
|
||||
disabledCoupons: [coupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### CouponCell API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 单元格标题 | `String` | `优惠券码` |
|
||||
| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` |
|
||||
| editable | 能否切换优惠券 | `Boolean` | `true` |
|
||||
|
||||
### CouponList API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前输入的兑换码 | `String` | - |
|
||||
| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` |
|
||||
| coupons | 可用优惠券列表 | `Array` | `[]` |
|
||||
| disabled-coupons | 不可用优惠券列表 | `Array` | `[]` |
|
||||
| exchange-button-text | 兑换按钮文字 | `String` | `兑换` |
|
||||
| exchange-button-loading | 是否在兑换按钮上显示加载动画 | `Boolean` | `false` |
|
||||
| exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` |
|
||||
| exchange-min-length | 兑换码最小长度 | `Number` | `1` |
|
||||
| displayed-coupon-index | 滚动至特定优惠券位置 | `Number` | - |
|
||||
| show-close-button | 是否显示列表底部按钮 | `Boolean` | `true` |
|
||||
| close-button-text | 列表底部按钮文字 | `String` | `不使用优惠` |
|
||||
| disabled-list-title | 不可用券列表标题 | `String` | `不可用优惠` |
|
||||
| input-placeholder | 输入框文字提示 | `String` | `请输入优惠码` |
|
||||
| show-exchange-bar | 是否展示兑换栏 | `Boolean` | `true` |
|
||||
|
||||
### CouponList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
|
||||
| exchange | 兑换优惠券回调 | code, 兑换码 |
|
||||
|
||||
### 数据格式
|
||||
#### 优惠券字段说明
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 优惠券 id | `String` |
|
||||
| name | 优惠券名称 | `String` |
|
||||
| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
|
||||
| denominations | 面值（0为折扣券）单位分 | `Number` |
|
||||
| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
|
||||
| start_at | 卡有效开始时间 (时间戳, 单位秒) | `Number` |
|
||||
| end_at | 卡失效日期 (时间戳, 单位秒) | `Number` |
|
||||
| reason | 不可用原因 | `String` |
|
||||
| value | 订单优惠金额，单位分 | `Number` |
|
||||
@@ -1,133 +0,0 @@
|
||||
## DatetimePicker 时间选择
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.use(DatetimePicker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 选择完整时间
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 选择日期（年月日）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 选择日期（年月）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: new Date()
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 选择时间
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="time"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentDate: '12:00'
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型，可选值为 `date` `time` `year-month` | `String` | `datetime` |
|
||||
| min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 |
|
||||
| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 |
|
||||
| min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |
|
||||
| max-hour | 可选的最大小时，针对 time 类型 | `Number` | `23` |
|
||||
| title | 顶部栏标题 | `String` | `''` |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` |
|
||||
| item-height | 选项高度 | `Number` | `44` |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
| cancel | 点击取消按钮时触发的事件 | - |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@@ -1,152 +0,0 @@
|
||||
## Dialog 弹出框
|
||||
Dialog 组件支持函数调用和组件调用两种形式
|
||||
|
||||
### 使用指南
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 消息提示
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
|
||||
```javascript
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
```
|
||||
|
||||
#### 消息确认
|
||||
用于确认消息，包含取消和确认按钮
|
||||
|
||||
```javascript
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
#### 全局方法
|
||||
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法
|
||||
|
||||
```js
|
||||
export default {
|
||||
mounted() {
|
||||
this.$dialog.alert({
|
||||
message: '弹窗内容'
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog | `options` | `Promise` | 展示弹窗 |
|
||||
| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 |
|
||||
| Dialog.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Dialog 生效 |
|
||||
| Dialog.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Dialog 生效 |
|
||||
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` |
|
||||
| lockScroll | 是否锁定背景滚动 | `Boolean` | `true` |
|
||||
| beforeClose | 关闭前的回调函数，调用 done 后关闭弹窗 | (action: string, done: function) => void | - |
|
||||
|
||||
|
||||
#### 高级用法
|
||||
如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog
|
||||
|
||||
```html
|
||||
<van-dialog
|
||||
v-model="show"
|
||||
show-cancel-button
|
||||
:before-close="beforeClose"
|
||||
>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
placeholder="请输入用户名"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="密码"
|
||||
:placeholder="请输入密码"
|
||||
/>
|
||||
</van-dialog>
|
||||
```
|
||||
|
||||
```js
|
||||
Vue.use(Dialog);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeClose(action, done) {
|
||||
if (action === 'confirm') {
|
||||
setTimeout(done, 1000);
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 是否显示弹窗 | `Boolean` | - |
|
||||
| title | 标题 | `String` | - |
|
||||
| message | 内容 | `String` | - |
|
||||
| show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` |
|
||||
| show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` |
|
||||
| confirm-button-text | 确认按钮的文案 | `String` | `确认` |
|
||||
| cancel-button-text | 取消按钮的文案 | `String` | `取消` |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` |
|
||||
| close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` |
|
||||
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` |
|
||||
| before-close | 关闭前的回调函数，调用 done 后关闭弹窗 | (action: string, done: function) => void | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击确认按钮时触发 | - |
|
||||
| cancel | 点击取消按钮时触发 | - |
|
||||
@@ -1,140 +0,0 @@
|
||||
## Field 输入框
|
||||
|
||||
`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.use(Field);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过 v-model 绑定输入框的值
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 自定义类型
|
||||
根据`type`属性定义不同类型的输入框
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
icon="clear"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
@click-icon="username = ''"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
label="密码"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 禁用输入框
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
value="输入框已禁用"
|
||||
label="用户名"
|
||||
disabled
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 错误提示
|
||||
通过`error`或者`error-message`属性增加对应的错误提示
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
label="用户名"
|
||||
placeholder="请输入用户名"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
label="手机号"
|
||||
placeholder="请输入手机号"
|
||||
error-message="手机号格式错误"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 高度自适应
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
#### 插入按钮
|
||||
通过 button slot 可以在输入框尾部插入按钮
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
center
|
||||
v-model="sms"
|
||||
label="短信验证码"
|
||||
placeholder="请输入短信验证码"
|
||||
icon="clear"
|
||||
@click-icon="sms = ''"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### API
|
||||
Filed 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`placeholder`、`readonly`、`autofocus` 等
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| label | 标签 | `String` | - |
|
||||
| value | 当前输入的值 | `String` | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` |
|
||||
| error | 是否将输入内容标红 | `Boolean` | `false` |
|
||||
| error-message | 底部错误提示文案 | `String` | `''` |
|
||||
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象，如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` |
|
||||
| icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - |
|
||||
|
||||
### Event
|
||||
Filed 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-icon | 点击尾部图标时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| label | 自定义输入框标签 |
|
||||
| icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
@@ -1,78 +0,0 @@
|
||||
## GoodsAction 商品页行动点
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import {
|
||||
GoodsAction,
|
||||
GoodsActionBigBtn,
|
||||
GoodsActionMiniBtn
|
||||
} from 'vant';
|
||||
|
||||
Vue
|
||||
.use(GoodsAction)
|
||||
.use(GoodsActionBigBtn)
|
||||
.use(GoodsActionMiniBtn);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="客服" @click="onClickMiniBtn" />
|
||||
<van-goods-action-mini-btn icon="cart" text="购物车" @click="onClickMiniBtn" />
|
||||
<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn" />
|
||||
<van-goods-action-big-btn text="立即购买" @click="onClickBigBtn" primary />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 图标提示
|
||||
通过`info`属性在图标右上角增加相应的提示
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" text="客服" />
|
||||
<van-goods-action-mini-btn icon="cart" text="购物车" info="5" />
|
||||
<van-goods-action-mini-btn icon="shop" text="店铺" />
|
||||
<van-goods-action-big-btn text="加入购物车" />
|
||||
<van-goods-action-big-btn text="立即购买" primary />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
#### GoodsActionMiniBtn
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| icon | 图标 | `String` | - |
|
||||
| icon-class | 图标额外类名 | `String` | `''` |
|
||||
| info | 图标右上角提示信息 | `String | Number` | - |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - |
|
||||
| replace | 跳转时是否替换当前 history | `String` | `false` |
|
||||
|
||||
|
||||
#### GoodsActionBigBtn
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| text | 按钮文字 | `String` | - |
|
||||
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` |
|
||||
| url | 跳转链接 | `String` | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - |
|
||||
| replace | 跳转时是否替换当前 history | `String` | `false` |
|
||||
@@ -1,41 +0,0 @@
|
||||
## 国际化
|
||||
Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案
|
||||
|
||||
### 多语言切换
|
||||
Vant 通过 Locale 组件实现多语言支持，使用 `Locale.use` 方法可以切换当前使用的语言。
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
import enUS from 'vant/lib/locale/lang/en-US';
|
||||
|
||||
Locale.use('en-US', enUS);
|
||||
```
|
||||
|
||||
### 修改默认文案
|
||||
通过 `Locale.add` 方法可以实现文案的修改和扩展，示例如下：
|
||||
|
||||
```js
|
||||
import { Locale } from 'vant';
|
||||
|
||||
const messages = {
|
||||
'zh-CN': {
|
||||
vanPicker: {
|
||||
confirm: '关闭' // 将'确认'修改为'关闭'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Locale.add(messages);
|
||||
```
|
||||
|
||||
### 配置文件
|
||||
|
||||
目前支持的语言:
|
||||
|
||||
| 语言 | 文件名 |
|
||||
|-----------|-----------|
|
||||
| 简体中文 | zh-CN |
|
||||
| 英语 | en-US |
|
||||
| 繁體中文 | zh-HK |
|
||||
|
||||
在 [这里](https://github.com/youzan/vant/tree/dev/packages/locale/lang) 查看所有的 i18n 配置文件。
|
||||
@@ -1,61 +0,0 @@
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.use(Icon);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
|
||||
#### 使用本地字体文件
|
||||
Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件，如果想要使用本地字体文件，请引入下面的 css 文件
|
||||
|
||||
```js
|
||||
import 'vant/lib/vant-css/icon-local.css';
|
||||
```
|
||||
|
||||
#### 自定义图标
|
||||
如果需要在现有 Icon 的基础上使用更多图标，可以引入你需要的 iconfont 对应的 ttf 文件和样式，之后就可以在 Icon 组件中直接使用
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'custom-iconfont';
|
||||
src: url('./iconfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-family: 'vant-icon', 'custom-iconfont' !important;
|
||||
}
|
||||
|
||||
.van-icon-extra:before {
|
||||
content: '\e626';
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<van-icon name="extra" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | 图标名称 | `String` | `''` |
|
||||
| info | 图标右上角文字提示 | `String | Number` | `''` |
|
||||
| color | 图标颜色 | `String` | `''` | - |
|
||||
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击图标时触发 | - |
|
||||
@@ -1,49 +0,0 @@
|
||||
## ImagePreview 图片预览
|
||||
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
```
|
||||
|
||||
#### 指定初始位置
|
||||
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
], 1);
|
||||
```
|
||||
|
||||
#### 手动关闭
|
||||
|
||||
```javascript
|
||||
const instance = ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
|
||||
setTimeout(() => {
|
||||
instance.close();
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
| startPosition | 图片预览起始位置索引 | `Number` |
|
||||
@@ -1,67 +0,0 @@
|
||||
## Lazyload 图片懒加载
|
||||
|
||||
### 使用指南
|
||||
|
||||
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Lazyload } from 'vant';
|
||||
|
||||
Vue.use(Lazyload, options);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
将`v-lazy`指令的值设置为你需要懒加载的图片
|
||||
|
||||
```html
|
||||
<img v-for="img in imageList" v-lazy="img" >
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 背景图懒加载
|
||||
|
||||
和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
|
||||
|
||||
```html
|
||||
<div v-for="img in imageList" v-lazy:background-image="img" />
|
||||
```
|
||||
|
||||
#### 懒加载模块
|
||||
|
||||
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
|
||||
|
||||
```html
|
||||
<lazy-component>
|
||||
<img v-for="img in imageList" v-lazy="img" >
|
||||
</lazy-component>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| loading | 加载时的图片 | `String` | - |
|
||||
| error | 错误时的图片 | `String` | - |
|
||||
| preload | 预加载高度的比例 | `String` | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 |
|
||||
| adapter | 适配器 | `Object` | - |
|
||||
| filter | 图片url过滤 | `Object` | - |
|
||||
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` |
|
||||
|
||||
更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
|
||||
@@ -1,66 +0,0 @@
|
||||
## List 列表
|
||||
瀑布流滚动加载，用于控制长列表的展示
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { List } from 'vant';
|
||||
|
||||
Vue.use(List);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in list" :key="item" :title="item + ''" />
|
||||
</van-list>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.list.push(this.list.length + 1);
|
||||
}
|
||||
this.loading = false;
|
||||
|
||||
if (this.list.length >= 40) {
|
||||
this.finished = true;
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| loading | 是否显示加载中提示，加载过程中不触发`load`事件 | `Boolean` | `false` |
|
||||
| finished | 是否已加载完成，加载完成后不再触发`load`事件 | `Boolean` | `false` |
|
||||
| offset | 滚动条与底部距离小于 offset 时触发`load`事件 | `Number` | `300` |
|
||||
| loading-text | 加载中提示文案 | `String` | `加载中...` |
|
||||
| immediate-check | 是否在初始化时立即执行滚动位置检查 | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| load | 滚动条与底部距离小于 offset 时触发 | - |
|
||||
@@ -1,32 +0,0 @@
|
||||
## Loading 加载
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.use(Loading);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### Circular
|
||||
|
||||
```html
|
||||
<van-loading color="black" />
|
||||
<van-loading color="white" />
|
||||
```
|
||||
|
||||
#### Spinner
|
||||
|
||||
```html
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| color | 颜色，可选值为 `block` `white` | `String` | `black` |
|
||||
| type | 类型，可选值为 `circular` `spinner` | `String` | `circular` |
|
||||
| size | 大小 | `String` | `30px` |
|
||||
@@ -1,72 +0,0 @@
|
||||
## NavBar 导航栏
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NavBar } from 'vant';
|
||||
|
||||
Vue.use(NavBar);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="标题"
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
Toast('返回');
|
||||
},
|
||||
onClickRight() {
|
||||
Toast('按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
通过 slot 定制内容
|
||||
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 标题 | `String` | `''` |
|
||||
| left-text | 左侧文案 | `String` | `''` |
|
||||
| right-text | 右侧文案 | `String` | `''` |
|
||||
| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` |
|
||||
| fixed | 是否固定在顶部 | `Boolean` | `false` |
|
||||
| z-index | 元素 z-index | `Number` | `1` |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| left | 自定义左侧区域内容 |
|
||||
| right | 自定义右侧区域内容 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-left | 点击左侧按钮时触发 | - |
|
||||
| click-right | 点击右侧按钮时触发 | - |
|
||||
@@ -1,61 +0,0 @@
|
||||
## NoticeBar 通告栏
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NoticeBar } from 'vant';
|
||||
|
||||
Vue.use(NoticeBar);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
|
||||
left-icon="https://img.yzcdn.cn/1.png"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 禁用滚动
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
#### 通告栏模式
|
||||
默认模式为空，支持`closeable`和`link`。
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| mode | 通告栏模式，可选值为 `closeable` `link` | `String` | `''` |
|
||||
| delay | 动画延迟时间 (s) | `Number` | `1` |
|
||||
| speed | 滚动速率 (px/s) | `Number` | `50` |
|
||||
| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` |
|
||||
| left-icon | 左侧图标图片 URL | `String` | - |
|
||||
| color | 文本颜色 | `String` | `#f60` |
|
||||
| background | 滚动条背景 | `String` | `#fff7cc` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击事件回调 | - |
|
||||
@@ -1,84 +0,0 @@
|
||||
## NumberKeyboard 数字键盘
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.use(NumberKeyboard);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 默认样式
|
||||
|
||||
```html
|
||||
<van-button @touchstart.native.stop="show = true">
|
||||
弹出默认键盘
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
extra-key="."
|
||||
close-button-text="完成"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast(value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 自定义样式
|
||||
|
||||
```html
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
theme="custom"
|
||||
extra-key="."
|
||||
close-button-text="完成"
|
||||
@blur="show = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| show | 是否显示键盘 | `Boolean` | - |
|
||||
| theme | 样式风格，可选值为 `default` `custom` | `String` | `default` |
|
||||
| title | 键盘标题 | `String` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` |
|
||||
| z-index | 键盘 z-index | `Number` | `100` |
|
||||
| extra-key | 左下角按键内容 | `String` | `''` |
|
||||
| close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` |
|
||||
| show-delete-key | 是否展示删除按钮 | `Boolean` | `true` |
|
||||
| hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| input | 点击按键时触发 | key: 按键内容 |
|
||||
| delete | 点击删除键时触发 | - |
|
||||
| blur | 点击非键盘区域时触发 | - |
|
||||
| show | 键盘完全弹出时触发 | - |
|
||||
| hide | 键盘完全收起时触发 | - |
|
||||
@@ -1,71 +0,0 @@
|
||||
|
||||
## Pagination 分页
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Pagination } from 'vant';
|
||||
|
||||
Vue.use(Pagination);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="24"
|
||||
:items-per-page="5"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 简单模式
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:page-count="12"
|
||||
mode="simple"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 显示省略号
|
||||
|
||||
```html
|
||||
<van-pagination
|
||||
v-model="currentPage"
|
||||
:total-items="125"
|
||||
:show-page-size="3"
|
||||
force-ellipses
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前页码 | `Number` | - |
|
||||
| mode | 显示模式，可选值为 `simple` `multi` | `String` | `multi` |
|
||||
| items-per-page | 每页记录数 | `Number` | `10` |
|
||||
| previous-text | 上一页 | `String` | `上一页` |
|
||||
| next-text | 下一页 | `String` | `下一页` |
|
||||
| show-page-size | 显示的页码个数 | `Number` | `5` |
|
||||
| force-ellipses | 显示省略号 | `Boolean` | `false` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 页码改变时触发 | - |
|
||||
@@ -1,48 +0,0 @@
|
||||
## Panel 面板
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Panel } from 'vant';
|
||||
|
||||
Vue.use(Panel);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
面板只是一个容器，里面可以放入自定义的内容
|
||||
|
||||
```html
|
||||
<van-panel title="标题" desc="描述信息" status="状态">
|
||||
<div>内容</div>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
#### 高级用法
|
||||
使用`slot`自定义内容
|
||||
|
||||
```html
|
||||
<van-panel title="标题" desc="描述信息" status="状态">
|
||||
<div>内容</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">按钮</van-button>
|
||||
<van-button size="small" type="danger">按钮</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| title | 标题 | `String` | - |
|
||||
| desc | 描述 | `String` | - |
|
||||
| status | 状态 | `String` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| header | 自定义 header |
|
||||
| footer | 自定义 footer |
|
||||
@@ -1,65 +0,0 @@
|
||||
## PasswordInput 密码输入框
|
||||
密码输入框组件通常与 [数字键盘](#/zh-CN/number-keyboard) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { PasswordInput, NumberKeyboard } from 'vant';
|
||||
|
||||
Vue.use(PasswordInput).use(NumberKeyboard);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 密码输入框 -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="密码为 6 位数字"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<!-- 数字键盘 -->
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '123',
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| value | 密码值 | `String` | `''` |
|
||||
| length | 密码最大长度 | `Number` | `6` |
|
||||
| info | 输入框下方提示 | `String` | - |
|
||||
| error-info | 输入框下方错误提示 | `String` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
@@ -1,176 +0,0 @@
|
||||
## Picker 选择器
|
||||
选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.use(Picker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 禁用选项
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 展示顶部栏
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="标题"
|
||||
:columns="columns"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('取消');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 多列联动
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: citys['浙江'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" loading />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` |
|
||||
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` |
|
||||
| title | 顶部栏标题 | `String` | `''` |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` |
|
||||
| value-key | 选项对象中，文字对应的 key | `String` | `text` |
|
||||
| item-height | 选项高度 | `Number` | `44` |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
|
||||
### Columns 数据结构
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中项的索引，默认为 0 |
|
||||
| className | 为对应列添加额外的`class` |
|
||||
|
||||
### Picker 实例
|
||||
在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getValues() | 获取所有列选中的值，返回一个数组 |
|
||||
| setValues(values) | 设置所有列选中的值 |
|
||||
| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 |
|
||||
| setIndexes(indexes) | 设置所有列选中值对应的索引 |
|
||||
| getColumnValue(columnIndex) | 获取对应列选中的值 |
|
||||
| setColumnValue(columnIndex, value) | 设置对应列选中的值 |
|
||||
| getColumnIndex(columnIndex) | 获取对应列选中项的索引 |
|
||||
| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 |
|
||||
| getColumnValues(columnIndex) | 获取对应列中所有选项 |
|
||||
| setColumnValues(columnIndex, values) | 设置对应列中所有选项 |
|
||||
@@ -1,56 +0,0 @@
|
||||
## Popup 弹出层
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.use(Popup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
`popup`默认从中间弹出
|
||||
|
||||
```html
|
||||
<van-popup v-model="show">内容</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 弹出位置
|
||||
通过`position`属性设置 Popup 弹出位置
|
||||
|
||||
```html
|
||||
<van-popup v-model="show" position="top" :overlay="false">
|
||||
内容
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` |
|
||||
| overlay | 是否显示背景蒙层 | `Boolean` | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` |
|
||||
| position | 可选值为 `top` `bottom` `right` `left` | `String` | - |
|
||||
| overlay-class | 自定义蒙层 class | `String` | `` |
|
||||
| overlay-style | 自定义蒙层样式 | `Object` | `` |
|
||||
| close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
|
||||
| transition | transition 名称 | `String` | `popup-slide` |
|
||||
| get-container | 指定弹出层挂载的 HTML 节点 | `() => HTMLElement` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click-overlay | 点击蒙层时触发 | - |
|
||||
@@ -1,51 +0,0 @@
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Progress } from 'vant';
|
||||
|
||||
Vue.use(Progress);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
|
||||
```html
|
||||
<van-progress :percentage="0" />
|
||||
<van-progress :percentage="46" />
|
||||
<van-progress :percentage="100" />
|
||||
```
|
||||
|
||||
|
||||
#### 进度条置灰
|
||||
|
||||
```html
|
||||
<van-progress inactive :percentage="0" />
|
||||
<van-progress inactive :percentage="46" />
|
||||
<van-progress inactive :percentage="100" />
|
||||
```
|
||||
|
||||
|
||||
#### 样式定制
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
```html
|
||||
<van-progress pivot-text="红色" color="#ed5050" :percentage="26" />
|
||||
<van-progress pivot-text="橙色" color="#f60" :percentage="46" />
|
||||
<van-progress pivot-text="黄色" color="#f09000" :percentage="66" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| inactive | 是否置灰 | `Boolean` | `false` |
|
||||
| percentage | 进度百分比 | `Number` | `false` |
|
||||
| show-pivot | 是否显示进度文字 | `Boolean` | `true` |
|
||||
| pivot-text | 文字显示 | `String` | 百分比文字 |
|
||||
| color | 进度条颜色 | `String` | `#38f` |
|
||||
| text-color | 进度条文字颜色 | `String` | `#fff` |
|
||||
@@ -1,67 +0,0 @@
|
||||
## PullRefresh 下拉刷新
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { PullRefresh } from 'vant';
|
||||
|
||||
Vue.use(PullRefresh);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
下拉刷新时会触发 `refresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `v-model` 设置为 `false`，表示加载完成。
|
||||
|
||||
```html
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
|
||||
<p>刷新次数: {{ count }}</p>
|
||||
</van-pull-refresh>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onRefresh() {
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 是否在加载中 | `Boolean` | - |
|
||||
| pulling-text | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` |
|
||||
| loosing-text | 释放过程中顶部文案 | `String` | `释放即可刷新...` |
|
||||
| loading-text | 加载过程中顶部文案 | `String` | `加载中...` |
|
||||
| animation-duration | 动画时长 | `Number` | `300` |
|
||||
| head-height | 顶部内容高度 | `Number` | `50` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| refresh | 下拉刷新时触发 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| normal | 非下拉状态时顶部内容 |
|
||||
| pulling | 下拉过程中顶部内容 |
|
||||
| loosing | 释放过程中顶部内容 |
|
||||
| loading | 加载过程中顶部内容 |
|
||||
@@ -1,77 +0,0 @@
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { RadioGroup, Radio } from 'vant';
|
||||
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(Radio);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
通过`v-model`绑定值当前选中项的 name
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
通过`disabled`属性禁止选项切换，在`van-radio`上设置`diabled`可以禁用单个选项
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio" disabled>
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
#### 与 Cell 组件一起使用
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="radio">
|
||||
<van-cell-group>
|
||||
<van-cell :title="单选框 1" clickable @click="radio = '1'">
|
||||
<van-radio name="1" />
|
||||
</van-cell>
|
||||
<van-cell :title="单选框 2" clickable @click="radio = '2'">
|
||||
<van-radio name="2" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
```
|
||||
|
||||
### Radio API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| name | 唯一标识符 | 任意类型 | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前选中项的 name | 任意类型 | - |
|
||||
| disabled | 是否禁用所有单选框 | `Boolean` | `false` |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前选中项的 name |
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user