ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-19 18:14:13 +00:00
Code Issues Actions 4 Packages 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
68 changed files with 431 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;