mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] add Popup english document
This commit is contained in:
parent
14de879a3b
commit
a2f4a4ed83
@ -45,7 +45,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法参数
|
||||
### Arguments
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
|
@ -4,19 +4,18 @@ import Dialog from 'packages/dialog';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow3(val) {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow3 = false;
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -27,11 +26,7 @@ export default {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。弹窗提示文字,左右始终距离边20PX,上下距离20PX,文字左对齐。'
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -49,53 +44,41 @@ Vue.component(Popup.name, Popup);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
`popup`默认情况下是从中间弹出。
|
||||
Popup is located in the middle of the screen by default
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</van-popup>
|
||||
<van-button @click="show1 = true">Show Popup</van-button>
|
||||
<van-popup v-model="show1">Content</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false
|
||||
show1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 从不同位置弹出层
|
||||
#### Different Position
|
||||
Use `position` prop to set popup display position
|
||||
|
||||
可以设置`position`属性,`popup`即能从不同位置弹出,`position`的可选值有`top`,`bottom`,`right`,`left`。
|
||||
|
||||
:::demo 从不同位置弹出层
|
||||
:::demo Different Position
|
||||
```html
|
||||
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
|
||||
<van-button @click="showDialog">弹出dialog</van-button>
|
||||
<van-button @click="show2 = true;">From Bottom</van-button>
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-button @click="showDialog">Show Dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</van-popup>
|
||||
<van-button @click="show3 = true">From Top</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>
|
||||
|
||||
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
|
||||
<van-button @click.native="popupShow4 = false">关闭 popup</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-button @click="show4 = true">From Right</van-button>
|
||||
<van-popup v-model="show4" position="right" :overlay="false">
|
||||
<van-button @click="show4 = false">Close</van-button>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
@ -103,18 +86,18 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
show2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
this.show2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -127,10 +110,10 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
| v-model | Whether to show popup | `Boolean` | `false` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` | - |
|
||||
| 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` | |
|
||||
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
|
||||
|
@ -159,20 +159,20 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
|
||||
|
||||
### actions
|
||||
|
||||
|
||||
`API`中的`actions`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key`:
|
||||
|
||||
| key | 说明 |
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
|
@ -96,7 +96,7 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| areaList | 地区列表 | `Object` | - | - |
|
||||
| addressInfo | 收货人信息 | `Object` | `{}` | - |
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content:表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content:表单内容 |
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
### 数据格式
|
||||
|
||||
#### addressInfo 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
@ -133,7 +133,7 @@ export default {
|
||||
| is_default | 是否为默认地址 | `String` |
|
||||
|
||||
#### searchResult 数据格式
|
||||
| key | 说明 | 类型 |
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| name | 地名 | `String` |
|
||||
| address | 详细地址 | `String` |
|
||||
|
@ -98,7 +98,7 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中地址的 id | String | - | - |
|
||||
| list | 地址列表 | Array | `[]` | - |
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前地址对象,index: 索引 |
|
||||
@ -114,7 +114,7 @@ export default {
|
||||
|
||||
### 数据格式
|
||||
#### 地址列表字段说明
|
||||
| key | 说明 | 类型 |
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每条地址的唯一标识 | `String | Number` |
|
||||
| name | 收货人姓名 | `String` |
|
||||
|
@ -66,15 +66,15 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| 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
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数,具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
|
@ -79,11 +79,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
|
||||
|
||||
### Badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
|
@ -110,13 +110,13 @@ Vue.component(Button.name, Button);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
|
||||
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
|
||||
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
|
||||
| nativeType | 按钮类型(原生) | `String` | `''` | - |
|
||||
| diabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | - |
|
||||
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
|
||||
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
|
||||
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
|
||||
| nativeType | 按钮类型(原生) | `String` | `''` | - |
|
||||
| diabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | - |
|
||||
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
|
||||
|
@ -62,11 +62,11 @@ Vue.component(Card.name, Card);
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| num | 商品数量 | `String | Number` | - | - |
|
||||
| price | 商品价格 | `String | Number` | - | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
|
@ -43,14 +43,14 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| left | 左侧滑动内容 |
|
||||
|
@ -105,19 +105,19 @@ Vue.component(CellGroup.name, CellGroup);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | `String` | - | - |
|
||||
| title | 左侧标题 | `String` | - | - |
|
||||
| value | 右侧内容 | `String` | - | - |
|
||||
| label | 标题下方的描述信息 | `String` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
|
||||
| icon | 左侧图标 | `String` | - | - |
|
||||
| title | 左侧标题 | `String` | - | - |
|
||||
| value | 右侧内容 | `String` | - | - |
|
||||
| label | 标题下方的描述信息 | `String` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义`icon` |
|
||||
|
@ -127,9 +127,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| shape | 形状 | `String` | `round` | `square` |
|
||||
| name | 标识 Checkbox 名称 | `Boolean` | `false` | - |
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| shape | 形状 | `String` | `round` | `square` |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
|
@ -213,7 +213,7 @@ export default {
|
||||
|
||||
### ContactList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| add | 点击新增按钮时触发 | - |
|
||||
| edit | 点击编辑按钮时触发 | item: 当前联系人对象,index: 索引 |
|
||||
@ -230,7 +230,7 @@ export default {
|
||||
|
||||
### ContactEdit Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| save | 点击保存按钮时触发 | content:表单内容 |
|
||||
| delete | 点击删除按钮时触发 | content:表单内容 |
|
||||
@ -238,7 +238,7 @@ export default {
|
||||
### 数据格式
|
||||
|
||||
#### 联系人数据格式
|
||||
| key | 说明 | 类型 |
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 每位联系人的唯一标识 | `String | Number` |
|
||||
| name | 联系人姓名 | `String` |
|
||||
|
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### CouponCell API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 单元格标题 | `String` | `优惠` | - |
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
@ -148,7 +148,7 @@ export default {
|
||||
|
||||
### CouponList API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
|
||||
| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
|
||||
@ -163,14 +163,14 @@ export default {
|
||||
|
||||
### CouponList Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 优惠券切换回调 | index, 选中优惠券的索引 |
|
||||
| exchange | 兑换优惠券回调 | code, 兑换码 |
|
||||
|
||||
### 数据格式
|
||||
#### 优惠券字段说明
|
||||
| key | 说明 | 类型 |
|
||||
| key | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| id | 优惠券 id | `String` |
|
||||
| name | 优惠券名称 | `String` |
|
||||
|
@ -106,18 +106,18 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||
| minHour | 可选的最小小时 | Number | 0 | |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | |
|
||||
| minHour | 可选的最小小时 | Number | 0 | |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
|
||||
在`change`事件中,可以获取到`picker`实例,对`picker`进行相应的更新等操作:
|
||||
|
||||
| 函数 | 说明 |
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
|
@ -113,20 +113,20 @@ export default {
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
|
||||
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
|
||||
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| 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` | |
|
||||
|
@ -111,13 +111,13 @@ Vue.component(Field.name, Field);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
| label | 输入框标签 | `String` | - | - |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | - |
|
||||
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
|
||||
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
|
||||
| type | 输入框类型 | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
|
||||
| value | 输入框的值 | `String` | - | - |
|
||||
| label | 输入框标签 | `String` | - | - |
|
||||
| disabled | 是否禁用输入框 | `Boolean` | `false` | - |
|
||||
| error | 输入框是否有错误 | `Boolean` | `false` | - |
|
||||
| autosize | 高度自适应(仅支持textarea) | `Boolean` | `false` | - |
|
||||
| icon | 输入框尾部图标 | `String` | - | Icon 组件支持的类型 |
|
||||
|
||||
### Event
|
||||
|
||||
|
@ -76,13 +76,13 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
|
||||
| iconClass | 图标额外类名 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
|
||||
| iconClass | 图标额外类名 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
|
||||
#### GoodsActionBigBtn
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
| url | 跳转链接 | `String` | `javascript:;` | - |
|
||||
| primary | 是否主行动按钮,主行动按钮默认为红色 | `Boolean` | `false` | - |
|
||||
|
@ -163,6 +163,6 @@ Vue.component(Icon.name, Icon);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | `String` | `''` | - |
|
||||
| name | icon名称 | `String` | `''` | - |
|
||||
|
@ -62,6 +62,6 @@ export default {
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
|
@ -85,6 +85,6 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
@ -139,13 +139,13 @@ export default {
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | 加载时的图片 | `String` | - | - |
|
||||
| error | 错误时的图片 | `String` | - | - |
|
||||
| preload | 预加载高度的比例 | `String` | - | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` | |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` | |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
|
||||
| adapter | 适配器 | `Object` | - | - |
|
||||
| filter | 图片url过滤 | `Object` | - | - |
|
||||
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
|
||||
|
@ -38,7 +38,7 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
|
@ -45,7 +45,7 @@ Vue.component(NavBar.name, NavBar);
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| left | 自定义左侧区域内容 |
|
||||
|
@ -55,7 +55,7 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mode | 通告栏模式 | String | `''` | `closeable` `link` |
|
||||
| delay | 动画延迟时间,单位秒 | Number | `1` | - |
|
||||
@ -64,6 +64,6 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 点击事件回调 | - |
|
||||
|
@ -83,12 +83,12 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||
| show | 是否显示键盘 | `Boolean` | - | - |
|
||||
| title | 键盘标题 | `String` | - | - |
|
||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
|
||||
| extraKey | 左下角按键内容 | `String` | `''` | - |
|
||||
| zIndex | 键盘 z-index | `Number` | `100` | - |
|
||||
| transition | 是否开启过场动画 | `Boolean` | `true` | - |
|
||||
| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
@ -55,14 +55,14 @@ Vue.component(Panel.name, Panel);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | - | - |
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| status | 状态 | `String` | - | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| status | 状态 | `String` | - | - |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| header | 自定义 header |
|
||||
|
@ -76,7 +76,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 密码值 | `String` | `''` | - |
|
||||
| value | 密码值 | `String` | `''` | - |
|
||||
| length | 密码最大长度 | `Number` | `6` | - |
|
||||
| info | 输入框下方提示 | `String` | - | - |
|
||||
| errorInfo | 输入框下方错误提示 | `String` | - | - |
|
||||
|
@ -141,19 +141,19 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| 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
|
||||
|
||||
`API`中的`columns`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key`:
|
||||
|
||||
| key | 说明 |
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中值的索引,默认为0 |
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
|
||||
在`change`事件中,可以获取到`picker`实例,对`picker`进行相应的更新等操作:
|
||||
|
||||
| 函数 | 说明 |
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
|
@ -1,35 +1,33 @@
|
||||
<style>
|
||||
.demo-popup {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
margin: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup-1 {
|
||||
.van-popup {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&--top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&--left,
|
||||
&--right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -40,19 +38,18 @@ import Dialog from 'packages/dialog';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow3(val) {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow3 = false;
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -63,11 +60,7 @@ export default {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
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 基础用法
|
||||
```html
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</van-popup>
|
||||
<van-button @click="show1 = true">弹出 Popup</van-button>
|
||||
<van-popup v-model="show1">内容</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false
|
||||
show1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 从不同位置弹出层
|
||||
#### 弹出位置
|
||||
通过`position`属性设置 Popup 弹出位置
|
||||
|
||||
可以设置`position`属性,`popup`即能从不同位置弹出,`position`的可选值有`top`,`bottom`,`right`,`left`。
|
||||
|
||||
:::demo 从不同位置弹出层
|
||||
:::demo 弹出位置
|
||||
```html
|
||||
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
|
||||
<van-button @click="showDialog">弹出dialog</van-button>
|
||||
<van-button @click="show2 = true;">底部弹出</van-button>
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-button @click="showDialog">弹出 Dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
<van-button @click="show3 = true">顶部弹出</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">
|
||||
更新成功
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
|
||||
<van-button @click.native="popupShow4 = false">关闭 popup</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-button @click="show4 = true">右侧弹出</van-button>
|
||||
<van-popup v-model="show4" position="right" :overlay="false">
|
||||
<van-button @click="show4 = false">关闭弹层</van-button>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
@ -139,18 +122,17 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
show2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
this.show2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -161,12 +143,12 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
|
@ -55,7 +55,7 @@ Vue.component(Progress.name, Progress);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否置灰 | `Boolean` | `false` | |
|
||||
| percentage | 进度百分比 | `Number` | `false` | `0-100` |
|
||||
|
@ -97,16 +97,16 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否在加载中 | `Boolean` | - | - |
|
||||
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
|
||||
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
|
||||
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
|
||||
| animationDuration | 动画时长 | `Number` | `300` | - |
|
||||
| headHeight | 顶部内容高度 | `Number` | `50` | - |
|
||||
| v-model | 是否在加载中 | `Boolean` | - | - |
|
||||
| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
|
||||
| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
|
||||
| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
|
||||
| animationDuration | 动画时长 | `Number` | `300` | - |
|
||||
| headHeight | 顶部内容高度 | `Number` | `50` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| normal | 非下拉状态时顶部内容 |
|
||||
|
@ -134,7 +134,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | `Boolean` | `false` | - |
|
||||
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
|
||||
| name | 根据这个来判断 radio 是否选中 | `Boolean` | `false` | - |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
|
@ -87,21 +87,21 @@ Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
|
||||
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
|
||||
| placeholder | `input`的`placeholder`文案 | `String` | | |
|
||||
| background | 搜索框背景色 | `String` | `#f2f2f2` | 所有浏览器支持的颜色描述 |
|
||||
| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| cancel | 取消搜索 | - |
|
||||
| search | 确定搜索 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| action | 自定义搜索框右侧按钮,需要在`showAction`为 true 时才会显示 |
|
||||
|
@ -121,26 +121,26 @@ Vue.component(Sku.name, Sku);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 是否显示sku | Boolean | false | 是 |
|
||||
| sku | 商品sku数据 | Object | - | 是 |
|
||||
| goods | 商品信息 | Object | - | 是 |
|
||||
| goodsId | 商品id | String/Number | - | 是 |
|
||||
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
|
||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||
| v-model | 是否显示sku | Boolean | false | 是 |
|
||||
| sku | 商品sku数据 | Object | - | 是 |
|
||||
| goods | 商品信息 | Object | - | 是 |
|
||||
| goodsId | 商品id | String/Number | - | 是 |
|
||||
| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
|
||||
| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true | 否 |
|
||||
| quota | 限购数(0表示不限购) | Number | 0 | 否 |
|
||||
| quotaUsed | 已经购买过的数量 | Number | 0 | 否 |
|
||||
| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false | 否 |
|
||||
| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
|
||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||
| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' | 否 |
|
||||
| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - | 否 |
|
||||
| buy-clicked | 点击购买回调 | Function(skuData: Object) | - | 否 |
|
||||
|
||||
### slots
|
||||
sku组件默认划分好了若干区块,这些区块都定义成了slot,可以按需进行替换。区块顺序见下表:
|
||||
|
||||
| 名称 | 说明 |
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| sku-header | 商品信息展示区,包含商品图片、名称、价格等信息 |
|
||||
| sku-group | 商品sku展示区 |
|
||||
|
@ -63,7 +63,7 @@ Vue.component(Stepper.name, Stepper);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | `String | Number` | `1` | - |
|
||||
| max | 最大值 | `String | Number` | - | - |
|
||||
@ -74,7 +74,7 @@ Vue.component(Stepper.name, Stepper);
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| overlimit | 点击不可用的按钮时触发 | - |
|
||||
|
@ -143,19 +143,19 @@ export default {
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前步骤,起始值为0 | `Number` | | |
|
||||
| icon | 当前步骤的icon | `String` | | |
|
||||
| icon | 当前步骤的icon | `String` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
|
||||
| title | 当前步骤从标题 | `String` | | |
|
||||
| description | 当前步骤描述 | `String` | | |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
| title | 当前步骤从标题 | `String` | | |
|
||||
| description | 当前步骤描述 | `String` | | |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
@ -93,23 +93,23 @@ Vue.component(SubmitBar.name, SubmitBar);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| price | 价格(单位分) | `Number` | | 是 |
|
||||
| button-text | 按钮文字 | `String` | | 是 |
|
||||
| price | 价格(单位分) | `Number` | | 是 |
|
||||
| button-text | 按钮文字 | `String` | | 是 |
|
||||
| button-type | 按钮类型 | `String` | `danger` | 否 |
|
||||
| tip | 提示文案 | `String` | | 否 |
|
||||
| tip | 提示文案 | `String` | | 否 |
|
||||
| disabled | 是否禁用按钮 | `Boolean` | `false` | 否 |
|
||||
| loading | 是否显示加载中的按钮 | `Boolean` | `false` | 否 |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| submit | 按钮点击事件回调 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| tip | 提示文案中的额外操作和说明 |
|
||||
|
@ -111,6 +111,6 @@ export default {
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 每一页轮播结束后触发 | index, 当前页的索引 |
|
||||
|
@ -65,15 +65,15 @@ export default {
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关状态 | `Boolean` | | |
|
||||
| v-model | 开关状态 | `Boolean` | | |
|
||||
| title | 左侧标题 | `String` | `''` | |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
@ -105,12 +105,12 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 开关选中状态 | `Boolean` | `false` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
| v-model | 开关选中状态 | `Boolean` | `false` | - |
|
||||
| loading | 是否为加载状态 | `Boolean` | `false` | - |
|
||||
| disabled | 是否为禁用状态 | `Boolean` | `false` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 开关状态切换回调 | checked: 是否选中开关 |
|
||||
|
@ -231,24 +231,24 @@ export default {
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `String` | | |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | | |
|
||||
| classtype | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| 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
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index:点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index:点击的`tab`的索引 |
|
||||
|
@ -94,7 +94,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前选中标签的索引 | `Number` | - | - |
|
||||
| v-model | 当前选中标签的索引 | `Number` | - | - |
|
||||
|
||||
### Tabbar Event
|
||||
|
||||
|
@ -60,14 +60,14 @@ Vue.component(Tag.name, Tag);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
|
||||
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义 Tag 显示内容 |
|
||||
|
@ -158,7 +158,7 @@ export default {
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
|
||||
| message | 内容 | `String` | `''` | - |
|
||||
|
@ -126,14 +126,14 @@ export default {
|
||||
|
||||
#### 传入参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| items | 分类显示所需的数据,具体数据结构可看 数据结构 | Array | [] | |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
|
||||
| activeId | 右侧选择项,高亮的数据id | Number | 0 | |
|
||||
| items | 分类显示所需的数据,具体数据结构可看 数据结构 | Array | [] | |
|
||||
| mainActiveIndex | 左侧导航高亮的索引 | Number | 0 | |
|
||||
| activeId | 右侧选择项,高亮的数据id | Number | 0 | |
|
||||
|
||||
#### 事件
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| navclick | 左侧导航点击时,触发的事件 | index:被点击的导航的索引 |
|
||||
| itemclick | 右侧选择项被点击时,会触发的事件 | data: 该点击项的数据 |
|
||||
|
@ -58,6 +58,6 @@ export default {
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义上传显示图标 |
|
||||
|
@ -112,10 +112,10 @@ export default {
|
||||
|
||||
### 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