blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 10:20:19 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] add Popup english document

Browse Source
This commit is contained in:
陈嘉涵 2017-10-19 19:45:57 +08:00
parent 14de879a3b
commit a2f4a4ed83
48 changed files with 287 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples-docs/en-US/image-preview.md
View File

@ -45,7 +45,7 @@ export default {
``` ```
::: :::
### 方法参数 ### Arguments
| Attribute | Description | Type | | Attribute | Description | Type |
|-----------|-----------|-----------| |-----------|-----------|-----------|

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

@ -4,19 +4,18 @@ import Dialog from 'packages/dialog';
export default { export default {
data() { data() {
return { return {
popupShow1: false, show1: false,
popupShow2: false, show2: false,
popupShow3: false, show3: false,
popupShow4: false, show4: false
popupShow5: false
} }
}, },
watch: { watch: {
popupShow3(val) { show3(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow3 = false; this.show3 = false;
}, 2000); }, 2000);
} }
} }
@ -27,11 +26,7 @@ export default {
Dialog.confirm({ Dialog.confirm({
title: 'confirm标题', title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => { })
console.log(action);
}, (error) => {
console.log(error);
});
} }
} }
}; };
@ -49,53 +44,41 @@ Vue.component(Popup.name, Popup);
### Usage ### Usage
#### Basic Usage #### Basic Usage
Popup is located in the middle of the screen by default
`popup`默认情况下是从中间弹出。
:::demo Basic Usage :::demo Basic Usage
```html ```html
<van-button @click="popupShow1 = true">从中间弹出popup</van-button> <van-button @click="show1 = true">Show Popup</van-button>
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true"> <van-popup v-model="show1">Content</van-popup>
从中间弹出popup
</van-popup>
``` ```
```javascript ```javascript
export default { export default {
data() { data() {
return { return {
popupShow1: false show1: false
} }
} }
}; };
``` ```
::: :::
#### 从不同位置弹出层 #### Different Position
Use `position` prop to set popup display position
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。 :::demo Different Position
:::demo 从不同位置弹出层
```html ```html
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button> <van-button @click="show2 = true;">From Bottom</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2"> <van-popup v-model="show2" position="bottom">
<van-button @click="showDialog">弹出dialog</van-button> <van-button @click="showDialog">Show Dialog</van-button>
</van-popup> </van-popup>
<van-button @click="popupShow3 = true">从上方弹出popup</van-button> <van-button @click="show3 = true">From Top</van-button>
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false"> <van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>
更新成功
</van-popup>
<van-button @click="popupShow4 = true">从右方弹出popup</van-button> <van-button @click="show4 = true">From Right</van-button>
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false"> <van-popup v-model="show4" position="right" :overlay="false">
<van-button @click.native="popupShow4 = false">关闭 popup</van-button> <van-button @click="show4 = false">Close</van-button>
</van-popup>
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
</van-popup> </van-popup>
``` ```
@ -103,18 +86,18 @@ export default {
export default { export default {
data() { data() {
return { return {
popupShow1: false, show1: false,
popupShow2: false, show2: false,
popupShow3: false, show3: false,
popupShow4: false show4: false
} }
}, },
watch: { watch: {
popupShow2(val) { show2(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow2 = false; this.show2 = false;
}, 2000); }, 2000);
} }
} }
@ -127,10 +110,10 @@ export default {
| Attribute | Description | Type | Default | Accepted Values | | Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - | | v-model | Whether to show popup | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - | | overlay | Whether to show overlay | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - | | lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` | | position | Position | `String` | - | `top` `bottom` `right` `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - | | closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
| transition | 弹出层的`transition` | `String` | `popup-slide` | | | transition | Transition | `String` | `popup-slide` | |
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - | | preventScroll | Prevent background scroll | `Boolean` | `false` | - |

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

@ -159,20 +159,20 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | `Array` | `[]` | | | actions | 行动按钮数组 | `Array` | `[]` | |
| title | 标题 | `String` | | | | title | 标题 | `String` | | |
| cancelText | 取消按钮文案 | `String` | | | | cancelText | 取消按钮文案 | `String` | | |
| overlay | 是否显示遮罩 | `Boolean` | | | | overlay | 是否显示遮罩 | `Boolean` | | |
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | | | closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
### actions ### actions
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： `API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 | | key | 说明 |
|-----------|-----------| |-----------|-----------|
| name | 标题 | | name | 标题 |
| subname | 二级标题 | | subname | 二级标题 |

8
docs/examples-docs/zh-CN/address-edit.md
View File

@ -96,7 +96,7 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| areaList | 地区列表 | `Object` | - | - | | areaList | 地区列表 | `Object` | - | - |
| addressInfo | 收货人信息 | `Object` | `{}` | - | | addressInfo | 收货人信息 | `Object` | `{}` | - |
@ -110,7 +110,7 @@ export default {
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 | | save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 | | delete | 点击删除按钮时触发 | content：表单内容 |
@ -119,7 +119,7 @@ export default {
### 数据格式 ### 数据格式
#### addressInfo 数据格式 #### addressInfo 数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` | | id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` | | name | 收货人姓名 | `String` |
@ -133,7 +133,7 @@ export default {
| is_default | 是否为默认地址 | `String` | | is_default | 是否为默认地址 | `String` |
#### searchResult 数据格式 #### searchResult 数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| name | 地名 | `String` | | name | 地名 | `String` |
| address | 详细地址 | `String` | | address | 详细地址 | `String` |

6
docs/examples-docs/zh-CN/address-list.md
View File

@ -98,7 +98,7 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中地址的 id | String | - | - | | v-model | 当前选中地址的 id | String | - | - |
| list | 地址列表 | Array | `[]` | - | | list | 地址列表 | Array | `[]` | - |
@ -106,7 +106,7 @@ export default {
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - | | add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 | | edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
@ -114,7 +114,7 @@ export default {
### 数据格式 ### 数据格式
#### 地址列表字段说明 #### 地址列表字段说明
| key | 说明 | 类型 | | key | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| id | 每条地址的唯一标识 | `String | Number` | | id | 每条地址的唯一标识 | `String | Number` |
| name | 收货人姓名 | `String` | | name | 收货人姓名 | `String` |

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

@ -66,15 +66,15 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | | confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
| cancel | 点击取消按钮时 | - | | cancel | 点击取消按钮时 | - |

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

@ -79,11 +79,11 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - | | active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### Badge API ### Badge API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 内容 | `String` | `''` | - | | title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String` | `''` | - | | info | 提示消息 | `String` | `''` | - |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |

16
docs/examples-docs/zh-CN/button.md
View File

@ -110,13 +110,13 @@ Vue.component(Button.name, Button);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 按钮类型 | `String` | `default` | `primary` `danger` | | type | 按钮类型 | `String` | `default` | `primary` `danger` |
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` | | size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 | | tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
| nativeType | 按钮类型（原生） | `String` | `''` | - | | nativeType | 按钮类型（原生） | `String` | `''` | - |
| diabled | 是否禁用 | `Boolean` | `false` | - | | diabled | 是否禁用 | `Boolean` | `false` | - |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - | | loading | 是否显示为加载状态 | `Boolean` | `false` | - |
| block | 是否为块级元素 | `Boolean` | `false` | - | | block | 是否为块级元素 | `Boolean` | `false` | - |
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - | | bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |

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

@ -62,11 +62,11 @@ Vue.component(Card.name, Card);
| desc | 描述 | `String` | - | - | | desc | 描述 | `String` | - | - |
| num | 商品数量 | `String | Number` | - | - | | num | 商品数量 | `String | Number` | - | - |
| price | 商品价格 | `String | Number` | - | - | | price | 商品价格 | `String | Number` | - | - |
| centered | 内容是否垂直居中 | `String` | `false` | - | | centered | 内容是否垂直居中 | `String` | `false` | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| title | 自定义标题 | | title | 自定义标题 |
| desc | 自定义描述 | | desc | 自定义描述 |

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

@ -43,14 +43,14 @@ Vue.component(CellSwipe.name, CellSwipe);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - | | left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - | | right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义显示内容 | | - | 自定义显示内容 |
| left | 左侧滑动内容 | | left | 左侧滑动内容 |

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

@ -105,19 +105,19 @@ Vue.component(CellGroup.name, CellGroup);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | 左侧图标 | `String` | - | - | | icon | 左侧图标 | `String` | - | - |
| title | 左侧标题 | `String` | - | - | | title | 左侧标题 | `String` | - | - |
| value | 右侧内容 | `String` | - | - | | value | 右侧内容 | `String` | - | - |
| label | 标题下方的描述信息 | `String` | - | - | | label | 标题下方的描述信息 | `String` | - | - |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - | | isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
| required | 是否显示表单必填符号 | `Boolean` | `false` | - | | required | 是否显示表单必填符号 | `Boolean` | `false` | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义显示内容 | | - | 自定义显示内容 |
| icon | 自定义`icon` | | icon | 自定义`icon` |

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

@ -127,9 +127,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - | | name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
| disabled | 是否禁用单选框 | `Boolean` | `false` | - | | disabled | 是否禁用单选框 | `Boolean` | `false` | - |
| shape | 形状 | `String` | `round` | `square` | | shape | 形状 | `String` | `round` | `square` |
### CheckboxGroup API ### CheckboxGroup API

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

@ -213,7 +213,7 @@ export default {
### ContactList Event ### ContactList Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - | | add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 | | edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
@ -230,7 +230,7 @@ export default {
### ContactEdit Event ### ContactEdit Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| save | 点击保存按钮时触发 | content：表单内容 | | save | 点击保存按钮时触发 | content：表单内容 |
| delete | 点击删除按钮时触发 | content：表单内容 | | delete | 点击删除按钮时触发 | content：表单内容 |
@ -238,7 +238,7 @@ export default {
### 数据格式 ### 数据格式
#### 联系人数据格式 #### 联系人数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| id | 每位联系人的唯一标识 | `String | Number` | | id | 每位联系人的唯一标识 | `String | Number` |
| name | 联系人姓名 | `String` | | name | 联系人姓名 | `String` |

8
docs/examples-docs/zh-CN/coupon.md
View File

@ -139,7 +139,7 @@ export default {
### CouponCell API ### CouponCell API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 单元格标题 | `String` | `优惠` | - | | title | 单元格标题 | `String` | `优惠` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - | | chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
@ -148,7 +148,7 @@ export default {
### CouponList API ### CouponList API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - | | v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - | | chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
@ -163,14 +163,14 @@ export default {
### CouponList Event ### CouponList Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 优惠券切换回调 | index, 选中优惠券的索引 | | change | 优惠券切换回调 | index, 选中优惠券的索引 |
| exchange | 兑换优惠券回调 | code, 兑换码 | | exchange | 兑换优惠券回调 | code, 兑换码 |
### 数据格式 ### 数据格式
#### 优惠券字段说明 #### 优惠券字段说明
| key | 说明 | 类型 | | key | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| id | 优惠券 id | `String` | | id | 优惠券 id | `String` |
| name | 优惠券名称 | `String` | | name | 优惠券名称 | `String` |

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

@ -106,18 +106,18 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 当值变化时触发的事件 | picker 实例 | | change | 当值变化时触发的事件 | picker 实例 |
| confirm | 点击完成按钮时触发的事件 | 当前 value | | confirm | 点击完成按钮时触发的事件 | 当前 value |
@ -127,7 +127,7 @@ export default {
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： 在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | 说明 | | 函数 | 说明 |
|-----------|-----------| |-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 | | getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 | | setColumnValue(index, value) | 设置对应列中选中的值 |

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

@ -113,20 +113,20 @@ export default {
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 | | Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 | | Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
| Dialog.close | - | `void` | 关闭弹窗 | | Dialog.close | - | `void` | 关闭弹窗 |
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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` | |

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

@ -111,13 +111,13 @@ Vue.component(Field.name, Field);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` | | type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
| value | 输入框的值 | `String` | - | - | | value | 输入框的值 | `String` | - | - |
| label | 输入框标签 | `String` | - | - | | label | 输入框标签 | `String` | - | - |
| disabled | 是否禁用输入框 | `Boolean` | `false` | - | | disabled | 是否禁用输入框 | `Boolean` | `false` | - |
| error | 输入框是否有错误 | `Boolean` | `false` | - | | error | 输入框是否有错误 | `Boolean` | `false` | - |
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - | | autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 | | icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
### Event ### Event

8
docs/examples-docs/zh-CN/goods-action.md
View File

@ -76,13 +76,13 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 | | icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
| iconClass | 图标额外类名 | `String` | `''` | - | | iconClass | 图标额外类名 | `String` | `''` | - |
| url | 跳转链接 | `String` | `javascript:;` | - | | url | 跳转链接 | `String` | `javascript:;` | - |
#### GoodsActionBigBtn #### GoodsActionBigBtn
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| url | 跳转链接 | `String` | `javascript:;` | - | | url | 跳转链接 | `String` | `javascript:;` | - |
| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - | | primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |

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

@ -163,6 +163,6 @@ Vue.component(Icon.name, Icon);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| name | icon名称 | `String` | `''` | - | | name | icon名称 | `String` | `''` | - |

2
docs/examples-docs/zh-CN/image-preview.md
View File

@ -62,6 +62,6 @@ export default {
### 方法参数 ### 方法参数
| 参数名 | 说明 | 类型 | | 参数名 | 说明 | 类型 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| imageUrls | 需要预览的图片 | `Array` | | imageUrls | 需要预览的图片 | `Array` |

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

@ -85,6 +85,6 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
#### Column #### Column
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| span | 列元素宽度 | `String | Number` | - | - | | span | 列元素宽度 | `String | Number` | - | - |
| offset | 列元素偏移距离 | `String | Number` | - | - | | offset | 列元素偏移距离 | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | - | | prefix | className 前缀 | `String` | `van` | - |

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

@ -139,13 +139,13 @@ export default {
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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` | - | - |
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - | | lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |

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

@ -38,7 +38,7 @@ Vue.component(Loading.name, Loading);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| color | 颜色 | `String` | `black` | `black` `white` | | color | 颜色 | `String` | `black` | `black` `white` |
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` | | type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |

2
docs/examples-docs/zh-CN/nav-bar.md
View File

@ -45,7 +45,7 @@ Vue.component(NavBar.name, NavBar);
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| title | 自定义标题 | | title | 自定义标题 |
| left | 自定义左侧区域内容 | | left | 自定义左侧区域内容 |

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

@ -55,7 +55,7 @@ Vue.component(NoticeBar.name, NoticeBar);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| mode | 通告栏模式 | String | `''` | `closeable` `link` | | mode | 通告栏模式 | String | `''` | `closeable` `link` |
| delay | 动画延迟时间，单位秒 | Number | `1` | - | | delay | 动画延迟时间，单位秒 | Number | `1` | - |
@ -64,6 +64,6 @@ Vue.component(NoticeBar.name, NoticeBar);
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| click | 点击事件回调 | - | | click | 点击事件回调 | - |

10
docs/examples-docs/zh-CN/number-keyboard.md
View File

@ -83,12 +83,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| show | 是否显示键盘 | `Boolean` | - | - | | show | 是否显示键盘 | `Boolean` | - | - |
| title | 键盘标题 | `String` | - | - | | title | 键盘标题 | `String` | - | - |
| extraKey | 左下角按键内容 | `String` | `''` | - | | extraKey | 左下角按键内容 | `String` | `''` | - |
| zIndex | 键盘 z-index | `Number` | `100` | - | | zIndex | 键盘 z-index | `Number` | `100` | - |
| transition | 是否开启过场动画 | `Boolean` | `true` | - | | transition | 是否开启过场动画 | `Boolean` | `true` | - |
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - | | showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
### Event ### Event

8
docs/examples-docs/zh-CN/panel.md
View File

@ -55,14 +55,14 @@ Vue.component(Panel.name, Panel);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `String` | - | - | | title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - | | desc | 描述 | `String` | - | - |
| status | 状态 | `String` | - | - | | status | 状态 | `String` | - | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义内容 | | - | 自定义内容 |
| header | 自定义 header | | header | 自定义 header |

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

@ -76,7 +76,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 密码值 | `String` | `''` | - | | value | 密码值 | `String` | `''` | - |
| length | 密码最大长度 | `Number` | `6` | - | | length | 密码最大长度 | `Number` | `6` | - |
| info | 输入框下方提示 | `String` | - | - | | info | 输入框下方提示 | `String` | - | - |
| errorInfo | 输入框下方错误提示 | `String` | - | - | | errorInfo | 输入框下方错误提示 | `String` | - | - |

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

@ -141,19 +141,19 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： `API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
| key | 说明 | | key | 说明 |
|-----------|-----------| |-----------|-----------|
| values | 列中对应的备选值 | | values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 | | defaultIndex | 初始选中值的索引，默认为0 |
@ -163,7 +163,7 @@ export default {
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作： 在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
| 函数 | 说明 | | 函数 | 说明 |
|-----------|-----------| |-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 | | getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 | | setColumnValue(index, value) | 设置对应列中选中的值 |

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

@ -1,35 +1,33 @@
<style> <style>
.demo-popup { .demo-popup {
.van-button { .van-button {
margin: 10px 15px; margin: 10px 0 10px 15px;
} }
.van-popup-1 { .van-popup {
width: 60%; width: 60%;
box-sizing: border-box;
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
text-align: center;
}
.van-popup-2 {
width: 100%;
height: 200px;
box-sizing: border-box; box-sizing: border-box;
padding: 20px;
}
.van-popup-3 { &--bottom {
line-height: 50px; width: 100%;
text-align: center; height: 200px;
background-color: rgba(0, 0, 0, 0.701961); }
color: #fff;
}
.van-popup-4, &--top {
.van-popup-5 { color: #fff;
width: 100%; width: 100%;
height: 100%; border-radius: 0;
line-height: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
&--left,
&--right {
width: 100%;
height: 100%;
}
} }
} }
</style> </style>
@ -40,19 +38,18 @@ import Dialog from 'packages/dialog';
export default { export default {
data() { data() {
return { return {
popupShow1: false, show1: false,
popupShow2: false, show2: false,
popupShow3: false, show3: false,
popupShow4: false, show4: false
popupShow5: false
} }
}, },
watch: { watch: {
popupShow3(val) { show3(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow3 = false; this.show3 = false;
}, 2000); }, 2000);
} }
} }
@ -63,11 +60,7 @@ export default {
Dialog.confirm({ Dialog.confirm({
title: 'confirm标题', title: 'confirm标题',
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
}).then((action) => { })
console.log(action);
}, (error) => {
console.log(error);
});
} }
} }
}; };
@ -85,53 +78,43 @@ Vue.component(Popup.name, Popup);
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
`popup`默认从中间弹出
`popup`默认情况下是从中间弹出。
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-button @click="popupShow1 = true">从中间弹出popup</van-button> <van-button @click="show1 = true">弹出 Popup</van-button>
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true"> <van-popup v-model="show1">内容</van-popup>
从中间弹出popup
</van-popup>
``` ```
```javascript ```javascript
export default { export default {
data() { data() {
return { return {
popupShow1: false show1: false
} }
} }
}; };
``` ```
::: :::
#### 从不同位置弹出层 #### 弹出位置
通过`position`属性设置 Popup 弹出位置
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。 :::demo 弹出位置
:::demo 从不同位置弹出层
```html ```html
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button> <van-button @click="show2 = true;">底部弹出</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2"> <van-popup v-model="show2" position="bottom">
<van-button @click="showDialog">弹出dialog</van-button> <van-button @click="showDialog">弹出 Dialog</van-button>
</van-popup> </van-popup>
<van-button @click="popupShow3 = true">从上方弹出popup</van-button> <van-button @click="show3 = true">顶部弹出</van-button>
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false"> <van-popup v-model="show3" position="top" :overlay="false">
更新成功 更新成功
</van-popup> </van-popup>
<van-button @click="popupShow4 = true">从右方弹出popup</van-button> <van-button @click="show4 = true">右侧弹出</van-button>
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false"> <van-popup v-model="show4" position="right" :overlay="false">
<van-button @click.native="popupShow4 = false">关闭 popup</van-button> <van-button @click="show4 = false">关闭弹层</van-button>
</van-popup>
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
</van-popup> </van-popup>
``` ```
@ -139,18 +122,17 @@ export default {
export default { export default {
data() { data() {
return { return {
popupShow1: false, show1: false,
popupShow2: false, show2: false,
popupShow3: false, show3: false
popupShow4: false
} }
}, },
watch: { watch: {
popupShow2(val) { show2(val) {
if (val) { if (val) {
setTimeout(() => { setTimeout(() => {
this.popupShow2 = false; this.show2 = false;
}, 2000); }, 2000);
} }
} }
@ -161,12 +143,12 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 当前组件是否显示 | `Boolean` | `false` | - | | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - | | overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| 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

@ -55,7 +55,7 @@ Vue.component(Progress.name, Progress);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `Boolean` | `false` | | | inactive | 是否置灰 | `Boolean` | `false` | |
| percentage | 进度百分比 | `Number` | `false` | `0-100` | | percentage | 进度百分比 | `Number` | `false` | `0-100` |

14
docs/examples-docs/zh-CN/pull-refresh.md
View File

@ -97,16 +97,16 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 是否在加载中 | `Boolean` | - | - | | v-model | 是否在加载中 | `Boolean` | - | - |
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - | | pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - | | loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - | | loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
| animationDuration | 动画时长 | `Number` | `300` | - | | animationDuration | 动画时长 | `Number` | `300` | - |
| headHeight | 顶部内容高度 | `Number` | `50` | - | | headHeight | 顶部内容高度 | `Number` | `50` | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义内容 | | - | 自定义内容 |
| normal | 非下拉状态时顶部内容 | | normal | 非下拉状态时顶部内容 |

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

@ -134,7 +134,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用单选框 | `Boolean` | `false` | - | | disabled | 是否禁用单选框 | `Boolean` | `false` | - |
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - | | name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
### RadioGroup API ### RadioGroup API

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

@ -87,21 +87,21 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| placeholder | `input`的`placeholder`文案 | `String` | | | | placeholder | `input`的`placeholder`文案 | `String` | | |
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 | | background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | | | showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| cancel | 取消搜索 | - | | cancel | 取消搜索 | - |
| search | 确定搜索 | - | | search | 确定搜索 | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 | | action | 自定义搜索框右侧按钮，需要在`showAction`为 true 时才会显示 |

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

@ -121,26 +121,26 @@ Vue.component(Sku.name, Sku);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 是否显示sku | Boolean | false | 是 | | v-model | 是否显示sku | Boolean | false | 是 |
| sku | 商品sku数据 | Object | - | 是 | | sku | 商品sku数据 | Object | - | 是 |
| goods | 商品信息 | Object | - | 是 | | goods | 商品信息 | Object | - | 是 |
| goodsId | 商品id | String/Number | - | 是 | | goodsId | 商品id | String/Number | - | 是 |
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 | | hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 | | showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
| quota | 限购数(0表示不限购) | Number | 0 | 否 | | quota | 限购数(0表示不限购) | Number | 0 | 否 |
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 | | quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 | | resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 | | disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 | | stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 | | add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 | | buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
### slots ### slots
sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表： sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| |-----------|-----------|
| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 | | sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
| sku-group | 商品sku展示区 | | sku-group | 商品sku展示区 |

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

@ -63,7 +63,7 @@ Vue.component(Stepper.name, Stepper);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| min | 最小值 | `String | Number` | `1` | - | | min | 最小值 | `String | Number` | `1` | - |
| max | 最大值 | `String | Number` | - | - | | max | 最大值 | `String | Number` | - | - |
@ -74,7 +74,7 @@ Vue.component(Stepper.name, Stepper);
### Event ### Event
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 当绑定值变化时触发的事件 | 当前组件的值 | | change | 当绑定值变化时触发的事件 | 当前组件的值 |
| overlimit | 点击不可用的按钮时触发 | - | | overlimit | 点击不可用的按钮时触发 | - |

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

@ -143,19 +143,19 @@ export default {
### Steps API ### Steps API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| |-----------|-----------|
| icon | 自定义icon区域 | | icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 | | message-extra | 状态栏添加额外的元素 |

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

@ -93,23 +93,23 @@ Vue.component(SubmitBar.name, SubmitBar);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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` | 否 |
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| submit | 按钮点击事件回调 | - | | submit | 按钮点击事件回调 | - |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
|-----------|-----------| |-----------|-----------|
| tip | 提示文案中的额外操作和说明 | | tip | 提示文案中的额外操作和说明 |

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

@ -111,6 +111,6 @@ export default {
### 事件 ### 事件
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 每一页轮播结束后触发 | index, 当前页的索引 | | change | 每一页轮播结束后触发 | index, 当前页的索引 |

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

@ -65,15 +65,15 @@ export default {
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 开关状态 | `Boolean` | | | | v-model | 开关状态 | `Boolean` | | |
| title | 左侧标题 | `String` | `''` | | | title | 左侧标题 | `String` | `''` | |
| loading | 是否为加载状态 | `Boolean` | `false` | | | loading | 是否为加载状态 | `Boolean` | `false` | |
| disabled | 是否为禁用状态 | `Boolean` | `false` | | | disabled | 是否为禁用状态 | `Boolean` | `false` | |
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 | | change | 开关状态切换回调 | checked: 是否选中开关 |

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

@ -105,12 +105,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 开关选中状态 | `Boolean` | `false` | - | | v-model | 开关选中状态 | `Boolean` | `false` | - |
| loading | 是否为加载状态 | `Boolean` | `false` | - | | loading | 是否为加载状态 | `Boolean` | `false` | - |
| disabled | 是否为禁用状态 | `Boolean` | `false` | - | | disabled | 是否为禁用状态 | `Boolean` | `false` | - |
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| change | 开关状态切换回调 | checked: 是否选中开关 | | change | 开关状态切换回调 | checked: 是否选中开关 |

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

@ -231,24 +231,24 @@ export default {
### van-tabs API ### van-tabs API
| 参数 | 说明 | 类型 | 默认值 | 可选 | | 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| 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
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| click | 某个tab点击事件 | index：点击的`tab`的索引 | | click | 某个tab点击事件 | index：点击的`tab`的索引 |
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 | | disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |

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

@ -94,7 +94,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| v-model | 当前选中标签的索引 | `Number` | - | - | | v-model | 当前选中标签的索引 | `Number` | - | - |
### Tabbar Event ### Tabbar Event

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

@ -60,14 +60,14 @@ Vue.component(Tag.name, Tag);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 类型 | `String` | `''`| `primary` `success` `danger` | | type | 类型 | `String` | `''`| `primary` `success` `danger` |
| plain | 是否为空心样式 | `Boolean` | `false` | | | plain | 是否为空心样式 | `Boolean` | `false` | |
| mark | 是否为标记样式 | `Boolean` | `false` | | | mark | 是否为标记样式 | `Boolean` | `false` | |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义 Tag 显示内容 | | - | 自定义 Tag 显示内容 |

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

@ -158,7 +158,7 @@ export default {
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` | | type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
| message | 内容 | `String` | `''` | - | | message | 内容 | `String` | `''` | - |

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

@ -126,14 +126,14 @@ export default {
#### 传入参数 #### 传入参数
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | | | items | 分类显示所需的数据，具体数据结构可看 数据结构 | Array | [] | |
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | | | mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
| activeId | 右侧选择项，高亮的数据id | Number | 0 | | | activeId | 右侧选择项，高亮的数据id | Number | 0 | |
#### 事件 #### 事件
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
|-----------|-----------|-----------| |-----------|-----------|-----------|
| navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 | | navclick | 左侧导航点击时，触发的事件 | index：被点击的导航的索引 |
| itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 | | itemclick | 右侧选择项被点击时，会触发的事件 | data: 该点击项的数据 |

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

@ -58,6 +58,6 @@ export default {
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义上传显示图标 | | - | 自定义上传显示图标 |

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

@ -112,10 +112,10 @@ export default {
### 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` | |