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

[Doc] add english document of all basic components

Browse Source
This commit is contained in:
陈嘉涵 2017-10-20 15:20:11 +08:00
parent 46a0d7e49f
commit 12fef85d3a
38 changed files with 384 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/examples-docs/en-US/actionsheet.md
View File

@ -145,11 +145,11 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | | | actions | 行动按钮数组 | `Array` | `[]` | - |
| title | 标题 | `String` | | | | title | 标题 | `String` | - | - |
| cancelText | 取消按钮文案 | `String` | | | | cancelText | 取消按钮文案 | `String` | - | - |
| overlay | 是否显示遮罩 | `Boolean` | | | | overlay | 是否显示遮罩 | `Boolean` | - | - |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | | closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
### actions ### actions

8
docs/examples-docs/en-US/area.md
View File

@ -68,13 +68,13 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 当前选中的省市区`code` | `String` | - | | | value | 当前选中的省市区`code` | `String` | - | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | | | areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | | | columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
### Event ### Event
| Event | Description | 回调参数 | | Event | Description | Arguments |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 | | confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
| cancel | 点击取消按钮时 | - | | cancel | 点击取消按钮时 | - |

12
docs/examples-docs/en-US/datetime-picker.md
View File

@ -108,16 +108,16 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | | visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' | | type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | | | minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | | | maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
| minHour | 可选的最小小时 | Number | 0 | | | minHour | 可选的最小小时 | Number | 0 | - |
| maxHour | 可选的最大小时 | Number | 23 | | | maxHour | 可选的最大小时 | Number | 23 | - |
### Event ### Event
| Event | Description | 回调参数 | | Event | Description | Arguments |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 当值变化时触发的事件 | picker 实例 | | change | 当值变化时触发的事件 | picker 实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value | | confirm | 点击完成按钮时触发的事件 | 当前 value |

18
docs/examples-docs/en-US/dialog.md
View File

@ -113,12 +113,12 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | | | | title | 标题 | `String` | - | - |
| message | 内容 | `String` | | | | message | 内容 | `String` | - | - |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | | | confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | | | cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
| overlay | 是否展示蒙层 | `Boolean` | `true` | | | overlay | 是否展示蒙层 | `Boolean` | `true` | - |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | | | lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |

2
docs/examples-docs/en-US/lazyload.md
View File

@ -113,7 +113,7 @@ export default {
| loading | Src of the image while loading | `String` | - | - | | loading | Src of the image while loading | `String` | - | - |
| error | Src of the image upon load fail | `String` | - | - | | error | Src of the image upon load fail | `String` | - | - |
| preload | Proportion of pre-loading height | `String` | - | - | | preload | Proportion of pre-loading height | `String` | - | - |
| attempt | Attempts count | `Number` | `3` | | | attempt | Attempts count | `Number` | `3` | - |
| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - | | listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - |
| adapter | Dynamically modify the attribute of element | `Object` | - | - | | adapter | Dynamically modify the attribute of element | `Object` | - | - |
| filter | The image's listener filter | `Object` | - | - | | filter | The image's listener filter | `Object` | - | - |

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

@ -143,11 +143,11 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | | | visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
| itemHeight | 选中元素区高度 | `Number` | `44` | | | itemHeight | 选中元素区高度 | `Number` | `44` | - |
| columns | 对象数组，配置每一列显示的数据 | `Array` | | | | columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | | | showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
| title | 在toolbar上显示的标题文字 | `String` | | | | title | 在toolbar上显示的标题文字 | `String` | - | - |
### columns ### columns

2
docs/examples-docs/en-US/popup.md
View File

@ -115,5 +115,5 @@ export default {
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - | | lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
| position | Position | `String` | - | `top` `bottom` `right` `left` | | position | Position | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - | | closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
| transition | Transition | `String` | `popup-slide` | | | transition | Transition | `String` | `popup-slide` | - |
| preventScroll | Prevent background scroll | `Boolean` | `false` | - | | preventScroll | Prevent background scroll | `Boolean` | `false` | - |

30
docs/examples-docs/en-US/progress.md
View File

@ -10,8 +10,7 @@ Vue.component(Progress.name, Progress);
### Usage ### Usage
#### Basic Usage #### Basic Usage
Use 'percentage' prop to set current progress
进度条默认为蓝色，使用`percentage`属性来设置当前进度
:::demo Basic Usage :::demo Basic Usage
```html ```html
@ -22,9 +21,9 @@ Vue.component(Progress.name, Progress);
::: :::
#### 进度条置灰 #### Inactive
:::demo 进度条置灰 :::demo Inactive
```html ```html
<van-progress inactive :percentage="0"></van-progress> <van-progress inactive :percentage="0"></van-progress>
<van-progress inactive :percentage="46"></van-progress> <van-progress inactive :percentage="46"></van-progress>
@ -33,15 +32,14 @@ Vue.component(Progress.name, Progress);
::: :::
#### 样式定制 #### Custom Style
Use `pivot-text` to custom text，use `color` to custom bar color
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 :::demo Custom Style
:::demo 样式定制
```html ```html
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress> <van-progress pivot-text="Red" color="#ed5050" :percentage="26"></van-progress>
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress> <van-progress pivot-text="Orange" color="#f60" :percentage="46"></van-progress>
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress> <van-progress pivot-text="Yellow" color="#f09000" :percentage="66"></van-progress>
``` ```
::: :::
@ -49,8 +47,8 @@ Vue.component(Progress.name, Progress);
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | | | inactive | Whether to be gray | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | `0-100` | | percentage | Percentage | `Number` | `false` | `0-100` |
| pivotText | 文字显示 | `String` | 百分比文字 | - | | pivotText | Text | `String` | percentage | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue | | color | Color | `String` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue | | textColor | Text color | `String` | `#fff` | hexvalue |

74
docs/examples-docs/en-US/search.md
View File

@ -1,22 +1,19 @@
<script> <script>
import { Toast } from 'packages/index';
export default { export default {
data() { data() {
return { return {
search: '', value: '',
basicSearch: '',
slotSearch: ''
}; };
}, },
methods: { methods: {
goSearch() { onSearch() {
alert(this.search); Toast(this.value);
}, },
goSlotSearch() { onCancel() {
alert(this.slotSearch); Toast('cancel');
},
handleCancel() {
alert('cancel');
} }
} }
}; };
@ -35,46 +32,51 @@ Vue.component(Search.name, Search);
#### Basic Usage #### Basic Usage
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search> <van-search placeholder="Placeholder" v-model="value" />
```
```javascript
export default {
data() {
value: ''
}
}
``` ```
::: :::
#### 监听对应事件 #### Listen to Events
`search` event will be triggered when click the search button on the keyboard.
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 `cancel` event will be triggered when click the cancel button.
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮 Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
:::demo 监听对应事件 :::demo Listen to Events
```html ```html
<form action="/"> <form action="/">
<van-search <van-search
placeholder="请输入商品名称" v-model="value"
v-model="search" placeholder="Placeholder"
:show-action="true" :show-action="true"
@search="goSearch" @search="onSearch"
@cancel="handleCancel"></van-search> @cancel="onCancel">
</van-search>
</form> </form>
``` ```
::: :::
#### 自定义行动按钮 #### Custom Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。 :::demo Custom Button
:::demo 自定义行动按钮
```html ```html
<van-search <van-search
v-model="slotSearch" v-model="value"
:show-action="true" :show-action="true"
@search="goSlotSearch"> @search="onSearch">
<template slot="action"> <div slot="action" @click="onSearch">Search</div>
<div class="demo-search-action" @click="goSlotSearch">搜索</div>
</template>
</van-search> </van-search>
``` ```
::: :::
@ -83,19 +85,19 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `String` | | | | placeholder | Input placeholder | `String` | - | - |
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | | background | Background color | `String` | `#f2f2f2` | - |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | | | showAction | Whether to show right button | `Boolean` | false | - |
### Event ### Event
| Event | Description | Attribute | | Event | Description | Attribute |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| cancel | 取消搜索 | - | | cancel | Triggered when click cancel button | - |
| search | 确定搜索 | - | | search | Triggered when confirm search | - |
### Slot ### Slot
| name | Description | | name | Description |
|-----------|-----------| |-----------|-----------|
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 | | action | Custom right button, displayed when `showAction` is true |

2
docs/examples-docs/en-US/sku.md
View File

@ -134,7 +134,7 @@ Vue.component(Sku.name, Sku);
### slots ### slots
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表： sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
| 名称 | Description | | Name | Description |
|-----------|-----------| |-----------|-----------|
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 | | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
| sku-group | 商品sku展示区 | | sku-group | 商品sku展示区 |

49
docs/examples-docs/en-US/stepper.md
View File

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

75
docs/examples-docs/en-US/steps.md
View File

@ -31,13 +31,13 @@ Vue.component(Steps.name, Steps);
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-steps :active="active"> <van-steps :active="active">
<van-step>买家下单</van-step> <van-step>Step1</van-step>
<van-step>商家接单</van-step> <van-step>Step2</van-step>
<van-step>买家提货</van-step> <van-step>Step3</van-step>
<van-step>交易完成</van-step> <van-step>Step4</van-step>
</van-steps> </van-steps>
<van-button @click="nextStep">下一步</van-button> <van-button @click="nextStep">Next</van-button>
``` ```
```javascript ```javascript
@ -57,62 +57,57 @@ export default {
``` ```
::: :::
#### 物流描述 #### Description
通过`title`和`description`属性来定义物流描述信息 :::demo Description
:::demo 物流描述
```html ```html
<van-steps <van-steps
:active="active" :active="active"
icon="logistics" icon="logistics"
icon-class="steps-success" icon-class="steps-success"
title="等待商家发货" title="Title"
description="物流描述" description="Description"
> >
<van-step>买家下单</van-step> <van-step>Step1</van-step>
<van-step>商家接单</van-step> <van-step>Step2</van-step>
<van-step>买家提货</van-step> <van-step>Step3</van-step>
<van-step>交易完成</van-step> <van-step>Step4</van-step>
</van-steps> </van-steps>
``` ```
::: :::
#### 竖向步骤条 #### Vertical Steps
可以通过设置`direction`属性来改变步骤条的显示方式 :::demo Vertical Steps
:::demo 竖向步骤条
```html ```html
<van-steps direction="vertical" :active="0" active-color="#f60"> <van-steps direction="vertical" :active="0" active-color="#f60">
<van-step> <van-step>
<h3>【城市】物流状态1</h3> <h3>【City】Status1</h3>
<p>2016-07-12 12:40</p> <p>2016-07-12 12:40</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>【城市】物流状态2</h3> <h3>【City】Status2</h3>
<p>2016-07-11 10:00</p> <p>2016-07-11 10:00</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>快件已发货</h3> <h3>【City】Status3</h3>
<p>2016-07-10 09:30</p> <p>2016-07-10 09:30</p>
</van-step> </van-step>
</van-steps> </van-steps>
``` ```
::: :::
### #### Advanced Usage #### Advanced Usage
使用`slot`增加自定义内容
:::demo Advanced Usage :::demo Advanced Usage
```html ```html
<van-steps :active="active" title="等待商家发货"> <van-steps :active="active" title="Title">
<van-icon slot="icon" name="location"></van-icon> <van-icon slot="icon" name="location"></van-icon>
<p slot="message-extra">物流进度</p> <p slot="message-extra">Some text</p>
<van-step>买家下单</van-step> <van-step>Step1</van-step>
<van-step>商家接单</van-step> <van-step>Step2</van-step>
<van-step>买家提货</van-step> <van-step>Step3</van-step>
<van-step>交易完成</van-step> <van-step>Step4</van-step>
</van-steps> </van-steps>
``` ```
::: :::
@ -121,17 +116,17 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | | | | active | Active step | `Number` | 0 | - |
| icon | 当前步骤的icon | `String` | | | | icon | Action step icon | `String` | - | - |
| iconClass | 当前步骤栏为icon添加的类 | `String` | | | | iconClass | Icon class | `String` | - | - |
| title | 当前步骤从标题 | `String` | | | | title | Title | `String` | - | - |
| description | 当前步骤描述 | `String` | | | | description | Description | `String` | - | - |
| direction | 显示方向 | `String` | `horizontal` | `vertical` | | direction | Direction | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | | | activeColor | Active step color | `String` | `#06bf04` | - |
### Steps Slot ### Steps Slot
| 名称 | Description | | Name | Description |
|-----------|-----------| |-----------|-----------|
| icon | 自定义icon区域 | | icon | Custom icon |
| message-extra | 状态栏添加额外的元素 | | message-extra | Extra content |

8
docs/examples-docs/en-US/submit-bar.md
View File

@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar);
| Attribute | Description | Type | Default | 必须 | | Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | | 是 | | price | 价格（单位分） | `Number` | - | 是 |
| button-text | 按钮文字 | `String` | | 是 | | button-text | 按钮文字 | `String` | - | 是 |
| button-type | 按钮类型 | `String` | `danger` | 否 | | button-type | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | | 否 | | tip | 提示文案 | `String` | - | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 | | disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 | | loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar);
### Slot ### Slot
| 名称 | Description | | Name | Description |
|-----------|-----------| |-----------|-----------|
| tip | 提示文案中的额外操作和说明 | | tip | 提示文案中的额外操作和说明 |

18
docs/examples-docs/en-US/swipe.md
View File

@ -26,7 +26,7 @@ Vue.component(SwipeItem.name, SwipeItem);
### Usage ### Usage
#### Basic Usage #### Basic Usage
通过`autoplay`属性设置自动轮播间隔 Use `autoplay` prop to set autoplay interval
:::demo Basic Usage :::demo Basic Usage
```html ```html
@ -39,10 +39,10 @@ Vue.component(SwipeItem.name, SwipeItem);
``` ```
::: :::
#### 图片懒加载 #### Image Lazyload
配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载 Use [Lazyload](#/zh-CN/component/lazyload) component to lazyload image
:::demo 图片懒加载 :::demo Image Lazyload
```html ```html
<van-swipe> <van-swipe>
<van-swipe-item v-for="(image, index) in images" :key="index"> <van-swipe-item v-for="(image, index) in images" :key="index">
@ -69,12 +69,12 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - | | autoplay | Autoplay interval (ms) | `Number` | - | - |
| duration | 动画时长，单位为 ms | `Number` | `500` | - | | duration | Animation duration (ms) | `Number` | `500` | - |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - | | showIndicators | Whether to show indocators | `Boolean` | `true` | - |
### 事件 ### Event
| Event | Description | Attribute | | Event | Description | Attribute |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 | | change | Triggered when current swipe change | index: index of current swipe |

8
docs/examples-docs/en-US/switch-cell.md
View File

@ -67,10 +67,10 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | | | | v-model | 开关状态 | `Boolean` | - | - |
| title | 左侧标题 | `String` | `''` | | | title | 左侧标题 | `String` | `''` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | | | loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | | | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event ### Event

10
docs/examples-docs/en-US/tab.md
View File

@ -209,17 +209,17 @@ export default {
| Attribute | Description | Type | Default | 可选 | | Attribute | Description | Type | Default | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| classtype | 两种UI | `String` | `line` | `line`, `card` | | classtype | 两种UI | `String` | `line` | `line`, `card` |
| active | 默认激活的tab | `String`, `Number` | `0` | | | active | 默认激活的tab | `String`, `Number` | `0` | - |
| navclass | tabs的内部nav上的自定义classname | `String` | | | | navclass | tabs的内部nav上的自定义classname | `String` | - | - |
| duration | 切换tab的动画时间 | `Number` | `0.3` | | | | duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
### van-tab API ### van-tab API
| Attribute | Description | Type | Default | 可选 | | Attribute | Description | Type | Default | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `String` | | | | title | tab的标题 | `String` | - | - |
| disabled | 是否禁用这个tab | `Boolean` | `false` | | | disabled | 是否禁用这个tab | `Boolean` | `false` | - |
### van-tabs Event ### van-tabs Event

28
docs/examples-docs/en-US/tabbar.md
View File

@ -30,10 +30,10 @@ Vue.component(TabbarItem.name, TabbarItem);
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-tabbar v-model="active"> <van-tabbar v-model="active">
<van-tabbar-item icon="shop">标签</van-tabbar-item> <van-tabbar-item icon="shop">Tab</van-tabbar-item>
<van-tabbar-item icon="chat" dot>标签</van-tabbar-item> <van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item> <van-tabbar-item icon="records">Tab</van-tabbar-item>
<van-tabbar-item icon="gold-coin">标签</van-tabbar-item> <van-tabbar-item icon="gold-coin">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -48,18 +48,18 @@ export default {
``` ```
::: :::
#### 自定义图标 #### Custom icon
通过 icon slot 自定义图标 Use `icon` slot to custom icon
:::demo 自定义图标 :::demo Custom icon
```html ```html
<van-tabbar v-model="active2"> <van-tabbar v-model="active2">
<van-tabbar-item icon="shop"> <van-tabbar-item icon="shop">
<span>自定义</span> <span>Custom</span>
<img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" /> <img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="chat">标签</van-tabbar-item> <van-tabbar-item icon="chat">Tab</van-tabbar-item>
<van-tabbar-item icon="records">标签</van-tabbar-item> <van-tabbar-item icon="records">Tab</van-tabbar-item>
</van-tabbar> </van-tabbar>
``` ```
@ -82,17 +82,17 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中标签的索引 | `Number` | - | - | | v-model | Index of current tab | `Number` | - | - |
### Tabbar Event ### Tabbar Event
| Event | Description | Attribute | | Event | Description | Attribute |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 切换标签时触发 | active: 当前选中标签 | | change | Triggered when change active tab | active: index of current tab |
### TabbarItem API ### TabbarItem API
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 | | icon | Icon name | `String` | - | Names from Icon Component |
| dot | 是否显示小红点 | `Boolean` | - | - | | dot | Whether to show red dot | `Boolean` | - | - |

42
docs/examples-docs/en-US/tag.md
View File

@ -10,37 +10,35 @@ Vue.component(Tag.name, Tag);
### Usage ### Usage
#### Basic Usage #### Basic Usage
通过 type 属性控制 Tag 颜色，默认为灰色
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-tag>标签</van-tag> <van-tag>Tag</van-tag>
<van-tag type="danger">标签</van-tag> <van-tag type="danger">Tag</van-tag>
<van-tag type="success">标签</van-tag> <van-tag type="success">Tag</van-tag>
<van-tag type="primary">标签</van-tag> <van-tag type="primary">Tag</van-tag>
``` ```
::: :::
#### 空心样式 #### Plain style
设置`plain`属性设置为空心样式
:::demo 空心样式 :::demo Plain style
```html ```html
<van-tag plain>标签</van-tag> <van-tag plain>Tag</van-tag>
<van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="primary">标签</van-tag> <van-tag plain type="primary">Tag</van-tag>
<van-tag plain type="success">标签</van-tag> <van-tag plain type="success">Tag</van-tag>
``` ```
::: :::
#### 标记样式 #### Mark style
通过`mark`设置为标记样式
:::demo 标记样式 :::demo Mark style
```html ```html
<van-tag mark>标签</van-tag> <van-tag mark>Tag</van-tag>
<van-tag mark type="danger">标签</van-tag> <van-tag mark type="danger">Tag</van-tag>
<van-tag mark type="primary">标签</van-tag> <van-tag mark type="primary">Tag</van-tag>
<van-tag mark type="success">标签</van-tag> <van-tag mark type="success">Tag</van-tag>
``` ```
::: :::
@ -49,11 +47,11 @@ Vue.component(Tag.name, Tag);
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | Type | `String` | `''`| `primary` `success` `danger` | | type | Type | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | | | plain | Whether to be plain style | `Boolean` | `false` | - |
| mark | 是否为标记样式 | `Boolean` | `false` | | | mark | Wtether to be mark style | `Boolean` | `false` | - |
### Slot ### Slot
| name | Description | | name | Description |
|-----------|-----------| |-----------|-----------|
| - | 自定义 Tag 显示内容 | | - | Default slot |

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

@ -128,11 +128,11 @@ export default {
| Attribute | Description | Type | Default | 必须 | | Attribute | Description | Type | Default | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | | | items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | - |
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | | | mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | - |
| activeId | 右侧选择项，高亮的数据id | Number | 0 | | | activeId | 右侧选择项，高亮的数据id | Number | 0 | - |
#### 事件 #### Event
| Event | Description | Attribute | | Event | Description | Attribute |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 | | navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |

104
docs/examples-docs/en-US/waterfall.md
View File

@ -2,9 +2,7 @@
### Install ### Install
#### 全局注册 #### Global registration
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
```js ```js
import Vue from 'vue'; import Vue from 'vue';
@ -13,9 +11,8 @@ import { Waterfall } from 'vant';
Vue.use(Waterfall); Vue.use(Waterfall);
``` ```
#### 局部注册 #### Local registration
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
```js ```js
import { Waterfall } from 'vant'; import { Waterfall } from 'vant';
@ -36,86 +33,75 @@ import { Waterfall } from 'packages';
export default { export default {
data() { data() {
return { return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
loading: false, disabled: false
finished: false
}; };
}, },
directives: { directives: {
WaterfallLower: Waterfall('lower'), WaterfallLower: Waterfall('lower')
WaterfallUpper: Waterfall('upper')
}, },
methods: { methods: {
loadMore() { loadMore() {
if (this.list.length >= 50) { this.disabled = true;
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => { setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i ++) { for (let i = 0; i < 5; i ++) {
lastNumber += 1; this.list.push(this.list.length);
this.list.push(lastNumber);
} }
this.loading = false; this.disabled = false;
}, 200); }, 200);
} }
},
computed: {
isWaterfallDisabled() {
return this.loading || this.finished;
}
} }
}; };
</script> </script>
<style>
.demo-waterfall {
ul {
max-height: 360px;
overflow: scroll;
border-top: 1px solid #e5e5e5;
}
li {
line-height: 50px;
border-bottom: 1px solid #e5e5e5;
background: #fff;
text-align: center;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: #666;
}
}
</style>
#### Basic Usage #### Basic Usage
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
:::demo Basic Usage :::demo Basic Usage
```html ```html
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p> <p class="page-desc">This list will load items will scroll to bottom.</p>
<ul <ul
v-waterfall-lower="loadMore" v-waterfall-lower="loadMore"
waterfall-disabled="isWaterfallDisabled" waterfall-disabled="disabled"
waterfall-offset="400"> waterfall-offset="400">
<li v-for="(item, index) in list">{{ item }}</li> <li v-for="item in list">{{ item }}</li>
</ul> </ul>
``` ```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
::: :::
### API ### API
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | | | v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - | - |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | | | v-waterfall-upper | Function to trigger when scroll to top | `Function` | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | | | waterfall-disabled | Key of the property to control disable status in instance | `String` | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | | | waterfall-offset | Offset to trigger callback function | `Number` | `300` | - |

10
docs/examples-docs/zh-CN/actionsheet.md
View File

@ -161,11 +161,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | | | actions | 行动按钮数组 | `Array` | `[]` | - |
| title | 标题 | `String` | | | | title | 标题 | `String` | - | - |
| cancelText | 取消按钮文案 | `String` | | | | cancelText | 取消按钮文案 | `String` | - | - |
| overlay | 是否显示遮罩 | `Boolean` | | | | overlay | 是否显示遮罩 | `Boolean` | - | - |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | | closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
### actions ### actions

6
docs/examples-docs/zh-CN/area.md
View File

@ -68,9 +68,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 当前选中的省市区`code` | `String` | - | | | value | 当前选中的省市区`code` | `String` | - | - |
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | | | areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | | | columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
### Event ### Event

10
docs/examples-docs/zh-CN/datetime-picker.md
View File

@ -108,12 +108,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | | | visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' | | type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | | | minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | | | maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
| minHour | 可选的最小小时 | Number | 0 | | | minHour | 可选的最小小时 | Number | 0 | - |
| maxHour | 可选的最大小时 | Number | 23 | | | maxHour | 可选的最大小时 | Number | 23 | - |
### Event ### Event

18
docs/examples-docs/zh-CN/dialog.md
View File

@ -121,12 +121,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | | | | title | 标题 | `String` | - | - |
| message | 内容 | `String` | | | | message | 内容 | `String` | - | - |
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | | | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | | | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | | | confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | | | cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
| overlay | 是否展示蒙层 | `Boolean` | `true` | | | overlay | 是否展示蒙层 | `Boolean` | `true` | - |
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | | | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | | | lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |

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

@ -144,7 +144,7 @@ export default {
| loading | 加载时的图片 | `String` | - | - | | loading | 加载时的图片 | `String` | - | - |
| error | 错误时的图片 | `String` | - | - | | error | 错误时的图片 | `String` | - | - |
| preload | 预加载高度的比例 | `String` | - | - | | preload | 预加载高度的比例 | `String` | - | - |
| attempt | 尝试次数 | `Number` | `3` | | | attempt | 尝试次数 | `Number` | `3` | - |
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - | | listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
| adapter | 适配器 | `Object` | - | - | | adapter | 适配器 | `Object` | - | - |
| filter | 图片url过滤 | `Object` | - | - | | filter | 图片url过滤 | `Object` | - | - |

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

@ -143,11 +143,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | | | visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
| itemHeight | 选中元素区高度 | `Number` | `44` | | | itemHeight | 选中元素区高度 | `Number` | `44` | - |
| columns | 对象数组，配置每一列显示的数据 | `Array` | | | | columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | | | showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
| title | 在toolbar上显示的标题文字 | `String` | | | | title | 在toolbar上显示的标题文字 | `String` | - | - |
### columns ### columns

2
docs/examples-docs/zh-CN/popup.md
View File

@ -150,5 +150,5 @@ export default {
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - | | lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` | | position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - | | closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
| transition | 弹出层的`transition` | `String` | `popup-slide` | | | transition | 弹出层的`transition` | `String` | `popup-slide` | - |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - | | preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

2
docs/examples-docs/zh-CN/progress.md
View File

@ -57,7 +57,7 @@ Vue.component(Progress.name, Progress);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | | | inactive | 是否置灰 | `Boolean` | `false` | - |
| percentage | 进度百分比 | `Number` | `false` | `0-100` | | percentage | 进度百分比 | `Number` | `false` | `0-100` |
| pivotText | 文字显示 | `String` | 百分比文字 | - | | pivotText | 文字显示 | `String` | 百分比文字 | - |
| color | 进度条颜色 | `String` | `#38f` | hexvalue | | color | 进度条颜色 | `String` | `#38f` | hexvalue |

47
docs/examples-docs/zh-CN/search.md
View File

@ -2,29 +2,26 @@
export default { export default {
data() { data() {
return { return {
search: '', value: '',
basicSearch: '',
slotSearch: ''
}; };
}, },
methods: { methods: {
goSearch() { onSearch() {
alert(this.search); Toast(this.value);
}, },
goSlotSearch() { onCancel() {
alert(this.slotSearch); Toast('cancel');
},
handleCancel() {
alert('cancel');
} }
} }
}; };
</script> </script>
<style> <style>
.demo-search-action { .demo-search {
padding: 0 10px; .van-search__action div {
padding: 0 10px;
}
} }
</style> </style>
@ -40,17 +37,15 @@ Vue.component(Search.name, Search);
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 `van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search> <van-search placeholder="搜索框基础用法" v-model="basicSearch" />
``` ```
::: :::
#### 监听对应事件 #### 监听对应事件
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮 Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
@ -59,28 +54,26 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
```html ```html
<form action="/"> <form action="/">
<van-search <van-search
v-model="value"
placeholder="请输入商品名称" placeholder="请输入商品名称"
v-model="search"
:show-action="true" :show-action="true"
@search="goSearch" @search="onSearch"
@cancel="handleCancel"></van-search> @cancel="onCancel">
</van-search>
</form> </form>
``` ```
::: :::
#### 自定义行动按钮 #### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。 `van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
:::demo 自定义行动按钮 :::demo 自定义行动按钮
```html ```html
<van-search <van-search
v-model="slotSearch" v-model="value"
:show-action="true" :show-action="true"
@search="goSlotSearch"> @search="onSearch">
<template slot="action"> <div slot="action" @click="goSlotSearch">搜索</div>
<div class="demo-search-action" @click="goSlotSearch">搜索</div>
</template>
</van-search> </van-search>
``` ```
::: :::
@ -89,9 +82,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `String` | | | | placeholder | `input`的`placeholder`文案 | `String` | - | - |
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | | background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | | | showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
### Event ### Event

2
docs/examples-docs/zh-CN/sku.md
View File

@ -140,7 +140,7 @@ Vue.component(Sku.name, Sku);
### slots ### slots
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表： sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
| 名称 | 说明 | | Name | 说明 |
|-----------|-----------| |-----------|-----------|
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 | | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
| sku-group | 商品sku展示区 | | sku-group | 商品sku展示区 |

22
docs/examples-docs/zh-CN/stepper.md
View File

@ -3,10 +3,6 @@
.van-stepper { .van-stepper {
margin-left: 15px; margin-left: 15px;
} }
.curr-stepper {
margin: 15px;
}
} }
</style> </style>
@ -36,8 +32,17 @@ Vue.component(Stepper.name, Stepper);
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-stepper v-model="stepper1"></van-stepper> <van-stepper v-model="stepper1" />
<p class="curr-stepper">当前值：{{ stepper1 }}</p> ```
```javascript
export default {
data() {
return {
value: 1
}
}
}
``` ```
::: :::
@ -46,7 +51,7 @@ Vue.component(Stepper.name, Stepper);
:::demo 禁用状态 :::demo 禁用状态
```html ```html
<van-stepper v-model="stepper1" disabled></van-stepper> <van-stepper v-model="stepper1" disabled />
``` ```
::: :::
@ -56,8 +61,7 @@ Vue.component(Stepper.name, Stepper);
:::demo 高级用法 :::demo 高级用法
```html ```html
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper> <van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
``` ```
::: :::

14
docs/examples-docs/zh-CN/steps.md
View File

@ -145,17 +145,17 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | | | | active | 当前步骤，起始值为0 | `Number` | - | - |
| icon | 当前步骤的icon | `String` | | | | icon | 当前步骤的icon | `String` | - | - |
| iconClass | 当前步骤栏为icon添加的类 | `String` | | | | iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
| title | 当前步骤从标题 | `String` | | | | title | 当前步骤标题 | `String` | - | - |
| description | 当前步骤描述 | `String` | | | | description | 当前步骤描述 | `String` | - | - |
| direction | 显示方向 | `String` | `horizontal` | `vertical` | | direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | | | activeColor | active状态颜色 | `String` | `#06bf04` | - |
### Steps Slot ### Steps Slot
| 名称 | 说明 | | Name | 说明 |
|-----------|-----------| |-----------|-----------|
| icon | 自定义icon区域 | | icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 | | message-extra | 状态栏添加额外的元素 |

8
docs/examples-docs/zh-CN/submit-bar.md
View File

@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar);
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| price | 价格（单位分） | `Number` | | 是 | | price | 价格（单位分） | `Number` | - | 是 |
| button-text | 按钮文字 | `String` | | 是 | | button-text | 按钮文字 | `String` | - | 是 |
| button-type | 按钮类型 | `String` | `danger` | 否 | | button-type | 按钮类型 | `String` | `danger` | 否 |
| tip | 提示文案 | `String` | | 否 | | tip | 提示文案 | `String` | - | 否 |
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 | | disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 | | loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar);
### Slot ### Slot
| 名称 | 说明 | | Name | 说明 |
|-----------|-----------| |-----------|-----------|
| tip | 提示文案中的额外操作和说明 | | tip | 提示文案中的额外操作和说明 |

8
docs/examples-docs/zh-CN/switch-cell.md
View File

@ -67,10 +67,10 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | | | | v-model | 开关状态 | `Boolean` | - | - |
| title | 左侧标题 | `String` | `''` | | | title | 左侧标题 | `String` | `''` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | | | loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | | | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event ### Event

10
docs/examples-docs/zh-CN/tab.md
View File

@ -234,17 +234,17 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选 | | 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| classtype | 两种UI | `String` | `line` | `line`, `card` | | classtype | 两种UI | `String` | `line` | `line`, `card` |
| active | 默认激活的tab | `String`, `Number` | `0` | | | active | 默认激活的tab | `String`, `Number` | `0` | - |
| navclass | tabs的内部nav上的自定义classname | `String` | | | | navclass | tabs的内部nav上的自定义classname | `String` | - | - |
| duration | 切换tab的动画时间 | `Number` | `0.3` | | | | duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
### van-tab API ### van-tab API
| 参数 | 说明 | 类型 | 默认值 | 可选 | | 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | tab的标题 | `String` | | | | title | tab的标题 | `String` | - | - |
| disabled | 是否禁用这个tab | `Boolean` | `false` | | | disabled | 是否禁用这个tab | `Boolean` | `false` | - |
### van-tabs Event ### van-tabs Event

4
docs/examples-docs/zh-CN/tag.md
View File

@ -63,8 +63,8 @@ Vue.component(Tag.name, Tag);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 类型 | `String` | `''`| `primary` `success` `danger` | | type | 类型 | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | | | plain | 是否为空心样式 | `Boolean` | `false` | - |
| mark | 是否为标记样式 | `Boolean` | `false` | | | mark | 是否为标记样式 | `Boolean` | `false` | - |
### Slot ### Slot

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

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

69
docs/examples-docs/zh-CN/waterfall.md
View File

@ -4,8 +4,6 @@
#### 全局注册 #### 全局注册
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
```js ```js
import Vue from 'vue'; import Vue from 'vue';
import { Waterfall } from 'vant'; import { Waterfall } from 'vant';
@ -36,37 +34,25 @@ import { Waterfall } from 'packages';
export default { export default {
data() { data() {
return { return {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
loading: false, disabled: false
finished: false
}; };
}, },
directives: { directives: {
WaterfallLower: Waterfall('lower'), WaterfallLower: Waterfall('lower')
WaterfallUpper: Waterfall('upper')
}, },
methods: { methods: {
loadMore() { loadMore() {
if (this.list.length >= 50) { this.disabled = true;
this.finished = true;
return;
}
this.loading = true;
setTimeout(() => { setTimeout(() => {
let lastNumber = this.list[this.list.length - 1];
for (let i = 0; i < 5; i ++) { for (let i = 0; i < 5; i ++) {
lastNumber += 1; this.list.push(this.list.length);
this.list.push(lastNumber);
} }
this.loading = false; this.disabled = false;
}, 200); }, 200);
} }
},
computed: {
isWaterfallDisabled() {
return this.loading || this.finished;
}
} }
}; };
</script> </script>
@ -103,19 +89,46 @@ export default {
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p> <p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
<ul <ul
v-waterfall-lower="loadMore" v-waterfall-lower="loadMore"
waterfall-disabled="isWaterfallDisabled" waterfall-disabled="disabled"
waterfall-offset="400"> waterfall-offset="400">
<li v-for="(item, index) in list">{{ item }}</li> <li v-for="item in list">{{ item }}</li>
</ul> </ul>
``` ```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i ++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
::: :::
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | | | v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | | | v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | | | waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | | | waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |