blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] update code style (#484)

Browse Source
This commit is contained in:
neverland 2017-12-26 12:39:52 +08:00 committed by GitHub
parent 508cdfc0c9
commit 6b563b2e5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
68 changed files with 431 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/demos/views/address-edit.vue
View File

@ -3,9 +3,9 @@
<demo-block :title="$t('basicUsage')">
<van-address-edit
:area-list="areaList"
:show-postal="true"
:show-set-default="true"
:show-search-result="true"
show-postal
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"

4
docs/demos/views/cell.vue
View File

@ -36,9 +36,7 @@
</van-cell>
<van-cell :title="$t('cell')" icon="location" is-link />
<van-cell :title="$t('cell')">
<template slot="right-icon">
<van-icon name="search" class="van-cell__right-icon" />
</template>
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
</van-cell>
</van-cell-group>
</demo-block>

4
docs/demos/views/search.vue
View File

@ -9,7 +9,7 @@
<van-search
v-model="value"
:placeholder="$t('placeholder')"
:show-action="true"
show-action
@search="onSearch"
@cancel="onCancel"
/>
@ -19,7 +19,7 @@
<demo-block :title="$t('title3')">
<van-search
v-model="value"
:show-action="true"
show-action
@search="onSearch"
>
<div slot="action" @click="onSearch">{{ $t('search') }}</div>

2
docs/demos/views/stepper.vue
View File

@ -9,7 +9,7 @@
</demo-block>
<demo-block :title="$t('advancedUsage')">
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
<van-stepper v-model="stepper2" :min="5" :max="40" :step="2" :default-value="9" />
</demo-block>
</demo-section>
</template>

6
docs/markdown/en-US/actionsheet.md
View File

@ -40,7 +40,7 @@ export default {
#### Actionsheet with cancel button
```html
<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
<van-actionsheet v-model="show" :actions="actions" cancel-text="Cancel" />
```
#### Actionsheet with title
@ -58,9 +58,9 @@ Actionsheet will get another style if there is a `title` prop.
|-----------|-----------|-----------|-------------|-------------|
| actions | Options | `Array` | `[]` | - |
| title | Title | `String` | - | - |
| cancelText | Text of cancel button | `String` | - | - |
| cancel-text | Text of cancel button | `String` | - | - |
| overlay | Whether to show overlay | `Boolean` | - | - |
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | - | - |
### Data struct of actions

26
docs/markdown/en-US/address-edit.md
View File

@ -14,11 +14,11 @@ Vue.use(AddressEdit);
```html
<van-address-edit
:areaList="areaList"
:showPostal="true"
:showSetDefault="true"
:showSearchResult="true"
:searchResult="searchResult"
:area-list="areaList"
show-postal
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
@ -60,14 +60,14 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| areaList | Area List | `Object` | - | - |
| addressInfo | Address Info | `Object` | `{}` | - |
| searchResult | Address search result | `Array` | `[]` | - |
| showPostal | Whether to show postal field | `Boolean` | `false` | - |
| showSetDefault | Whether to show default address switch | `Boolean` | `false` | - |
| showSearchResult | Whether to show address search result | `Boolean` | `false` | - |
| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
| 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-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` | - |
### Event

2
docs/markdown/en-US/address-list.md
View File

@ -59,7 +59,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| v-model | Id of chosen address | String | - | - |
| list | Address list | Array | `[]` | - |
| addButtonText | Add button text | String | `Add new address` | - |
| add-button-text | Add button text | String | `Add new address` | - |
### Event

16
docs/markdown/en-US/area.md
View File

@ -12,10 +12,10 @@ Vue.use(Area);
#### Basic Usage
To initailize `Area` component, `areaList` property is required. Data structure of `areaList` will be introduced later.
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
```html
<van-area :areaList="areaList" />
<van-area :area-list="areaList" />
```
#### Initial Value
@ -23,16 +23,16 @@ To initailize `Area` component, `areaList` property is required. Data structure
To have a selected value，simply pass the `code` of target area to `value` property.
```html
<van-area :areaList="areaList" value="110101" />
<van-area :area-list="areaList" value="110101" />
```
#### Columns Number
`columnsNum` property is able to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
Set `columnsNum` with 2, you'll have a 2 level picker.
`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 :areaList="areaList" :columnsNum="2" title="Title" />
<van-area :area-list="areaList" :columns-num="2" title="Title" />
```
@ -42,8 +42,8 @@ Set `columnsNum` with 2, you'll have a 2 level picker.
|-----------|-----------|-----------|-------------|-------------|
| value | the `code` of selected area | `String` | - | - |
| title | Toolbar title | `String` | `''` | - |
| areaList | an object contains these properties: `province_list`, `city_list` and `county_list` | `Object` | - | - |
| columnsNum | level of picker | `String`,`Number` | 3 | - |
| area-list | an object contains these properties: `province_list`, `city_list` and `county_list` | `Object` | - | - |
| columns-num | level of picker | `String`,`Number` | 3 | - |
### Event

14
docs/markdown/en-US/badge.md
View File

@ -10,14 +10,14 @@ Vue.use(Badge);
### Usage
#### Basic Usage
Use `activeKey` prop to set index of chosen 'badge'
Use `active-key` prop to set index of chosen 'badge'
```html
<van-badge-group :activeKey="activeKey">
<van-badge title="Title" @click="onClick"></van-badge>
<van-badge title="Title" @click="onClick" info="8"></van-badge>
<van-badge title="Title" @click="onClick" info="99"></van-badge>
<van-badge title="Title" @click="onClick" info="199"></van-badge>
<van-badge-group :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>
```
@ -40,7 +40,7 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| activeKey | Index of chosen badge | `String | Number` | `0` | - |
| active-key | Index of chosen badge | `String | Number` | `0` | - |
### Badge API
| Attribute | Description | Type | Default | Accepted Values |

10
docs/markdown/en-US/button.md
View File

@ -51,14 +51,14 @@ Use `tag` prop to custom button tag
#### Action Button
```html
<van-button type="primary" bottomAction>Button</van-button>
<van-button type="primary" bottom-action>Button</van-button>
<van-row>
<van-col span="12">
<van-button bottomAction>Button</van-button>
<van-button bottom-action>Button</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottomAction>Button</van-button>
<van-button type="primary" bottom-action>Button</van-button>
</van-col>
</van-row>
```
@ -70,8 +70,8 @@ Use `tag` prop to custom button tag
| type | Type | `String` | `default` | `primary` `danger` |
| size | Size | `String` | `normal` | `large` `small` `mini` |
| tag | Tag | `String` | `button` | - |
| nativeType | Native Type Attribute | `String` | `''` | - |
| native-type | Native Type Attribute | `String` | `''` | - |
| diabled | Whether disable button | `Boolean` | `false` | - |
| loading | Whether show loading status | `Boolean` | `false` | - |
| block | Whether to set display block | `Boolean` | `false` | - |
| bottomAction | Whether to be action button | `Boolean` | `false` | - |
| bottom-action | Whether to be action button | `Boolean` | `false` | - |

14
docs/markdown/en-US/cell.md
View File

@ -39,8 +39,8 @@ Vue.use(CellGroup);
```html
<van-cell-group>
<van-cell title="Cell title" isLink />
<van-cell title="Cell title" isLink value="Content" />
<van-cell title="Cell title" is-link />
<van-cell title="Cell title" is-link value="Content" />
</van-cell-group>
```
@ -48,17 +48,15 @@ Vue.use(CellGroup);
```html
<van-cell-group>
<van-cell value="Content" icon="shop" isLink>
<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" isLink />
<van-cell title="Cell title" icon="location" is-link />
<van-cell title="Cell title">
<template slot="right-icon">
<van-icon name="search" class="van-cell__right-icon" />
</template>
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
</van-cell>
</van-cell-group>
```
@ -80,7 +78,7 @@ Vue.use(CellGroup);
| url | Link | `String` | - | - |
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
| replace | If true, the navigation will not leave a history record | `String` | `false` | - |
| isLink | Whether to show link icon | `Boolean` | `false` | - |
| is-link | Whether to show link icon | `Boolean` | `false` | - |
| required | Whether to show required mark | `Boolean` | `false` | - |
### Slot

16
docs/markdown/en-US/contact.md
View File

@ -37,8 +37,8 @@ Vue.use(ContactEdit);
<!-- Contact Edit -->
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contactInfo="editingContact"
:isEdit="isEdit"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@delete="onDelete"
/>
@ -134,16 +134,16 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `add` | `edit` |
| addText | Add card text | `String` | `Add contact info` | - |
| name | Name | `String` | - | - |
| tel | Phone | `String` | - | - |
| add-text | Add card text | `String` | `Add contact info` | - |
### ContactList API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Id of chosen contact | `String | Number` | - | - |
| addText | Add button text | `String` | `Add new contact` | - |
| list | Contact list | `Array` | `[]` | - |
| add-text | Add button text | `String` | `Add new contact` | - |
### ContactList Event
@ -156,10 +156,10 @@ export default {
### ContactEdit API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| contactInfo | Contact Info | `Object` | `[]` | - |
| isEdit | Whether is editing | `Boolean` | `false` | - |
| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
| 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` | - |
### ContactEdit Event

24
docs/markdown/en-US/coupon.md
View File

@ -16,7 +16,7 @@ Vue.use(CouponList);
<!-- Coupon Cell -->
<van-coupon-cell
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
@ -24,8 +24,8 @@ Vue.use(CouponList);
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:disabledCoupons="disabledCoupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
@ -71,7 +71,7 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Cell title | `String` | `Coupon` | - |
| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
| chosen-coupon | Index of chosen coupon | `Number` | `-1` | - |
| coupons | Coupon list | `Array` | `[]` | - |
| editable | Cell editable | `Boolean` | `true` | - |
@ -79,15 +79,15 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
| chosen-coupon | Index of chosen coupon | `Number` | `-1` | - |
| coupons | Coupon list | `Array` | `[]` | - |
| disabledCoupons | Disabled voupon list | `Array` | `[]` | - |
| exchangeButtonText | Exchange button text | `String` | `Exchange` | - |
| exchangeButtonDisabled | Whether to disable exchange button | `Boolean` | `false` | - |
| displayedCouponIndex | Index of displayed coupon | `Number` | - | - |
| closeButtonText | Close button text | `String` | `Close` | - |
| disabledListTitle | Disabled list title | `String` | `Unavailable` | - |
| inputPlaceholder | Input placeholder | `String` | `Coupon code` | - |
| disabled-coupons | Disabled voupon list | `Array` | `[]` | - |
| exchange-button-text | Exchange button text | `String` | `Exchange` | - |
| exchange-button-disabled | Whether to disable exchange button | `Boolean` | `false` | - |
| 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

18
docs/markdown/en-US/datetime-picker.md
View File

@ -15,10 +15,10 @@ Vue.use(DatetimePicker);
<van-datetime-picker
v-model="currentDate"
type="datetime"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:maxDate="maxDate"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
:max-date="maxDate"
/>
```
@ -65,11 +65,11 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| type | Picker type | `String` | 'datetime' | 'date', 'time' |
| minDate | Min date | `Date` | Ten years ago on January 1 | - |
| maxDate | Max date | `Date` | Ten years later on December 31 | - |
| minHour | Min hour | `Number` | `0` | - |
| maxHour | Max hour | `Number` | `23` | - |
| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
| 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` | - |
| visibile-column-count | Count of columns to show | `Number` | `5` | - |
### Event

16
docs/markdown/en-US/field.md
View File

@ -14,7 +14,7 @@ The value of filed is bound with v-model.
```html
<van-cell-group>
<van-field v-model="value" placeholder="Username"></van-field>
<van-field v-model="value" placeholder="Username" />
</van-cell-group>
```
@ -30,16 +30,15 @@ Use `type` prop to custom diffrent type fileds.
placeholder="Username"
required
@click-icon="username = ''"
>
</van-field>
/>
<van-field
v-model="password"
type="password"
label="Password"
placeholder="Password"
required>
</van-field>
required
/>
</van-cell-group>
```
@ -47,7 +46,7 @@ Use `type` prop to custom diffrent type fileds.
```html
<van-cell-group>
<van-field value="Disabled" label="Username" disabled></van-field>
<van-field value="Disabled" label="Username" disabled />
</van-cell-group>
```
@ -55,7 +54,7 @@ Use `type` prop to custom diffrent type fileds.
```html
<van-cell-group>
<van-field label="Username" placeholder="Username" error></van-field>
<van-field label="Username" placeholder="Username" error />
</van-cell-group>
```
@ -71,8 +70,7 @@ Textarea Filed can be auto resize when has `autosize` prop
placeholder="Message"
rows="1"
autosize
>
</van-field>
/>
</van-cell-group>
```

2
docs/markdown/en-US/goods-action.md
View File

@ -59,7 +59,7 @@ Use `info` prop to show messages in upper right corner of icon
|-----------|-----------|-----------|-------------|-------------|
| text | Button text | `String` | - | - |
| icon | Icon | `String` | - | - |
| iconClass | Icon class name | `String` | `''` | - |
| icon-class | Icon class name | `String` | `''` | - |
| info | Info message | `String` | - | - |
| url | Link | `String` | - | - |
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |

4
docs/markdown/en-US/lazyload.md
View File

@ -14,7 +14,7 @@ Vue.use(Lazyload, options);
#### Basic Usage
```html
<img v-for="img in imageList" v-lazy="img">
<img v-for="img in imageList" v-lazy="img" >
```
```javascript
@ -41,7 +41,7 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
```html
<lazy-component>
<img v-for="img in imageList" v-lazy="img">
<img v-for="img in imageList" v-lazy="img" >
</lazy-component>
```

14
docs/markdown/en-US/nav-bar.md
View File

@ -14,9 +14,9 @@ Vue.use(NavBar);
```html
<van-nav-bar
title="Title"
leftText="Back"
rightText="Button"
leftArrow
left-text="Back"
right-text="Button"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
@ -38,7 +38,7 @@ export default {
#### Advanced Usage
```html
<van-nav-bar title="Title" leftText="Back" leftArrow>
<van-nav-bar title="Title" left-text="Back" left-arrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
@ -48,9 +48,9 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | `''` | - |
| leftText | Left Text | `String` | `''` | - |
| rightText | Right Text | `String` | `''` | - |
| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
| left-text | Left Text | `String` | `''` | - |
| right-text | Right Text | `String` | `''` | - |
| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
| fixed | Whether to fixed top | `Boolean` | `false` | - |
### Slot

4
docs/markdown/en-US/notice-bar.md
View File

@ -14,7 +14,7 @@ Vue.use(NoticeBar);
```html
<van-notice-bar
text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
leftIcon="https://img.yzcdn.cn/1.png"
left-icon="https://img.yzcdn.cn/1.png"
/>
```
@ -46,7 +46,7 @@ Vue.use(NoticeBar);
| delay | Animation delay (s) | Number | `1` | - |
| speed | Scroll speed (px) | Number | `50` | - |
| scrollable | Whether to scroll content | Boolean | `true` | - |
| leftIcon | Image url of left icon | String | - | - |
| left-icon | Image url of left icon | String | - | - |
| color | Text color | String | `#f60` | - |
| background | Background color | String | `#fff7cc` | - |

30
docs/markdown/en-US/number-keyboard.md
View File

@ -12,15 +12,15 @@ Vue.use(NumberKeyboard);
#### Default Style
```html
<van-button @touchstart.native.stop="showKeyboard = true">
<van-button @touchstart.native.stop="show = true">
Show Keyboard
</van-button>
<van-number-keyboard
extraKey="."
:show="showKeyboard"
closeButtonText="Close"
@blur="showKeyboard = false"
:show="show"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
@ -30,7 +30,7 @@ Vue.use(NumberKeyboard);
export default {
data() {
return {
showKeyboard: true
show: true
}
},
@ -49,11 +49,11 @@ export default {
```html
<van-number-keyboard
:show="show"
theme="custom"
extraKey="."
:show="showKeyboard"
closeButtonText="Close"
@blur="showKeyboard = false"
extra-key="."
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
@ -66,12 +66,12 @@ export default {
| show | Whether to show keyboard | `Boolean` | - | - |
| theme | Keyboard theme | `String` | `Default` | `Custom` |
| title | Keyboard title | `String` | - | - |
| zIndex | Keyboard z-index | `Number` | `100` | - |
| extraKey | Content of bottom left key | `String` | `''` | - |
| closeButtonText | Close button text | `String` | `-` | - |
| transition | Whether to show transition animation | `Boolean` | `true` | - |
| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
| hideOnClickOutside | Whether to hide keyboard when click outside | `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

26
docs/markdown/en-US/pagination.md
View File

@ -14,8 +14,8 @@ Vue.use(Pagination);
```html
<van-pagination
v-model="currentPage"
:totalItems="24"
:itemsPerPage="5"
:total-items="24"
:items-per-page="5"
/>
```
@ -34,7 +34,7 @@ export default {
```html
<van-pagination
v-model="currentPage"
:pageCount="12"
:page-count="12"
mode="simple"
/>
```
@ -44,9 +44,9 @@ export default {
```html
<van-pagination
v-model="currentPage"
:totalItems="125"
:showPageSize="3"
:forceEllipses="true"
:total-items="125"
:show-page-size="3"
force-ellipses
/>
```
@ -54,13 +54,13 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | pageModel | `Object` | - | - |
| mode | mode | `String` | `multi` | `simple` |
| itemsPerPage | itemsPerPage | `Number` | `10` | - |
| prevText | previousText | `String` | `Previous` | - |
| nextText | nextText | `String` | `Next` | - |
| showPageSize | showPageSize | `Number` | `5` | - |
| forceEllipses | ellipses | `Boolean` | `false` | - |
| v-model | Current page number | `Number` | - | - |
| mode | Mode | `String` | `multi` | `simple` |
| 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

2
docs/markdown/en-US/password-input.md
View File

@ -57,7 +57,7 @@ export default {
| value | Password value | `String` | `''` | - |
| length | Maxlength of password | `Number` | `6` | - |
| info | Bottom info | `String` | - | - |
| errorInfo | Bottom error info | `String` | - | - |
| error-info | Bottom error info | `String` | - | - |
### Event

10
docs/markdown/en-US/picker.md
View File

@ -52,7 +52,7 @@ export default {
```html
<van-picker
showToolbar
show-toolbar
:title="Title"
:columns="columns"
@cancel="onCancel"
@ -119,11 +119,11 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| columns | Columns data | `Array` | `[]` | - |
| showToolbar | Whether to show toolbar | `Boolean` | `false` | - |
| show-toolbar | Whether to show toolbar | `Boolean` | `false` | - |
| title | Toolbar title | `String` | `''` | - |
| itemHeight | Option height | `Number` | `44` | - |
| visibileColumnCount | Count of visible columns | `Number` | `5` | - |
| valueKey | Key of option text | `String` | `text` | - |
| item-height | Option height | `Number` | `44` | - |
| visibile-column-count | Count of visible columns | `Number` | `5` | - |
| value-key | Key of option text | `String` | `text` | - |
### Data struct of columns

10
docs/markdown/en-US/popup.md
View File

@ -41,10 +41,10 @@ Use `position` prop to set popup display position
|-----------|-----------|-----------|-------------|-------------|
| v-model | Whether to show popup | `Boolean` | `false` | - |
| overlay | Whether to show overlay | `Boolean` | `true` | - |
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
| lock-on-scroll | Lock body scroll | `Boolean` | `false` | - |
| position | Position | `String` | - | `top` `bottom` `right` `left` |
| overlayClass | Custom overlay class | `String` | `` | - |
| overlayStyle | Custom overlay style | `Object` | - | - |
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
| 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` | - |
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
| prevent-scroll | Prevent background scroll | `Boolean` | `false` | - |

14
docs/markdown/en-US/progress.md
View File

@ -29,12 +29,12 @@ Use 'percentage' prop to set current progress
#### Custom Style
Use `pivotText` to custom text，use `color` to custom bar color
Use `pivot-text` to custom text，use `color` to custom bar color
```html
<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
<van-progress pivotText="Orange" color="#f60" :percentage="46" />
<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
<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
@ -43,7 +43,7 @@ Use `pivotText` to custom text，use `color` to custom bar color
|-----------|-----------|-----------|-------------|-------------|
| inactive | Whether to be gray | `Boolean` | `false` | - |
| percentage | Percentage | `Number` | `false` | `0-100` |
| showPivot | Whether to show text | `Boolean` | `true` | - |
| pivotText | Text | `String` | percentage | - |
| show-pivot | Whether to show text | `Boolean` | `true` | - |
| pivot-text | Text | `String` | percentage | - |
| color | Color | `String` | `#38f` | hexvalue |
| textColor | Text color | `String` | `#fff` | hexvalue |
| text-color | Text color | `String` | `#fff` | hexvalue |

10
docs/markdown/en-US/pull-refresh.md
View File

@ -49,11 +49,11 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Loading status | `Boolean` | - | - |
| pullingText | Text to show when pulling | `String` | `下拉即可刷新...` | - |
| loosingText | Text to show when loosing | `String` | `释放即可刷新...` | - |
| loadingText | Text to show when loading | `String` | `加载中...` | - |
| animationDuration | Animation duration | `Number` | `300` | - |
| headHeight | Height of head | `Number` | `50` | - |
| pulling-text | Text to show when pulling | `String` | `下拉即可刷新...` | - |
| loosing-text | Text to show when loosing | `String` | `释放即可刷新...` | - |
| loading-text | Text to show when loading | `String` | `加载中...` | - |
| animation-duration | Animation duration | `Number` | `300` | - |
| head-height | Height of head | `Number` | `50` | - |
### Slot

13
docs/markdown/en-US/search.md
View File

@ -35,10 +35,10 @@ Tips: There will be a search button on the keyboard when Search is inside a form
<van-search
v-model="value"
placeholder="Placeholder"
:showAction="true"
show-action
@search="onSearch"
@cancel="onCancel">
</van-search>
@cancel="onCancel"
/>
</form>
```
@ -48,8 +48,9 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
```html
<van-search
v-model="value"
:showAction="true"
@search="onSearch">
show-action
@search="onSearch"
>
<div slot="action" @click="onSearch">Search</div>
</van-search>
```
@ -61,7 +62,7 @@ Search support all native properties of input tag，such as `maxlength`、`place
|-----------|-----------|-----------|-------------|-------------|
| placeholder | Input placeholder | `String` | - | - |
| background | Background color | `String` | `#f2f2f2` | - |
| showAction | Whether to show right button | `Boolean` | false | - |
| show-action | Whether to show right button | `Boolean` | false | - |
### Event
Search support all native events of input tag，such as `focus`、`blur`、`keypress`

42
docs/markdown/en-US/sku.md
View File

@ -15,12 +15,12 @@ Vue.use(Sku);
v-model="showBase"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="resetStepperOnHide"
:disableStepperInput="disableStepperInput"
:quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide"
:disable-stepper-input="disableStepperInput"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
/>
@ -31,16 +31,16 @@ Vue.use(Sku);
```html
<van-sku
v-model="showCustomAction"
stepperTitle="Stepper title"
stepper-title="Stepper title"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:showAddCartBtn="true"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:show-add-cart-btn="true"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="true"
:initialSku="initialSku"
:quota-used="quotaUsed"
:reset-stepper-on-hide="true"
:initial-sku="initialSku"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
@ -49,9 +49,9 @@ Vue.use(Sku);
<!-- custom sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<van-button bottomAction @click="handlePointClicked">Button</van-button>
<van-button bottom-action @click="handlePointClicked">Button</van-button>
<!-- trigger sku inner event -->
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
</div>
</template>
</van-sku>
@ -64,14 +64,14 @@ Vue.use(Sku);
| v-model | Whether to show sku | `Boolean` | `false` | - |
| sku | Sku data | `Object` | - | - |
| goods | Goods info | `Object` | - | - |
| goodsId | Goods id | `String | Number` | - | - |
| hideStock | Whether to hide stock | `Boolean` | `false` | - |
| showAddCartBtn | Whether to show cart button | `Boolean` | `true` | - |
| 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` | - |
| quotaUsed | Used quota | `Number` | `0` | - |
| resetStepperOnHide | Whether to reset stepper when hide | `Boolean` | `false` | - |
| disableStepperInput | Whether to disable stepper input | `Boolean` | `false` | - |
| stepperTitle | Quantity title | `String` | `Quantity` | - |
| quota-used | Used quota | `Number` | `0` | - |
| reset-stepper-on-hide | Whether to reset stepper when hide | `Boolean` | `false` | - |
| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
| stepper-title | Quantity title | `String` | `Quantity` | - |
### Event

12
docs/markdown/en-US/stepper.md
View File

@ -36,10 +36,10 @@ export default {
```html
<van-stepper
v-model="value"
min="5"
max="40"
step="2"
defaultValue="9"
:min="5"
:max="40"
:step="2"
:default-value="9"
/>
```
@ -49,10 +49,10 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| min | Min value | `String | Number` | `1` | - |
| max | Max value | `String | Number` | - | - |
| defaultValue | Default value | `String | Number` | `1` | - |
| default-value | Default value | `String | Number` | `1` | - |
| step | Value change step | `String | Number` | `1` | - |
| disabled | Disable value change | `Boolean` | `false` | - |
| disableInput | Disable input | `Boolean` | `false` | - |
| disable-input | Disable input | `Boolean` | `false` | - |
### Event

6
docs/markdown/en-US/steps.md
View File

@ -50,7 +50,7 @@ export default {
#### Vertical Steps
```html
<van-steps direction="vertical" :active="0" activeColor="#f60">
<van-steps direction="vertical" :active="0" active-color="#f60">
<van-step>
<h3>【City】Status1</h3>
<p>2016-07-12 12:40</p>
@ -72,11 +72,11 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| active | Active step | `Number` | 0 | - |
| icon | Action step icon | `String` | - | - |
| iconClass | Icon class | `String` | - | - |
| icon-class | Icon class | `String` | - | - |
| title | Title | `String` | - | - |
| description | Description | `String` | - | - |
| direction | Direction | `String` | `horizontal` | `vertical` |
| activeColor | Active step color | `String` | `#06bf04` | - |
| active-color | Active step color | `String` | `#06bf04` | - |
### Steps Slot

12
docs/markdown/en-US/submit-bar.md
View File

@ -14,7 +14,7 @@ Vue.use(SubmitBar);
```html
<van-submit-bar
:price="3050"
buttonText="Submit"
button-text="Submit"
@submit="onSubmit"
/>
```
@ -26,7 +26,7 @@ Vue.use(SubmitBar);
<van-submit-bar
disabled
:price="3050"
buttonText="Submit"
button-text="Submit"
tip="Some tips"
@submit="onSubmit"
/>
@ -39,7 +39,7 @@ Vue.use(SubmitBar);
<van-submit-bar
loading
:price="3050"
buttonText="Submit"
button-text="Submit"
@submit="onSubmit"
/>
```
@ -50,7 +50,7 @@ Use slot to add custom contents.
```html
<van-submit-bar
:price="3050"
buttonText="Submit"
button-text="Submit"
@submit="onSubmit"
>
<van-checkbox v-model="checked">Check</van-checkbox>
@ -66,8 +66,8 @@ Use slot to add custom contents.
|-----------|-----------|-----------|-------------|-------------|
| price | Price | `Number` | - | - |
| label | Price label | `String` | `合计：` | - |
| buttonText | Button text | `String` | - | - |
| buttonType | Button type | `String` | `danger` | - |
| 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` | - |

4
docs/markdown/en-US/swipe.md
View File

@ -52,8 +52,8 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| autoplay | Autoplay interval (ms) | `Number` | - | - |
| duration | Animation duration (ms) | `Number` | `500` | - |
| showIndicators | Whether to show indocators | `Boolean` | `true` | - |
| initialSwipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
| show-indicators | Whether to show indocators | `Boolean` | `true` | - |
| initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
### Event

4
docs/markdown/en-US/tab.md
View File

@ -34,7 +34,7 @@ export default {
#### Swipe Tabs
By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
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>
@ -118,7 +118,7 @@ In sticky mode, the tab will be fixed to top when scroll to top
| type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `card` |
| active | Index of active tab | `String` `Number` | `0` | - |
| duration | Toggle tab's animation time | `Number` | `0.2` | - | - |
| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
| swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - | - |
### Tab API

8
docs/markdown/en-US/tree-select.md
View File

@ -45,13 +45,13 @@ export default {
### API
#### Properties
#### API
| Attribute | Description | Type | Default | 必须 |
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` | - |
| mainActiveIndex | The index of selected parent node | `Number` | `0` | - |
| activeId | Id of selected item | `Number` | `0` | - |
| main-Active-index | The index of selected parent node | `Number` | `0` | - |
| active-id | Id of selected item | `Number` | `0` | - |
#### Event
| Event | Description | Attribute |

12
docs/markdown/en-US/uploader.md
View File

@ -13,7 +13,7 @@ Vue.use(Uploader);
```html
<div class="uploader-container">
<van-uploader :afterRead="logContent">
<van-uploader :after-read="onRead">
<van-icon name="photograph" />
</van-uploader>
</div>
@ -22,7 +22,7 @@ Vue.use(Uploader);
```javascript
export default {
methods: {
logContent(file) {
onRead(file) {
console.log(file)
}
}
@ -33,7 +33,7 @@ export default {
You can set native properties such as `accpet`、`multiple` on Uploader, and the input will automatically inherits the attribute.
```html
<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg" multiple>
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
<van-icon name="photograph" />
</van-uploader>
```
@ -42,10 +42,10 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| resultType | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
| result-type | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
| disable | Whether to disable the upload, set to true during the image upload to prevent users from clicking this component to upload pictures | `Boolean` | `false` | - |
| beforeRead | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
| afterRead | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
| before-read | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
| after-read | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
### Slot

5
docs/markdown/en-US/waterfall.md
View File

@ -33,7 +33,8 @@ export default {
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400">
waterfall-offset="400"
>
<li v-for="item in list">{{ item }}</li>
</ul>
```
@ -55,7 +56,7 @@ export default {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
for (let i = 0; i < 5; i++) {
this.list.push(this.list.length);
}
this.disabled = false;

6
docs/markdown/zh-CN/actionsheet.md
View File

@ -50,7 +50,7 @@ export default {
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
```html
<van-actionsheet v-model="show" :actions="actions" cancelText="取消" />
<van-actionsheet v-model="show" :actions="actions" cancel-text="取消" />
```
#### 带标题的 Actionsheet
@ -69,9 +69,9 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | - |
| title | 标题 | `String` | - | - |
| cancelText | 取消按钮文案 | `String` | - | - |
| cancel-text | 取消按钮文案 | `String` | - | - |
| overlay | 是否显示遮罩 | `Boolean` | - | - |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
| close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
### actions

28
docs/markdown/zh-CN/address-edit.md
View File

@ -13,11 +13,11 @@ Vue.use(AddressEdit);
```html
<van-address-edit
:areaList="areaList"
:showPostal="true"
:showSetDefault="true"
:showSearchResult="true"
:searchResult="searchResult"
:area-list="areaList"
show-postal
show-set-default
show-search-result
:search-result="searchResult"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
@ -58,15 +58,15 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| areaList | 地区列表 | `Object` | - | - |
| addressInfo | 收货人信息 | `Object` | `{}` | - |
| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
| addressText | "地址"文案前缀 | `String` | `收货` | - |
| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
| area-list | 地区列表 | `Object` | - | - |
| address-info | 收货人信息 | `Object` | `{}` | - |
| search-result | 详细地址搜索结果 | `Array` | `[]` | - |
| address-text | "地址"文案前缀 | `String` | `收货` | - |
| show-postal | 是否显示邮政编码 | `Boolean` | `false` | - |
| show-set-default | 是否显示默认地址栏 | `Boolean` | `false` | - |
| show-search-result | 是否显示搜索结果 | `Boolean` | `false` | - |
| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### Event

2
docs/markdown/zh-CN/address-list.md
View File

@ -60,7 +60,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中地址的 id | String | - | - |
| list | 地址列表 | Array | `[]` | - |
| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
| add-button-text | 底部按钮文字 | String | `新增收货地址` | - |
### Event

30
docs/markdown/zh-CN/area.md
View File

@ -12,10 +12,10 @@ Vue.use(Area);
#### 基础用法
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
```html
<van-area :areaList="areaList" />
<van-area :area-list="areaList" />
```
#### 选中省市县
@ -23,32 +23,32 @@ Vue.use(Area);
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`
```html
<van-area :areaList="areaList" value="110101" />
<van-area :area-list="areaList" value="110101" />
```
#### 配置显示列
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
可以通过`columns-num`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
```html
<van-area :areaList="areaList" :columnsNum="2" title="标题" />
<van-area :area-list="areaList" :columns-num="2" title="标题" />
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| ---------- | ------------------------------------------------------------------- | ----------------- | ------ | ------ |
| value | 当前选中的省市区`code` | `String` | - | - |
| title | 顶部栏标题 | `String` | `''` | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为 key | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 当前选中的省市区`code` | `String` | - | - |
| title | 顶部栏标题 | `String` | `''` | - |
| area-list | 省市县数据，格式见下方 | `Object` | - | - |
| columns-num | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | `3` | - |
### Event
| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------ | ---------------------------------------- |
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
| cancel | 点击取消按钮时 | - |
| 事件 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
| cancel | 点击取消按钮时 | - |
### 数据格式

14
docs/markdown/zh-CN/badge.md
View File

@ -11,14 +11,14 @@ Vue.use(Badge);
#### 基础用法
通过在`van-badge-group`上设置`activeKey`属性来控制选中的`badge`
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
```html
<van-badge-group :activeKey="activeKey">
<van-badge title="热销榜" @click="onClick"></van-badge>
<van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
<van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
<van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
<van-badge-group :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>
```
@ -41,7 +41,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| activeKey | 选中`badge`的索引 | `String | Number` | `0` | - |
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### Badge API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |

10
docs/markdown/zh-CN/button.md
View File

@ -55,14 +55,14 @@ Vue.use(Button);
#### 页面底部操作按钮
```html
<van-button type="primary" bottomAction>按钮</van-button>
<van-button type="primary" bottom-action>按钮</van-button>
<van-row>
<van-col span="12">
<van-button bottomAction>按钮</van-button>
<van-button bottom-action>按钮</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" bottomAction>按钮</van-button>
<van-button type="primary" bottom-action>按钮</van-button>
</van-col>
</van-row>
```
@ -74,8 +74,8 @@ Vue.use(Button);
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
| nativeType | 按钮类型（原生） | `String` | `''` | - |
| native-type | 按钮类型（原生） | `String` | `''` | - |
| diabled | 是否禁用 | `Boolean` | `false` | - |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
| block | 是否为块级元素 | `Boolean` | `false` | - |
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` | - |

16
docs/markdown/zh-CN/cell.md
View File

@ -41,12 +41,12 @@ Vue.use(CellGroup);
#### 展示箭头
传入`isLink`属性则会在右侧显示箭头
传入`is-link`属性则会在右侧显示箭头
```html
<van-cell-group>
<van-cell title="单元格" isLink />
<van-cell title="单元格" isLink value="内容" />
<van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" />
</van-cell-group>
```
@ -55,17 +55,15 @@ Vue.use(CellGroup);
```html
<van-cell-group>
<van-cell value="内容" icon="shop" isLink>
<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" isLink />
<van-cell title="单元格" icon="location" is-link />
<van-cell title="单元格">
<template slot="right-icon">
<van-icon name="search" class="van-cell__right-icon" />
</template>
<van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
</van-cell>
</van-cell-group>
```
@ -87,7 +85,7 @@ Vue.use(CellGroup);
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前 history | `String` | `false` | - |
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
| is-link | 是否展示右侧箭头 | `Boolean` | `false` | - |
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
### Slot

16
docs/markdown/zh-CN/contact.md
View File

@ -37,8 +37,8 @@ Vue.use(ContactEdit);
<!-- 联系人编辑 -->
<van-popup v-model="showEdit" position="bottom">
<van-contact-edit
:contactInfo="editingContact"
:isEdit="isEdit"
:contact-info="editingContact"
:is-edit="isEdit"
@save="onSave"
@delete="onDelete"
/>
@ -134,16 +134,16 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型，分为添加和编辑两种样式 | `String` | `add` | `edit` |
| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
| name | 联系人姓名 | `String` | - | - |
| tel | 联系人手机号 | `String` | - | - |
| add-text | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
### ContactList API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中联系人的 id | `String | Number` | - | - |
| addText | 新建按钮文案 | `String` | `新建联系人` | - |
| list | 联系人列表 | `Array` | `[]` | - |
| add-text | 新建按钮文案 | `String` | `新建联系人` | - |
### ContactList Event
@ -157,10 +157,10 @@ export default {
### ContactEdit API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| contactInfo | 联系人信息 | `Object` | `[]` | - |
| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
| contact-info | 联系人信息 | `Object` | `[]` | - |
| is-edit | 是否为编辑联系人 | `Boolean` | `false` | - |
| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
### ContactEdit Event

28
docs/markdown/zh-CN/coupon.md
View File

@ -16,7 +16,7 @@ Vue.use(CouponList);
<!-- 优惠券单元格 -->
<van-coupon-cell
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
@ -24,8 +24,8 @@ Vue.use(CouponList);
<van-popup v-model="showList" position="bottom">
<van-coupon-list
:coupons="coupons"
:chosenCoupon="chosenCoupon"
:disabledCoupons="disabledCoupons"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
@change="onChange"
@exchange="onExchange"
/>
@ -72,7 +72,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠券码` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| editable | 能否切换优惠券 | `Boolean` | `true` | - |
@ -80,17 +80,17 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
| coupons | 可用优惠券列表 | `Array` | `[]` | - |
| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
| showCloseButton | 是否显示列表底部按钮 | `Boolean` | `true` | - |
| closeButtonText | 列表底部按钮文字 | `String` | `不使用优惠` | - |
| disabledListTitle | 不可用券列表标题 | `String` | `不可用优惠` | - |
| inputPlaceholder | 输入框文字提示 | `String` | `请输入优惠码` | - |
| showExchangeBar | 是否展示兑换栏 | `Boolean` | `true` | - |
| disabled-doupons | 不可用优惠券列表 | `Array` | `[]` | - |
| exchange-button-text | 兑换按钮文字 | `String` | `兑换` | - |
| exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
| 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

30
docs/markdown/zh-CN/datetime-picker.md
View File

@ -15,10 +15,10 @@ Vue.use(DatetimePicker);
<van-datetime-picker
v-model="currentDate"
type="datetime"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:maxDate="maxDate"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
:max-date="maxDate"
/>
```
@ -42,9 +42,9 @@ export default {
<van-datetime-picker
v-model="currentDate"
type="date"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
/>
```
@ -54,9 +54,9 @@ export default {
<van-datetime-picker
v-model="currentDate"
type="time"
:minHour="minHour"
:maxHour="maxHour"
:minDate="minDate"
:min-hour="minHour"
:max-hour="maxHour"
:min-date="minDate"
/>
```
@ -65,11 +65,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| type | 组件类型 | `String` | 'datetime' | 'date', 'time' |
| minDate | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
| maxDate | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
| minHour | 可选的最小小时 | `Number` | `0` | - |
| maxHour | 可选的最大小时 | `Number` | `23` | - |
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
| min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
| min-hour | 可选的最小小时 | `Number` | `0` | - |
| max-hour | 可选的最大小时 | `Number` | `23` | - |
| visibile-column-count | 每一列可见备选元素的个数 | `Number` | `5` | - |
### Event

16
docs/markdown/zh-CN/field.md
View File

@ -16,7 +16,7 @@ Vue.use(Field);
```html
<van-cell-group>
<van-field v-model="value" placeholder="请输入用户名"></van-field>
<van-field v-model="value" placeholder="请输入用户名" />
</van-cell-group>
```
@ -32,16 +32,15 @@ Vue.use(Field);
placeholder="请输入用户名"
required
@click-icon="username = ''"
>
</van-field>
/>
<van-field
v-model="password"
type="password"
label="密码"
placeholder="请输入密码"
required>
</van-field>
required
/>
</van-cell-group>
```
@ -49,7 +48,7 @@ Vue.use(Field);
```html
<van-cell-group>
<van-field value="输入框已禁用" label="用户名" disabled></van-field>
<van-field value="输入框已禁用" label="用户名" disabled />
</van-cell-group>
```
@ -57,7 +56,7 @@ Vue.use(Field);
```html
<van-cell-group>
<van-field label="用户名" placeholder="请输入用户名" error></van-field>
<van-field label="用户名" placeholder="请输入用户名" error />
</van-cell-group>
```
@ -73,8 +72,7 @@ Vue.use(Field);
placeholder="请输入留言"
rows="1"
autosize
>
</van-field>
/>
</van-cell-group>
```

2
docs/markdown/zh-CN/goods-action.md
View File

@ -59,7 +59,7 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| text | 按钮文字 | `String` | - | - |
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - |
| icon-class | 图标额外类名 | `String` | `''` | - |
| info | 图标右上角提示信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - |
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |

6
docs/markdown/zh-CN/lazyload.md
View File

@ -17,7 +17,7 @@ Vue.use(Lazyload, options);
将`v-lazy`指令的值设置为你需要懒加载的图片
```html
<img v-for="img in imageList" v-lazy="img">
<img v-for="img in imageList" v-lazy="img" >
```
```javascript
@ -47,7 +47,7 @@ export default {
```html
<lazy-component>
<img v-for="img in imageList" v-lazy="img">
<img v-for="img in imageList" v-lazy="img" >
</lazy-component>
```
@ -64,4 +64,4 @@ export default {
| filter | 图片url过滤 | `Object` | - | - |
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)

14
docs/markdown/zh-CN/nav-bar.md
View File

@ -14,9 +14,9 @@ Vue.use(NavBar);
```html
<van-nav-bar
title="标题"
leftText="返回"
rightText="按钮"
leftArrow
left-text="返回"
right-text="按钮"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
@ -39,7 +39,7 @@ export default {
通过 slot 定制内容
```html
<van-nav-bar title="标题" leftText="返回" leftArrow>
<van-nav-bar title="标题" left-text="返回" left-arrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
@ -49,9 +49,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | `''` | - |
| leftText | 左侧文案 | `String` | `''` | - |
| rightText | 右侧文案 | `String` | `''` | - |
| leftArrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
| left-text | 左侧文案 | `String` | `''` | - |
| right-text | 右侧文案 | `String` | `''` | - |
| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
| fixed | 是否固定在顶部 | `Boolean` | `false` | - |
### Slot

4
docs/markdown/zh-CN/notice-bar.md
View File

@ -14,7 +14,7 @@ Vue.use(NoticeBar);
```html
<van-notice-bar
text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
leftIcon="https://img.yzcdn.cn/1.png"
left-icon="https://img.yzcdn.cn/1.png"
/>
```
@ -50,7 +50,7 @@ Vue.use(NoticeBar);
| delay | 动画延迟时间，单位秒 | Number | `1` | - |
| speed | 滚动速率，单位px | Number | `50` | - |
| scrollable | 是否滚动 | Boolean | `true` | - |
| leftIcon | 左侧图标图片链接 | String | - | - |
| left-icon | 左侧图标图片链接 | String | - | - |
| color | 文本颜色 | String | `#f60` | - |
| background | 滚动条背景 | String | `#fff7cc` | - |

30
docs/markdown/zh-CN/number-keyboard.md
View File

@ -12,15 +12,15 @@ Vue.use(NumberKeyboard);
#### 默认样式
```html
<van-button @touchstart.native.stop="showKeyboard = true">
<van-button @touchstart.native.stop="show = true">
弹出默认键盘
</van-button>
<van-number-keyboard
extraKey="."
:show="showKeyboard"
closeButtonText="完成"
@blur="showKeyboard = false"
:show="show"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
@ -30,7 +30,7 @@ Vue.use(NumberKeyboard);
export default {
data() {
return {
showKeyboard: true
show: true
}
},
@ -49,11 +49,11 @@ export default {
```html
<van-number-keyboard
:show="show"
theme="custom"
extraKey="."
:show="showKeyboard"
closeButtonText="完成"
@blur="showKeyboard = false"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
@ -66,12 +66,12 @@ export default {
| show | 是否显示键盘 | `Boolean` | - | - |
| theme | 键盘样式风格 | `String` | `Default` | `Custom` |
| title | 键盘标题 | `String` | - | - |
| zIndex | 键盘 z-index | `Number` | `100` | - |
| extraKey | 左下角按键内容 | `String` | `''` | - |
| closeButtonText | 关闭按钮文字，空则不展示 | `String` | `-` | - |
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
| hideOnClickOutside | 点击外部时是否收起键盘 | `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

24
docs/markdown/zh-CN/pagination.md
View File

@ -16,8 +16,8 @@ Vue.use(Pagination);
```html
<van-pagination
v-model="currentPage"
:totalItems="24"
:itemsPerPage="5"
:total-items="24"
:items-per-page="5"
/>
```
@ -36,7 +36,7 @@ export default {
```html
<van-pagination
v-model="currentPage"
:pageCount="12"
:page-count="12"
mode="simple"
/>
```
@ -46,9 +46,9 @@ export default {
```html
<van-pagination
v-model="currentPage"
:totalItems="125"
:showPageSize="3"
:forceEllipses="true"
:total-items="125"
:show-page-size="3"
force-ellipses
/>
```
@ -56,13 +56,13 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前页码 | `Object` | - | - |
| v-model | 当前页码 | `Number` | - | - |
| mode | 显示模式 | `String` | `multi` | `simple` |
| itemsPerPage | 每页记录数 | `Number` | `10` | - |
| previousText | 上一页 | `String` | `上一页` | - |
| nextText | 下一页 | `String` | `下一页` | - |
| showPageSize | 显示的页码个数 | `Number` | `5` | - |
| forceEllipses | 显示省略号 | `Boolean` | `false` | - |
| items-per-page | 每页记录数 | `Number` | `10` | - |
| previous-text | 上一页 | `String` | `上一页` | - |
| next-text | 下一页 | `String` | `下一页` | - |
| show-page-size | 显示的页码个数 | `Number` | `5` | - |
| force-ellipses | 显示省略号 | `Boolean` | `false` | - |
### Event

2
docs/markdown/zh-CN/password-input.md
View File

@ -57,7 +57,7 @@ export default {
| value | 密码值 | `String` | `''` | - |
| length | 密码最大长度 | `Number` | `6` | - |
| info | 输入框下方提示 | `String` | - | - |
| errorInfo | 输入框下方错误提示 | `String` | - | - |
| error-info | 输入框下方错误提示 | `String` | - | - |
### Event

10
docs/markdown/zh-CN/picker.md
View File

@ -54,7 +54,7 @@ export default {
```html
<van-picker
showToolbar
show-toolbar
:title="标题"
:columns="columns"
@cancel="onCancel"
@ -121,11 +121,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
| showToolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
| title | 顶部栏标题 | `String` | `''` | - |
| itemHeight | 选项高度 | `Number` | `44` | - |
| visibileColumnCount | 可见的选项个数 | `Number` | `5` | - |
| valueKey | 选项对象中，文字对应的 key | `String` | `text` | - |
| item-height | 选项高度 | `Number` | `44` | - |
| visibile-column-count | 可见的选项个数 | `Number` | `5` | - |
| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
### Columns 数据结构
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`

10
docs/markdown/zh-CN/popup.md
View File

@ -41,10 +41,10 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景蒙层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| lock-on-scroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | Popup 位置 | `String` | - | `top` `bottom` `right` `left` |
| overlayClass | 自定义蒙层 class | `String` | `` | - |
| overlayStyle | 自定义蒙层样式 | `Object` | `` | - |
| closeOnClickOverlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
| overlay-class | 自定义蒙层 class | `String` | `` | - |
| overlay-style | 自定义蒙层样式 | `Object` | `` | - |
| close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
| transition | transition 名称 | `String` | `popup-slide` | - |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
| prevent-scroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

14
docs/markdown/zh-CN/progress.md
View File

@ -31,12 +31,12 @@ Vue.use(Progress);
#### 样式定制
可以使用`pivotText`属性自定义文字，`color`属性自定义进度条颜色
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
```html
<van-progress pivotText="红色" color="#ed5050" :percentage="26" />
<van-progress pivotText="橙色" color="#f60" :percentage="46" />
<van-progress pivotText="黄色" color="#f09000" :percentage="66" />
<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
@ -45,7 +45,7 @@ Vue.use(Progress);
|-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
| showPivot | 是否显示进度文字 | `Boolean` | `true` | - |
| pivotText | 文字显示 | `String` | 百分比文字 | - |
| show-pivot | 是否显示进度文字 | `Boolean` | `true` | - |
| pivot-text | 文字显示 | `String` | 百分比文字 | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
| text-color | 进度条文字颜色 | `String` | `#fff` | hexvalue |

10
docs/markdown/zh-CN/pull-refresh.md
View File

@ -44,11 +44,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 是否在加载中 | `Boolean` | - | - |
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
| animationDuration | 动画时长 | `Number` | `300` | - |
| headHeight | 顶部内容高度 | `Number` | `50` | - |
| pulling-text | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
| loosing-text | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
| loading-text | 加载过程中顶部文案 | `String` | `加载中...` | - |
| animation-duration | 动画时长 | `Number` | `300` | - |
| head-height | 顶部内容高度 | `Number` | `50` | - |
### Slot

13
docs/markdown/zh-CN/search.md
View File

@ -26,10 +26,10 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
<van-search
v-model="value"
placeholder="请输入商品名称"
:showAction="true"
show-action
@search="onSearch"
@cancel="onCancel">
</van-search>
@cancel="onCancel"
/>
</form>
```
@ -39,8 +39,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
```html
<van-search
v-model="value"
:showAction="true"
@search="onSearch">
show-action
@search="onSearch"
>
<div slot="action" @click="onSearch">搜索</div>
</van-search>
```
@ -51,7 +52,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
### Event
Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等

42
docs/markdown/zh-CN/sku.md
View File

@ -15,12 +15,12 @@ Vue.use(Sku);
v-model="showBase"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="resetStepperOnHide"
:disableStepperInput="disableStepperInput"
:quota-used="quotaUsed"
:reset-stepper-on-hide="resetStepperOnHide"
:disable-stepper-input="disableStepperInput"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
/>
@ -31,16 +31,16 @@ Vue.use(Sku);
```html
<van-sku
v-model="showCustomAction"
stepperTitle="我要买"
stepper-title="我要买"
:sku="sku"
:goods="goods"
:goodsId="goodsId"
:hideStock="sku.hide_stock"
:showAddCartBtn="true"
:goods-id="goodsId"
:hide-stock="sku.hide_stock"
:show-add-cart-btn="true"
:quota="quota"
:quotaUsed="quotaUsed"
:resetStepperOnHide="true"
:initialSku="initialSku"
:quota-used="quotaUsed"
:reset-stepper-on-hide="true"
:initial-sku="initialSku"
@buy-clicked="handleBuyClicked"
@add-cart="handleAddCartClicked"
>
@ -49,9 +49,9 @@ Vue.use(Sku);
<!-- 自定义 sku actions -->
<template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions">
<van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
<van-button bottom-action @click="handlePointClicked">积分兑换</van-button>
<!-- 直接触发 sku 内部事件，通过内部事件执行 handleBuyClicked 回调 -->
<van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
</div>
</template>
</van-sku>
@ -65,14 +65,14 @@ Vue.use(Sku);
| v-model | 是否显示sku | `Boolean` | `false` | - |
| sku | 商品sku数据 | `Object` | - | - |
| goods | 商品信息 | `Object` | - | - |
| goodsId | 商品id | `String | Number` | - | - |
| hideStock | 是否显示商品剩余库存 | `Boolean` | `false` | - |
| showAddCartBtn | 是否显示加入购物车按钮 | `Boolean` | `true` | - |
| goods-id | 商品id | `String | Number` | - | - |
| hide-stock | 是否显示商品剩余库存 | `Boolean` | `false` | - |
| show-add-cart-btn | 是否显示加入购物车按钮 | `Boolean` | `true` | - |
| quota | 限购数(0表示不限购) | `Number` | `0` | - |
| quotaUsed | 已经购买过的数量 | `Number` | `0` | - |
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
| disableStepperInput | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
| stepperTitle | 数量选择组件左侧文案 | `String` | `购买数量` | - |
| quota-used | 已经购买过的数量 | `Number` | `0` | - |
| reset-stepper-on-hide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
| disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
| stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
### Event

14
docs/markdown/zh-CN/stepper.md
View File

@ -34,10 +34,16 @@ export default {
#### 高级用法
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`default-value`属性
```html
<van-stepper v-model="value" min="5" max="40" step="2" defaultValue="9" />
<van-stepper
v-model="value"
:min="5"
:max="40"
:step="2"
:default-value="9"
/>
```
### API
@ -46,10 +52,10 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| min | 最小值 | `String | Number` | `1` | - |
| max | 最大值 | `String | Number` | - | - |
| defaultValue | 默认值 | `String | Number` | `1` | - |
| default-value | 默认值 | `String | Number` | `1` | - |
| step | 步数 | `String | Number` | `1` | - |
| disabled | 是否禁用 | `Boolean` | `false` | - |
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
| disable-input | 是否禁用input框 | `Boolean` | `false` | - |
### Event

6
docs/markdown/zh-CN/steps.md
View File

@ -53,7 +53,7 @@ export default {
可以通过设置`direction`属性来改变步骤条的显示方式
```html
<van-steps direction="vertical" :active="0" activeColor="#f60">
<van-steps direction="vertical" :active="0" active-color="#f60">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
@ -75,11 +75,11 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | - | - |
| icon | 当前步骤的icon | `String` | - | - |
| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
| icon-class | 当前步骤栏为icon添加的类 | `String` | - | - |
| title | 当前步骤标题 | `String` | - | - |
| description | 当前步骤描述 | `String` | - | - |
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | - |
| active-color | active状态颜色 | `String` | `#06bf04` | - |
### Steps Slot

12
docs/markdown/zh-CN/submit-bar.md
View File

@ -14,7 +14,7 @@ Vue.use(SubmitBar);
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
button-text="提交订单"
@submit="onSubmit"
/>
```
@ -26,7 +26,7 @@ Vue.use(SubmitBar);
<van-submit-bar
disabled
:price="3050"
buttonText="提交订单"
button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
@submit="onSubmit"
/>
@ -39,7 +39,7 @@ Vue.use(SubmitBar);
<van-submit-bar
loading
:price="3050"
buttonText="提交订单"
button-text="提交订单"
@submit="onSubmit"
/>
```
@ -50,7 +50,7 @@ Vue.use(SubmitBar);
```html
<van-submit-bar
:price="3050"
buttonText="提交订单"
button-text="提交订单"
@submit="onSubmit"
>
<van-checkbox v-model="checked">全选</van-checkbox>
@ -66,8 +66,8 @@ Vue.use(SubmitBar);
|-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | - | - |
| label | 价格文案 | `String` | `合计：` | - |
| buttonText | 按钮文字 | `String` | - | - |
| buttonType | 按钮类型 | `String` | `danger` | - |
| button-text | 按钮文字 | `String` | - | - |
| button-type | 按钮类型 | `String` | `danger` | - |
| tip | 提示文案 | `String` | - | - |
| disabled | 是否禁用按钮 | `Boolean` | `false` | - |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | - |

4
docs/markdown/zh-CN/swipe.md
View File

@ -52,8 +52,8 @@ export default {
|-----------|-----------|-----------|-------------|-------------|
| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
| duration | 动画时长，单位为 ms | `Number` | `500` | - |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
| initialSwipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
| show-indicators | 是否显示指示器 | `Boolean` | `true` | - |
| initial-swipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
### 事件

4
docs/markdown/zh-CN/tab.md
View File

@ -34,7 +34,7 @@ export default {
#### 横向滚动
默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipe-threshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
```html
<van-tabs>
@ -118,7 +118,7 @@ export default {
| type | Tab 样式类型 | `String` | `line` | `card` |
| active | 默认激活的 tab | `String` `Number` | `0` | - |
| duration | 切换 tab 的动画时间 | `Number` | `0.2` | - |
| swipeThreshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
| swipe-threshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
### Tab API

6
docs/markdown/zh-CN/tree-select.md
View File

@ -48,11 +48,11 @@ export default {
#### 传入参数
| 参数 | 说明 | 类型 | 默认值 | 必须 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` | - |
| mainActiveIndex | 左侧导航高亮的索引 | `Number` | `0` | - |
| activeId | 右侧选择项，高亮的数据id | `Number` | `0` | - |
| main-active-index | 左侧导航高亮的索引 | `Number` | `0` | - |
| active-id | 右侧选择项，高亮的数据id | `Number` | `0` | - |
#### 事件
| 事件名 | 说明 | 参数 |

12
docs/markdown/zh-CN/uploader.md
View File

@ -12,7 +12,7 @@ Vue.use(Uploader);
#### 基础用法
```html
<van-uploader :afterRead="logContent">
<van-uploader :after-read="onRead">
<van-icon name="photograph" />
</van-uploader>
```
@ -20,7 +20,7 @@ Vue.use(Uploader);
```javascript
export default {
methods: {
logContent(file) {
onRead(file) {
console.log(file)
}
}
@ -31,7 +31,7 @@ export default {
可以直接在 Uploader 上设置 accpet、multiple 等原生属性，input 会自动继承该属性
```html
<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg" multiple>
<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
<van-icon name="photograph" />
</van-uploader>
```
@ -40,10 +40,10 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
| after-read | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
### Slot

5
docs/markdown/zh-CN/waterfall.md
View File

@ -37,7 +37,8 @@ export default {
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400">
waterfall-offset="400"
>
<li v-for="item in list">{{ item }}</li>
</ul>
```
@ -59,7 +60,7 @@ export default {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
for (let i = 0; i < 5; i++) {
this.list.push(this.list.length);
}
this.disabled = false;