mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 15:09:16 +08:00
[Doc] add english document of all basic components
This commit is contained in:
陈嘉涵
parent
46a0d7e49f
commit
12fef85d3a
@ -145,11 +145,11 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| cancelText | 取消按钮文案 | `String` | - | - |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | - | - |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
|
||||
|
||||
### actions
|
||||
|
||||
|
||||
@ -68,13 +68,13 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 当前选中的省市区`code` | `String` | - | |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | |
|
||||
| value | 当前选中的省市区`code` | `String` | - | - |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | 回调参数 |
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
|
||||
@ -108,16 +108,16 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||
| minHour | 可选的最小小时 | Number | 0 | |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
|
||||
| minHour | 可选的最小小时 | Number | 0 | - |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | 回调参数 |
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
|
||||
@ -113,12 +113,12 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | | |
|
||||
| message | 内容 | `String` | | |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| message | 内容 | `String` | - | - |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
|
||||
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
| loading | Src of the image while loading | `String` | - | - |
|
||||
| error | Src of the image upon load fail | `String` | - | - |
|
||||
| preload | Proportion of pre-loading height | `String` | - | - |
|
||||
| attempt | Attempts count | `Number` | `3` | |
|
||||
| attempt | Attempts count | `Number` | `3` | - |
|
||||
| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - |
|
||||
| adapter | Dynamically modify the attribute of element | `Object` | - | - |
|
||||
| filter | The image's listener filter | `Object` | - | - |
|
||||
|
||||
@ -143,11 +143,11 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | - |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | - | - |
|
||||
|
||||
### columns
|
||||
|
||||
|
||||
@ -115,5 +115,5 @@ export default {
|
||||
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
|
||||
| position | Position | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
|
||||
| transition | Transition | `String` | `popup-slide` | |
|
||||
| transition | Transition | `String` | `popup-slide` | - |
|
||||
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
|
||||
|
||||
@ -10,8 +10,7 @@ Vue.component(Progress.name, Progress);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
进度条默认为蓝色，使用`percentage`属性来设置当前进度
|
||||
Use 'percentage' prop to set current progress
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
@ -22,9 +21,9 @@ Vue.component(Progress.name, Progress);
|
||||
:::
|
||||
|
||||
|
||||
#### 进度条置灰
|
||||
#### Inactive
|
||||
|
||||
:::demo 进度条置灰
|
||||
:::demo Inactive
|
||||
```html
|
||||
<van-progress inactive :percentage="0"></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 样式定制
|
||||
:::demo Custom Style
|
||||
```html
|
||||
<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
<van-progress pivot-text="Red" color="#ed5050" :percentage="26"></van-progress>
|
||||
<van-progress pivot-text="Orange" color="#f60" :percentage="46"></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 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `String` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
|
||||
| inactive | Whether to be gray | `Boolean` | `false` | - |
|
||||
| percentage | Percentage | `Number` | `false` | `0-100` |
|
||||
| pivotText | Text | `String` | percentage | - |
|
||||
| color | Color | `String` | `#38f` | hexvalue |
|
||||
| textColor | Text color | `String` | `#fff` | hexvalue |
|
||||
|
||||
@ -1,22 +1,19 @@
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
basicSearch: '',
|
||||
slotSearch: ''
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
goSearch() {
|
||||
alert(this.search);
|
||||
onSearch() {
|
||||
Toast(this.value);
|
||||
},
|
||||
goSlotSearch() {
|
||||
alert(this.slotSearch);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
onCancel() {
|
||||
Toast('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -35,46 +32,51 @@ Vue.component(Search.name, Search);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
|
||||
|
||||
:::demo Basic Usage
|
||||
```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
|
||||
<form action="/">
|
||||
<van-search
|
||||
placeholder="请输入商品名称"
|
||||
v-model="search"
|
||||
v-model="value"
|
||||
placeholder="Placeholder"
|
||||
:show-action="true"
|
||||
@search="goSearch"
|
||||
@cancel="handleCancel"></van-search>
|
||||
@search="onSearch"
|
||||
@cancel="onCancel">
|
||||
</van-search>
|
||||
</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 自定义行动按钮
|
||||
:::demo Custom Button
|
||||
```html
|
||||
<van-search
|
||||
v-model="slotSearch"
|
||||
v-model="value"
|
||||
:show-action="true"
|
||||
@search="goSlotSearch">
|
||||
<template slot="action">
|
||||
<div class="demo-search-action" @click="goSlotSearch">搜索</div>
|
||||
</template>
|
||||
@search="onSearch">
|
||||
<div slot="action" @click="onSearch">Search</div>
|
||||
</van-search>
|
||||
```
|
||||
:::
|
||||
@ -83,19 +85,19 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
|
||||
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
|
||||
| placeholder | Input placeholder | `String` | - | - |
|
||||
| background | Background color | `String` | `#f2f2f2` | - |
|
||||
| showAction | Whether to show right button | `Boolean` | false | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| cancel | 取消搜索 | - |
|
||||
| search | 确定搜索 | - |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
| search | Triggered when confirm search | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |
|
||||
| action | Custom right button, displayed when `showAction` is true |
|
||||
|
||||
@ -134,7 +134,7 @@ Vue.component(Sku.name, Sku);
|
||||
### slots
|
||||
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
|
||||
|
||||
| 名称 | Description |
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
|
||||
@ -3,7 +3,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
stepper1: 1,
|
||||
stepper2: null,
|
||||
stepper2: 9,
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -24,28 +24,39 @@ Vue.component(Stepper.name, Stepper);
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-stepper v-model="stepper1"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper1 }}</p>
|
||||
<van-stepper v-model="stepper1" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
通过设置`disabled`属性来禁用 stepper
|
||||
|
||||
:::demo 禁用状态
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-stepper v-model="stepper1" disabled></van-stepper>
|
||||
<van-stepper v-model="stepper1" disabled />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
|
||||
<van-stepper
|
||||
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 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | `String | Number` | `1` | - |
|
||||
| max | 最大值 | `String | Number` | - | - |
|
||||
| defaultValue | Default | `String | Number` | `1` | - |
|
||||
| step | 步数 | `String | Number` | `1` | - |
|
||||
| disabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
|
||||
| min | Min value | `String | Number` | `1` | - |
|
||||
| max | Max value | `String | Number` | - | - |
|
||||
| defaultValue | Default value | `String | Number` | `1` | - |
|
||||
| step | Value change step | `String | Number` | `1` | - |
|
||||
| disabled | Disable value change | `Boolean` | `false` | - |
|
||||
| disableInput | Disable input | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | 回调参数 |
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| overlimit | 点击不可用的按钮时触发 | - |
|
||||
| change | Triggered when value change | value: current value |
|
||||
| overlimit | Triggered when click disabled button | - |
|
||||
|
||||
@ -31,13 +31,13 @@ Vue.component(Steps.name, Steps);
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
<van-button @click="nextStep">Next</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -57,62 +57,57 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 物流描述
|
||||
#### Description
|
||||
|
||||
通过`title`和`description`属性来定义物流描述信息
|
||||
|
||||
:::demo 物流描述
|
||||
:::demo Description
|
||||
```html
|
||||
<van-steps
|
||||
:active="active"
|
||||
icon="logistics"
|
||||
icon-class="steps-success"
|
||||
title="等待商家发货"
|
||||
description="物流描述"
|
||||
title="Title"
|
||||
description="Description"
|
||||
>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 竖向步骤条
|
||||
#### Vertical Steps
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式
|
||||
|
||||
:::demo 竖向步骤条
|
||||
:::demo Vertical Steps
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<h3>【City】Status1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<h3>【City】Status2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>快件已发货</h3>
|
||||
<h3>【City】Status3</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### #### Advanced Usage
|
||||
使用`slot`增加自定义内容
|
||||
#### Advanced Usage
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-steps :active="active" title="Title">
|
||||
<van-icon slot="icon" name="location"></van-icon>
|
||||
<p slot="message-extra">物流进度</p>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
<p slot="message-extra">Some text</p>
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
@ -121,17 +116,17 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前步骤，起始值为0 | `Number` | | |
|
||||
| icon | 当前步骤的icon | `String` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
|
||||
| title | 当前步骤从标题 | `String` | | |
|
||||
| description | 当前步骤描述 | `String` | | |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
| active | Active step | `Number` | 0 | - |
|
||||
| icon | Action step icon | `String` | - | - |
|
||||
| iconClass | Icon class | `String` | - | - |
|
||||
| title | Title | `String` | - | - |
|
||||
| description | Description | `String` | - | - |
|
||||
| direction | Direction | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | Active step color | `String` | `#06bf04` | - |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | Description |
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
| icon | Custom icon |
|
||||
| message-extra | Extra content |
|
||||
|
||||
@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar);
|
||||
|
||||
| Attribute | Description | Type | Default | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| price | 价格（单位分） | `Number` | | 是 |
|
||||
| button-text | 按钮文字 | `String` | | 是 |
|
||||
| price | 价格（单位分） | `Number` | - | 是 |
|
||||
| button-text | 按钮文字 | `String` | - | 是 |
|
||||
| button-type | 按钮类型 | `String` | `danger` | 否 |
|
||||
| tip | 提示文案 | `String` | | 否 |
|
||||
| tip | 提示文案 | `String` | - | 否 |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
|
||||
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
|
||||
|
||||
@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar);
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | Description |
|
||||
| Name | Description |
|
||||
|-----------|-----------|
|
||||
| tip | 提示文案中的额外操作和说明 |
|
||||
|
||||
@ -26,7 +26,7 @@ Vue.component(SwipeItem.name, SwipeItem);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
通过`autoplay`属性设置自动轮播间隔
|
||||
Use `autoplay` prop to set autoplay interval
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
@ -39,10 +39,10 @@ Vue.component(SwipeItem.name, SwipeItem);
|
||||
```
|
||||
:::
|
||||
|
||||
#### 图片懒加载
|
||||
配合 [Lazyload](#/zh-CN/component/lazyload) 组件实现图片懒加载
|
||||
#### Image Lazyload
|
||||
Use [Lazyload](#/zh-CN/component/lazyload) component to lazyload image
|
||||
|
||||
:::demo 图片懒加载
|
||||
:::demo Image Lazyload
|
||||
```html
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="(image, index) in images" :key="index">
|
||||
@ -69,12 +69,12 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
|
||||
| duration | 动画时长，单位为 ms | `Number` | `500` | - |
|
||||
| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
|
||||
| autoplay | Autoplay interval (ms) | `Number` | - | - |
|
||||
| duration | Animation duration (ms) | `Number` | `500` | - |
|
||||
| showIndicators | Whether to show indocators | `Boolean` | `true` | - |
|
||||
|
||||
### 事件
|
||||
### Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 每一页轮播结束后触发 | index, 当前页的索引 |
|
||||
| change | Triggered when current swipe change | index: index of current swipe |
|
||||
|
||||
@ -67,10 +67,10 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | | |
|
||||
| title | 左侧标题 | `String` | `''` | |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
|
||||
| v-model | 开关状态 | `Boolean` | - | - |
|
||||
| title | 左侧标题 | `String` | `''` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -209,17 +209,17 @@ export default {
|
||||
| Attribute | Description | Type | Default | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | | |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | - |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| Attribute | Description | Type | Default | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `String` | | |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | |
|
||||
| title | tab的标题 | `String` | - | - |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
|
||||
@ -30,10 +30,10 @@ Vue.component(TabbarItem.name, TabbarItem);
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="shop">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
@ -48,18 +48,18 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义图标
|
||||
通过 icon slot 自定义图标
|
||||
#### Custom icon
|
||||
Use `icon` slot to custom icon
|
||||
|
||||
:::demo 自定义图标
|
||||
:::demo Custom icon
|
||||
```html
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>自定义</span>
|
||||
<span>Custom</span>
|
||||
<img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">标签</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">Tab</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">Tab</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
```
|
||||
|
||||
@ -82,17 +82,17 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中标签的索引 | `Number` | - | - |
|
||||
| v-model | Index of current tab | `Number` | - | - |
|
||||
|
||||
### Tabbar Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 切换标签时触发 | active: 当前选中标签 |
|
||||
| change | Triggered when change active tab | active: index of current tab |
|
||||
|
||||
### TabbarItem API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 图标名称 | `String` | - | Icon 组件中可用的类型 |
|
||||
| dot | 是否显示小红点 | `Boolean` | - | - |
|
||||
| icon | Icon name | `String` | - | Names from Icon Component |
|
||||
| dot | Whether to show red dot | `Boolean` | - | - |
|
||||
|
||||
@ -10,37 +10,35 @@ Vue.component(Tag.name, Tag);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 空心样式
|
||||
设置`plain`属性设置为空心样式
|
||||
#### Plain style
|
||||
|
||||
:::demo 空心样式
|
||||
:::demo Plain style
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 标记样式
|
||||
通过`mark`设置为标记样式
|
||||
#### Mark style
|
||||
|
||||
:::demo 标记样式
|
||||
:::demo Mark style
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -49,11 +47,11 @@ Vue.component(Tag.name, Tag);
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Type | `String` | `''`| `primary` `success` `danger` |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | |
|
||||
| plain | Whether to be plain style | `Boolean` | `false` | - |
|
||||
| mark | Wtether to be mark style | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | 自定义 Tag 显示内容 |
|
||||
| - | Default slot |
|
||||
|
||||
@ -128,11 +128,11 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | |
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | - |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | - |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | - |
|
||||
|
||||
#### 事件
|
||||
#### Event
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
|
||||
### Install
|
||||
|
||||
#### 全局注册
|
||||
|
||||
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
|
||||
#### Global registration
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@ -13,9 +11,8 @@ import { Waterfall } from 'vant';
|
||||
Vue.use(Waterfall);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
||||
#### Local registration
|
||||
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
|
||||
|
||||
```js
|
||||
import { Waterfall } from 'vant';
|
||||
@ -36,86 +33,75 @@ import { Waterfall } from 'packages';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
loading: false,
|
||||
finished: false
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 50) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.loading = false;
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-waterfall {
|
||||
ul {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
#### Basic Usage
|
||||
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
|
||||
|
||||
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<p class="page-desc">This list will load items will scroll to bottom.</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400">
|
||||
<li v-for="(item, index) in list">{{ item }}</li>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
|
||||
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |
|
||||
|
||||
| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - | - |
|
||||
| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - | - |
|
||||
| waterfall-disabled | Key of the property to control disable status in instance | `String` | - | - |
|
||||
| waterfall-offset | Offset to trigger callback function | `Number` | `300` | - |
|
||||
|
||||
@ -161,11 +161,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| cancelText | 取消按钮文案 | `String` | - | - |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | - | - |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
|
||||
|
||||
### actions
|
||||
|
||||
|
||||
@ -68,9 +68,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 当前选中的省市区`code` | `String` | - | |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | | |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | |
|
||||
| value | 当前选中的省市区`code` | `String` | - | - |
|
||||
| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
|
||||
| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -108,12 +108,12 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||
| minHour | 可选的最小小时 | Number | 0 | |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
|
||||
| minHour | 可选的最小小时 | Number | 0 | - |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -121,12 +121,12 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | | |
|
||||
| message | 内容 | `String` | | |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| message | 内容 | `String` | - | - |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
|
||||
|
||||
@ -144,7 +144,7 @@ export default {
|
||||
| loading | 加载时的图片 | `String` | - | - |
|
||||
| error | 错误时的图片 | `String` | - | - |
|
||||
| preload | 预加载高度的比例 | `String` | - | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` | |
|
||||
| attempt | 尝试次数 | `Number` | `3` | - |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
|
||||
| adapter | 适配器 | `Object` | - | - |
|
||||
| filter | 图片url过滤 | `Object` | - | - |
|
||||
|
||||
@ -143,11 +143,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
|
||||
| itemHeight | 选中元素区高度 | `Number` | `44` | - |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
|
||||
| title | 在toolbar上显示的标题文字 | `String` | - | - |
|
||||
|
||||
### columns
|
||||
|
||||
|
||||
@ -150,5 +150,5 @@ export default {
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
|
||||
@ -57,7 +57,7 @@ Vue.component(Progress.name, Progress);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | |
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | - |
|
||||
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `String` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `String` | `#38f` | hexvalue |
|
||||
|
||||
@ -2,30 +2,27 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
basicSearch: '',
|
||||
slotSearch: ''
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
goSearch() {
|
||||
alert(this.search);
|
||||
onSearch() {
|
||||
Toast(this.value);
|
||||
},
|
||||
goSlotSearch() {
|
||||
alert(this.slotSearch);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
onCancel() {
|
||||
Toast('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-search-action {
|
||||
.demo-search {
|
||||
.van-search__action div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Search 搜索
|
||||
@ -40,17 +37,15 @@ Vue.component(Search.name, Search);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`van-search` 中，v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-search placeholder="搜索框基础用法" v-model="basicSearch" background="transparent"></van-search>
|
||||
<van-search placeholder="搜索框基础用法" v-model="basicSearch" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 监听对应事件
|
||||
|
||||
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
|
||||
|
||||
Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即可在 IOS 弹出的输入法中显示搜索按钮
|
||||
@ -59,28 +54,26 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
```html
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
placeholder="请输入商品名称"
|
||||
v-model="search"
|
||||
:show-action="true"
|
||||
@search="goSearch"
|
||||
@cancel="handleCancel"></van-search>
|
||||
@search="onSearch"
|
||||
@cancel="onCancel">
|
||||
</van-search>
|
||||
</form>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义行动按钮
|
||||
|
||||
`van-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot 即可。使用此 slot 以后，原有的 cancel 事件不再生效。
|
||||
|
||||
:::demo 自定义行动按钮
|
||||
```html
|
||||
<van-search
|
||||
v-model="slotSearch"
|
||||
v-model="value"
|
||||
:show-action="true"
|
||||
@search="goSlotSearch">
|
||||
<template slot="action">
|
||||
<div class="demo-search-action" @click="goSlotSearch">搜索</div>
|
||||
</template>
|
||||
@search="onSearch">
|
||||
<div slot="action" @click="goSlotSearch">搜索</div>
|
||||
</van-search>
|
||||
```
|
||||
:::
|
||||
@ -89,9 +82,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | - | - |
|
||||
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
|
||||
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
|
||||
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -140,7 +140,7 @@ Vue.component(Sku.name, Sku);
|
||||
### slots
|
||||
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
|
||||
|
||||
| 名称 | 说明 |
|
||||
| Name | 说明 |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
|
||||
@ -3,10 +3,6 @@
|
||||
.van-stepper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.curr-stepper {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,8 +32,17 @@ Vue.component(Stepper.name, Stepper);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-stepper v-model="stepper1"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper1 }}</p>
|
||||
<van-stepper v-model="stepper1" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
@ -46,7 +51,7 @@ Vue.component(Stepper.name, Stepper);
|
||||
|
||||
:::demo 禁用状态
|
||||
```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 高级用法
|
||||
```html
|
||||
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9"></van-stepper>
|
||||
<p class="curr-stepper">当前值：{{ stepper2 || 9 }}</p>
|
||||
<van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -145,17 +145,17 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前步骤，起始值为0 | `Number` | | |
|
||||
| icon | 当前步骤的icon | `String` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
|
||||
| title | 当前步骤从标题 | `String` | | |
|
||||
| description | 当前步骤描述 | `String` | | |
|
||||
| active | 当前步骤，起始值为0 | `Number` | - | - |
|
||||
| icon | 当前步骤的icon | `String` | - | - |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
|
||||
| title | 当前步骤标题 | `String` | - | - |
|
||||
| description | 当前步骤描述 | `String` | - | - |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | - |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| Name | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
@ -95,10 +95,10 @@ Vue.component(SubmitBar.name, SubmitBar);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| price | 价格（单位分） | `Number` | | 是 |
|
||||
| button-text | 按钮文字 | `String` | | 是 |
|
||||
| price | 价格（单位分） | `Number` | - | 是 |
|
||||
| button-text | 按钮文字 | `String` | - | 是 |
|
||||
| button-type | 按钮类型 | `String` | `danger` | 否 |
|
||||
| tip | 提示文案 | `String` | | 否 |
|
||||
| tip | 提示文案 | `String` | - | 否 |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
|
||||
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
|
||||
|
||||
@ -110,6 +110,6 @@ Vue.component(SubmitBar.name, SubmitBar);
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| Name | 说明 |
|
||||
|-----------|-----------|
|
||||
| tip | 提示文案中的额外操作和说明 |
|
||||
|
||||
@ -67,10 +67,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | | |
|
||||
| title | 左侧标题 | `String` | `''` | |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
|
||||
| v-model | 开关状态 | `Boolean` | - | - |
|
||||
| title | 左侧标题 | `String` | `''` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -234,17 +234,17 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | | |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | - |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | - | - |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `String` | | |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | |
|
||||
| title | tab的标题 | `String` | - | - |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
|
||||
@ -63,8 +63,8 @@ Vue.component(Tag.name, Tag);
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | - |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -128,9 +128,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | |
|
||||
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | - |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | - |
|
||||
| activeId | 右侧选择项，高亮的数据id | Number | 0 | - |
|
||||
|
||||
#### 事件
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
|
||||
#### 全局注册
|
||||
|
||||
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from 'vant';
|
||||
@ -36,37 +34,25 @@ import { Waterfall } from 'packages';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
loading: false,
|
||||
finished: false
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 50) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.loading = false;
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -103,19 +89,46 @@ export default {
|
||||
<p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400">
|
||||
<li v-for="(item, index) in list">{{ item }}</li>
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | |
|
||||
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | |
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
|
||||
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user