mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge pull request #101 from chenjiahan/dev
Doc: update Step/Loading/Tag/Badge documents
This commit is contained in:
neverland
GitHub
commit
c594091955
@ -1,29 +1,36 @@
|
||||
<style>
|
||||
.demo-badge {
|
||||
.badge-group-wrapper {
|
||||
padding: 30px 20px;
|
||||
.van-badge-group {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-badge-group {
|
||||
.van-badge {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: '2'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onItemClick(e, data) {
|
||||
this.activeKey = data.mark;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge 徽章
|
||||
@ -39,48 +46,44 @@ Vue.component(Badge.name, Badge);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下激活第一个`badge`。
|
||||
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<van-badge-group>
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge title="热销榜" @click="onClick"></van-badge>
|
||||
<van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
|
||||
<van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
|
||||
</van-badge-group>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中某个badge
|
||||
|
||||
如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
### BadgeGroup API
|
||||
|
||||
:::demo 选中某个badge
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<van-badge-group :active-key="2">
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### z-badge-group API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
|
||||
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
|
||||
|
||||
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
### Badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
|
||||
| title | 内容 | `String` | `''` | - |
|
||||
| info | 提示消息 | `String` | `''` | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
|
||||
@ -114,8 +114,8 @@ Vue.component(Button.name, Button);
|
||||
| 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` | |
|
||||
| nativeType | 按钮类型（原生） | `String` | `''` | - |
|
||||
| diabled | 是否禁用 | `Boolean` | `false` | - |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | - |
|
||||
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Card 图文组件
|
||||
|
||||
### 使用指南
|
||||
@ -11,15 +21,9 @@ Vue.component(Card.name, Card);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</van-card>
|
||||
<van-card title="商品名称" desc="商品描述" :thumb="imageURL" />
|
||||
```
|
||||
:::
|
||||
|
||||
@ -29,10 +33,9 @@ Vue.component(Card.name, Card);
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-card
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<van-card :thumb="imageURL">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<h4 class="van-card__title">商品名称</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="van-card__row" slot="desc">
|
||||
@ -50,11 +53,10 @@ Vue.component(Card.name, Card);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| thumb | 左侧图片 | `string` | | |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
| centered | 内容是否垂直居中 | `string` | `false` | |
|
||||
|
||||
| thumb | 左侧图片 | `String` | - | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| centered | 内容是否垂直居中 | `String` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
@ -62,6 +64,6 @@ Vue.component(Card.name, Card);
|
||||
|-----------|-----------|
|
||||
| title | 自定义标题 |
|
||||
| desc | 自定义描述 |
|
||||
| tags | 自定义tags |
|
||||
| thumb | 自定义thumb |
|
||||
| footer | 自定义footer |
|
||||
| tags | 自定义 tags |
|
||||
| thumb | 自定义 thumb |
|
||||
| footer | 自定义 footer |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<style>
|
||||
.swipe-delete-btn {
|
||||
background-color: #FF4444;
|
||||
.van-cell-swipe__left,
|
||||
.van-cell-swipe__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
@ -9,15 +9,11 @@
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
.swipe-check-btn {
|
||||
background-color: #84c483;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
.van-cell-swipe__left {
|
||||
background-color: #FF4444;
|
||||
}
|
||||
.van-cell-swipe__right {
|
||||
background-color: #84c483;
|
||||
}
|
||||
</style>
|
||||
## CellSwipe 滑动单元格
|
||||
@ -36,22 +32,21 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">选择</span>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
</van-cell-group>
|
||||
<span slot="right" class="swipe-delete-btn">删除</span>
|
||||
<span slot="left" class="swipe-check-btn">选择</span>
|
||||
<span slot="right">删除</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| left-width | 左侧滑动按钮宽度 | `number` | 0 | |
|
||||
| right-width | 右侧滑动按钮宽度 | `number` | 0 | |
|
||||
| left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
|
||||
| right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -8,6 +8,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-cell {
|
||||
.van-cell-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.van-cell__right-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-cell-text,
|
||||
.van-tag--danger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
@ -22,86 +37,66 @@ Vue.component(CellGroup.name, CellGroup);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
你可以将`van-cell-group`组件看成一个容器即可。
|
||||
将`van-cell-group`组件看成一个容器即可
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容" label="描述信息"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 只设置value
|
||||
|
||||
只设置`value`时会向左对齐。
|
||||
只设置`value`时会向左对齐
|
||||
|
||||
:::demo 只设置value
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="单元格1内容"></van-cell>
|
||||
<van-cell value="单元格2内容"></van-cell>
|
||||
<van-cell value="单元格内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo 标题带描述信息
|
||||
#### 展示图标
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
:::demo 展示图标
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" value="查看专栏" is-link url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息" value="查看专栏" is-link></van-cell>
|
||||
<van-cell title="单元格" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带图标
|
||||
#### 展示箭头
|
||||
传入`isLink`属性则会在右侧显示箭头
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo 带图标
|
||||
:::demo 展示箭头
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" icon="home"></van-cell>
|
||||
<van-cell title="线下门店" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
|
||||
<van-cell title="单元格1" is-link></van-cell>
|
||||
<van-cell title="单元格2" is-link value="内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`、`icon`、`title`和`right-icon`的`slot`。
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<van-cell value="进入店铺" icon="home" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
|
||||
<van-cell title="线下门店" icon="location" is-link></van-cell>
|
||||
<van-cell title="其他">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="passed" class="van-cell__right-icon" style="font-size: 16px;"></van-icon>
|
||||
<van-icon name="search" class="van-cell__right-icon"></van-icon>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
@ -112,12 +107,13 @@ Vue.component(CellGroup.name, CellGroup);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | `string` | | |
|
||||
| title | 左侧标题 | `string` | | |
|
||||
| value | 右侧内容 | `string` | | |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | |
|
||||
| url | 跳转链接 | `string` | | |
|
||||
| label | 描述信息，显示在标题下方 | `string` | | |
|
||||
| icon | 左侧图标 | `String` | - | - |
|
||||
| title | 左侧标题 | `String` | - | - |
|
||||
| value | 右侧内容 | `String` | - | - |
|
||||
| label | 标题下方的描述信息 | `String` | - | - |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -8,13 +8,14 @@
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
@ -29,15 +30,99 @@
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'packages';
|
||||
|
||||
const icons = [
|
||||
'close',
|
||||
'location',
|
||||
'clock',
|
||||
'gold-coin',
|
||||
'chat',
|
||||
'exchange',
|
||||
'upgrade',
|
||||
'edit',
|
||||
'contact',
|
||||
'passed',
|
||||
'points',
|
||||
'delete',
|
||||
'records',
|
||||
'logistics',
|
||||
'check',
|
||||
'checked',
|
||||
'gift',
|
||||
'like-o',
|
||||
'like',
|
||||
'qr',
|
||||
'qr-invalid',
|
||||
'shop',
|
||||
'photograph',
|
||||
'add',
|
||||
'add2',
|
||||
'photo',
|
||||
'cart',
|
||||
'arrow',
|
||||
'search',
|
||||
'clear',
|
||||
'success',
|
||||
'fail',
|
||||
'wechat',
|
||||
'alipay',
|
||||
'password-view',
|
||||
'wap-nav',
|
||||
'password-not-view',
|
||||
'wap-home',
|
||||
'ecard-pay',
|
||||
'balance-pay',
|
||||
'peer-pay',
|
||||
'credit-pay',
|
||||
'debit-pay',
|
||||
'other-pay',
|
||||
'cart',
|
||||
'browsing-history',
|
||||
'goods-collect',
|
||||
'shop-collect',
|
||||
'receive-gift',
|
||||
'send-gift',
|
||||
'setting',
|
||||
'coupon',
|
||||
'free-postage',
|
||||
'discount',
|
||||
'birthday-privilege',
|
||||
'member-day-privilege',
|
||||
'balance-details',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'cash-on-deliver',
|
||||
'gift-card-pay',
|
||||
'underway',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'question',
|
||||
'description',
|
||||
'card',
|
||||
'gift-card',
|
||||
'coupon'
|
||||
];
|
||||
|
||||
Vue.component('van-icon-inner', Icon);
|
||||
Vue.component('van-icon', {
|
||||
props: ['name'],
|
||||
|
||||
render(h) {
|
||||
return <van-col span="8">
|
||||
<van-icon-inner name={this.name}></van-icon-inner>
|
||||
<span>{this.name}</span>
|
||||
</van-col>
|
||||
return (
|
||||
<div>
|
||||
{icons.map(icon => (
|
||||
<van-col span="8">
|
||||
<van-icon-inner name={icon}></van-icon-inner>
|
||||
<span>{icon}</span>
|
||||
</van-col>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
@ -57,7 +142,7 @@ Vue.component(Icon.name, Icon);
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可：
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -65,90 +150,8 @@ Vue.component(Icon.name, Icon);
|
||||
```
|
||||
:::
|
||||
|
||||
#### 图标列表
|
||||
|
||||
:::demo 所有Icon
|
||||
```html
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<van-icon name="qr"></van-icon>
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<van-icon name="close"></van-icon>
|
||||
<van-icon name="location"></van-icon>
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<van-icon name="check"></van-icon>
|
||||
<van-icon name="checked"></van-icon>
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<van-icon name="chat"></van-icon>
|
||||
<van-icon name="shop"></van-icon>
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<van-icon name="add"></van-icon>
|
||||
<van-icon name="add2"></van-icon>
|
||||
<van-icon name="photo"></van-icon>
|
||||
<van-icon name="edit"></van-icon>
|
||||
<van-icon name="passed"></van-icon>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<van-icon name="gift"></van-icon>
|
||||
<van-icon name="search"></van-icon>
|
||||
<van-icon name="clear"></van-icon>
|
||||
<van-icon name="success"></van-icon>
|
||||
<van-icon name="fail"></van-icon>
|
||||
<van-icon name="contact"></van-icon>
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<van-icon name="wap-nav"></van-icon>
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<van-icon name="wap-home"></van-icon>
|
||||
<van-icon name="ecard-pay"></van-icon>
|
||||
<van-icon name="balance-pay"></van-icon>
|
||||
<van-icon name="peer-pay"></van-icon>
|
||||
<van-icon name="credit-pay"></van-icon>
|
||||
<van-icon name="debit-pay"></van-icon>
|
||||
<van-icon name="other-pay"></van-icon>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<van-icon name="browsing-history"></van-icon>
|
||||
<van-icon name="goods-collect"></van-icon>
|
||||
<van-icon name="shop-collect"></van-icon>
|
||||
<van-icon name="receive-gift"></van-icon>
|
||||
<van-icon name="send-gift"></van-icon>
|
||||
<van-icon name="setting"></van-icon>
|
||||
<van-icon name="points"></van-icon>
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<van-icon name="free-postage"></van-icon>
|
||||
<van-icon name="discount"></van-icon>
|
||||
<van-icon name="birthday-privilege"></van-icon>
|
||||
<van-icon name="member-day-privilege"></van-icon>
|
||||
<van-icon name="balance-details"></van-icon>
|
||||
<van-icon name="cash-back-record"></van-icon>
|
||||
<van-icon name="points-mall"></van-icon>
|
||||
<van-icon name="exchange-record"></van-icon>
|
||||
<van-icon name="pending-payment"></van-icon>
|
||||
<van-icon name="pending-orders"></van-icon>
|
||||
<van-icon name="pending-deliver"></van-icon>
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<van-icon name="pending-evaluate"></van-icon>
|
||||
<van-icon name="cash-on-deliver"></van-icon>
|
||||
<van-icon name="gift-card-pay"></van-icon>
|
||||
<van-icon name="underway"></van-icon>
|
||||
<van-icon name="point-gift"></van-icon>
|
||||
<van-icon name="after-sale"></van-icon>
|
||||
<van-icon name="edit-data"></van-icon>
|
||||
<van-icon name="question"></van-icon>
|
||||
<van-icon name="delete"></van-icon>
|
||||
<van-icon name="records"></van-icon>
|
||||
<van-icon name="description"></van-icon>
|
||||
<van-icon name="card"></van-icon>
|
||||
<van-icon name="gift-card"></van-icon>
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<van-icon name="clock"></van-icon>
|
||||
<van-icon name="gold-coin"></van-icon>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | `string` | `''` | |
|
||||
| name | icon名称 | `String` | `''` | - |
|
||||
|
||||
@ -11,7 +11,7 @@ import { ImagePreview } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
@ -38,22 +38,20 @@ import { ImagePreview } from 'vant';
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'packages/index';
|
||||
<van-button @click="showImagePreview">预览图片</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -79,12 +79,12 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
| span | 列元素宽度 | `String | Number` | - | - |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | - |
|
||||
| prefix | className 前缀 | `String` | `van` | - |
|
||||
|
||||
@ -1,19 +1,8 @@
|
||||
<style>
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(17, 17, 17, 0.7);
|
||||
margin: 0 auto;
|
||||
width: 120px;
|
||||
padding: 45px 0;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -29,39 +18,21 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
#### 单色 spinner
|
||||
|
||||
:::demo 渐变深色spinner
|
||||
:::demo 单色 spinner
|
||||
```html
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变浅色spinner
|
||||
#### 渐变色 spinner
|
||||
|
||||
:::demo 渐变浅色spinner
|
||||
:::demo 渐变色 spinner
|
||||
```html
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(17, 17, 17, 0.7);
|
||||
width: 120px;
|
||||
padding: 45px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 单色spinner
|
||||
|
||||
:::demo 单色spinner
|
||||
```html
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -69,5 +40,5 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | `loading`颜色 | `string` | `black` | `black`, `white` |
|
||||
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` |
|
||||
| color | 颜色 | `string` | `black` | `black` `white` |
|
||||
| type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` |
|
||||
|
||||
@ -58,9 +58,9 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mode | 通告栏模式 | String | `''` | `closeable` `link` |
|
||||
| delay | 动画延迟时间，单位秒 | Number | `1` | |
|
||||
| scrollable | 是否滚动 | Boolean | `true` | |
|
||||
| speed | 滚动速率，单位px | Number | `40` | |
|
||||
| delay | 动画延迟时间，单位秒 | Number | `1` | - |
|
||||
| speed | 滚动速率，单位px | Number | `40` | - |
|
||||
| scrollable | 是否滚动 | Boolean | `true` | - |
|
||||
|
||||
### Event
|
||||
|
||||
|
||||
@ -221,6 +221,12 @@ export default {
|
||||
| is_period_buy | 是否为周期购 | `Boolean` |
|
||||
| show_delivery_time | 是否显示发货时间 | `Boolean` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
|
||||
|
||||
### Slot
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
|
||||
@ -1,19 +1,6 @@
|
||||
<style>
|
||||
.demo-panel {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel-buttons {
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
@ -21,7 +8,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
.van-panel__content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@ -39,47 +26,24 @@ Vue.component(Panel.name, Panel);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
面板只是一个容器，里面可以放入自定义的内容
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
<div>Panel内容</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
|
||||
使用`slot`自定义内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<h4 class="van-card__desc">商品sku</h4>
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<div>Panel内容</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
@ -89,11 +53,11 @@ Vue.component(Panel.name, Panel);
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
| status | 状态 | `string` | | |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| desc | 描述 | `String` | - | - |
|
||||
| status | 状态 | `String` | - | - |
|
||||
|
||||
|
||||
### Slot
|
||||
@ -101,5 +65,5 @@ Vue.component(Panel.name, Panel);
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义内容 |
|
||||
| header | 自定义header |
|
||||
| footer | 自定义footer |
|
||||
| header | 自定义 header |
|
||||
| footer | 自定义 footer |
|
||||
|
||||
@ -163,9 +163,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` |
|
||||
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` |
|
||||
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` |
|
||||
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | |
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出菜单位置 | `String` | - | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `Boolean` | `true` | - |
|
||||
| transition | 弹出菜单的`transition` | `String` | `popup-slide` | |
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
<style>
|
||||
.demo-steps {
|
||||
.steps-success {
|
||||
.steps-success,
|
||||
.van-icon-location {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,7 +25,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -42,7 +47,7 @@ Vue.component(Steps.name, Steps);
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
@ -61,7 +66,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,13 +74,19 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 只显示步骤条
|
||||
#### 物流描述
|
||||
|
||||
当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。
|
||||
通过`title`和`description`属性来定义物流描述信息
|
||||
|
||||
:::demo 只显示步骤条
|
||||
:::demo 物流描述
|
||||
```html
|
||||
<van-steps :active="active">
|
||||
<van-steps
|
||||
:active="active"
|
||||
icon="logistics"
|
||||
icon-class="steps-success"
|
||||
title="等待商家发货"
|
||||
description="物流描述"
|
||||
>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
@ -84,38 +95,37 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 竖式步骤条
|
||||
#### 竖向步骤条
|
||||
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。
|
||||
可以通过设置`direction`属性来改变步骤条的显示方式
|
||||
|
||||
:::demo 只显示步骤条
|
||||
:::demo 竖向步骤条
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
<h3>【城市】物流状态2</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>未发货</h3>
|
||||
<p>2016-07-12 12:12:12</p>
|
||||
<h3>快件已发货</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
|
||||
使用`slot`增加自定义内容
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-steps :active="active" title="等待商家发货">
|
||||
<van-icon slot="icon" name="like"></van-icon>
|
||||
<p slot="message-extra">流程</p>
|
||||
<van-icon slot="icon" name="location"></van-icon>
|
||||
<p slot="message-extra">物流进度</p>
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
@ -128,13 +138,13 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | `number` | | |
|
||||
| icon | 当前步骤的icon | `string` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
|
||||
| title | 当前步骤从标题 | `string` | | |
|
||||
| description | 当前步骤描述 | `string` | | |
|
||||
| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` |
|
||||
| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | |
|
||||
| active | 当前步骤，起始值为0 | `Number` | | |
|
||||
| icon | 当前步骤的icon | `String` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
|
||||
| title | 当前步骤从标题 | `String` | | |
|
||||
| description | 当前步骤描述 | `String` | | |
|
||||
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
|
||||
| activeColor | active状态颜色 | `String` | `#06bf04` | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
@ -142,4 +152,3 @@ export default {
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.demo-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,44 +24,37 @@ Vue.component(Tag.name, Tag);
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
|
||||
|
||||
通过 type 属性控制 Tag 颜色，默认为灰色
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="success">四字标签</van-tag>
|
||||
<van-tag type="primary">一</van-tag>
|
||||
</div>
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
#### 空心样式
|
||||
设置`plain`属性设置为空心样式
|
||||
|
||||
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
|
||||
|
||||
:::demo 高级用法
|
||||
:::demo 空心样式
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain type="success">返现</van-tag>
|
||||
</div>
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 标记样式
|
||||
通过`mark`设置为标记样式
|
||||
|
||||
:::demo 标记样式
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -65,12 +62,12 @@ Vue.component(Tag.name, Tag);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| plain | 是否是空心tag | `boolean` | `false` | |
|
||||
| mark | 是否是标记 | `boolean` | `false` | |
|
||||
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
|
||||
| type | 类型 | `String` | `''`| `primary` `success` `danger` |
|
||||
| plain | 是否为空心样式 | `Boolean` | `false` | |
|
||||
| mark | 是否为标记样式 | `Boolean` | `false` | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义tag显示内容 |
|
||||
| - | 自定义 Tag 显示内容 |
|
||||
|
||||
@ -54,44 +54,42 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
.examples-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.examples-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background: #f8f8f8;
|
||||
position: relative;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
padding: 10px 0 20px;
|
||||
background: #f8f8f8;
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
padding: 10px 0 20px;
|
||||
background: #f8f8f8;
|
||||
|
||||
&.footer-fixed {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.footer-fixed {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zanui-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
.zanui-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-block',
|
||||
|
||||
computed: {
|
||||
component() {
|
||||
return this.$route.path.split('/').pop();
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docConfig from '../doc.config.js';
|
||||
import docConfig from '../doc.config';
|
||||
import MobileNav from './mobile-nav';
|
||||
|
||||
export default {
|
||||
|
||||
@ -2,13 +2,12 @@ import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import routes from './router.config';
|
||||
import Vant, { Lazyload } from 'packages/index';
|
||||
import Vant, { Lazyload } from 'packages';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import DemoList from './components/demo-list';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
import 'zan-doc/src/helper/touch-simulator';
|
||||
|
||||
import DemoList from './components/demo-list.vue';
|
||||
|
||||
Vue.use(Vant);
|
||||
Vue.use(ZanDoc);
|
||||
Vue.use(Lazyload, {
|
||||
@ -31,7 +30,7 @@ router.beforeEach((to, from, next) => {
|
||||
if (container) {
|
||||
document.querySelector('.examples-container').scrollTop = 0;
|
||||
}
|
||||
next()
|
||||
next();
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
|
||||
@ -4,7 +4,6 @@ import App from './ExamplesDocsApp';
|
||||
import routes from './router.config';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import 'packages/vant-css/src/reset.css';
|
||||
|
||||
const isMobile = (function() {
|
||||
var platform = navigator.userAgent.toLowerCase();
|
||||
@ -14,7 +13,7 @@ const isMobile = (function() {
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanDoc);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component(DemoBlock.name, DemoBlock);
|
||||
|
||||
const routesConfig = routes();
|
||||
routesConfig.push({
|
||||
@ -41,7 +40,7 @@ router.afterEach(() => {
|
||||
if (!isMobile) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
|
||||
10
package.json
10
package.json
@ -42,7 +42,7 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"babel-runtime": "6.x",
|
||||
"vue-lazyload": "^1.0.6"
|
||||
"vue-lazyload": "^1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "2.4.2"
|
||||
@ -65,7 +65,7 @@
|
||||
"cheerio": "^0.22.0",
|
||||
"codecov": "^2.2.0",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.5",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint-plugin-vue": "^2.1.0",
|
||||
"extract-text-webpack-plugin": "2.0.0",
|
||||
"felint": "^0.5.0-alpha.3",
|
||||
@ -81,12 +81,12 @@
|
||||
"html-webpack-plugin": "^2.29.0",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"json-templater": "^1.0.4",
|
||||
"karma": "^1.7.0",
|
||||
"karma": "^1.7.1",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-sinon-chai": "^1.2.4",
|
||||
"karma-sinon-chai": "^1.3.2",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.31",
|
||||
"karma-webpack": "^2.0.4",
|
||||
@ -117,6 +117,6 @@
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "^0.2.9"
|
||||
"zan-doc": "^0.2.10"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<a
|
||||
class="van-badge"
|
||||
:class="{ 'van-badge--select': isSelect }"
|
||||
:href="url"
|
||||
@click="handleClick">
|
||||
<a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
|
||||
<div class="van-badge__active"></div>
|
||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
<div v-if="info" class="van-badge__info">{{ info }}</div>
|
||||
{{ title }}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
@ -40,12 +36,8 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.$emit('click', e, {
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
info: this.info
|
||||
});
|
||||
onClick() {
|
||||
this.$emit('click', this.$parent.badges.indexOf(this));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
|
||||
<div
|
||||
class="van-cell__title"
|
||||
v-if="this.$slots.title || title"
|
||||
v-if="$slots.title || title"
|
||||
>
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
|
||||
@ -14,10 +14,10 @@
|
||||
</div>
|
||||
<div
|
||||
class="van-cell__value"
|
||||
v-if="value || this.$slots.default"
|
||||
v-if="value || $slots.default"
|
||||
:class="{
|
||||
'van-cell__value--link': isLink,
|
||||
'van-cell__value--alone': !this.$slots.title && !title && !label
|
||||
'van-cell__value--alone': !$slots.title && !title && !label
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
|
||||
@ -47,10 +47,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
||||
import Cell from '../cell';
|
||||
import Icon from '../icon';
|
||||
|
||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
|
||||
|
||||
export default {
|
||||
name: 'van-field',
|
||||
|
||||
@ -63,15 +64,14 @@ export default {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validator(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
validator: value => VALID_TYPES.indexOf(value) > -1
|
||||
},
|
||||
placeholder: String,
|
||||
value: {},
|
||||
icon: String,
|
||||
label: String,
|
||||
disabled: Boolean,
|
||||
placeholder: String,
|
||||
error: Boolean,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
@ -82,7 +82,6 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: String,
|
||||
onIconClick: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="van-order-goods-empty">
|
||||
<img :src="icon" />
|
||||
<p>{{ message }}</p>
|
||||
<van-button @click="onClickButton">{{ buttonText }}</van-button>
|
||||
<van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,12 +20,6 @@ export default {
|
||||
icon: String,
|
||||
message: String,
|
||||
buttonText: String
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickButton() {
|
||||
history.back();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
:icon="emptyIcon"
|
||||
:message="emptyMessage"
|
||||
:button-text="emptyButtonText"
|
||||
@clickEmptyButton="$emit('clickEmptyButton')"
|
||||
/>
|
||||
<div class="van-order-goods-list">
|
||||
<van-order-goods-card
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="van-panel__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="van-panel__footer" v-if="this.$slots.footer">
|
||||
<div class="van-panel__footer" v-if="$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<span class="van-tag" :class="[type ? `van-tag--${type}`: '', { 'is-plain': plain, 'is-mark': mark }]">
|
||||
<span :class="['van-tag', { [`van-tag--${type}`]: type, 'is-plain': plain, 'is-mark': mark }]">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const ALLOW_TYPE = ['danger', 'success', 'primary'];
|
||||
const ALLOW_TYPE = ['danger', 'success', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-tag',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => ~ALLOW_TYPE.indexOf(val)
|
||||
},
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: 'van-tag',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: val => ~ALLOW_TYPE.indexOf(val)
|
||||
},
|
||||
mark: Boolean,
|
||||
plain: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -32,9 +32,7 @@
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
@mixin border-retina (top, right, left);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -37,6 +37,10 @@
|
||||
|
||||
&__title {
|
||||
display: table-cell;
|
||||
|
||||
.van-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
|
||||
@ -10,9 +10,8 @@
|
||||
}
|
||||
|
||||
.van-loading {
|
||||
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
|
||||
&--circle {
|
||||
width: 16px;
|
||||
@ -26,11 +25,10 @@
|
||||
}
|
||||
|
||||
&__spinner {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
animation: van-loading 0.8s linear;
|
||||
animation-iteration-count: infinite;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
animation: van-loading 0.8s linear infinite;
|
||||
|
||||
&--circle {
|
||||
border-radius: 100%;
|
||||
|
||||
@ -35,7 +35,7 @@ function getWebpackConfig(testFileName) {
|
||||
stats: 'errors-only',
|
||||
resolve: {
|
||||
modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
|
||||
extensions: ['.js', '.json', '.vue'],
|
||||
extensions: ['.js', '.json', '.vue', '.css'],
|
||||
alias: {
|
||||
src: path.resolve(process.cwd(), 'src'),
|
||||
packages: path.resolve(process.cwd(), 'packages'),
|
||||
|
||||
@ -76,6 +76,9 @@ describe('OrderGoods', () => {
|
||||
}
|
||||
});
|
||||
|
||||
const submitSpyFunc = sinon.spy();
|
||||
wrapper.vm.$on('clickEmptyButton', submitSpyFunc);
|
||||
|
||||
wrapper.find('.van-button')[0].trigger('click');
|
||||
|
||||
DOMChecker(wrapper, {
|
||||
@ -87,6 +90,8 @@ describe('OrderGoods', () => {
|
||||
'.van-order-goods-empty img': 'http://b.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png'
|
||||
}
|
||||
});
|
||||
|
||||
expect(submitSpyFunc.calledOnce).to.be.true;
|
||||
});
|
||||
|
||||
it('empty list config', () => {
|
||||
@ -110,7 +115,7 @@ describe('OrderGoods', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('edit message', () => {
|
||||
it('edit message', (done) => {
|
||||
wrapper = mount(OrderGoods, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
@ -120,16 +125,14 @@ describe('OrderGoods', () => {
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.value = val;
|
||||
wrapper.vm.message = val;
|
||||
expect(wrapper.vm.message).to.equal('测试留言');
|
||||
done();
|
||||
});
|
||||
|
||||
const textarea = wrapper.find('textarea')[0];
|
||||
textarea.value = '测试留言';
|
||||
textarea.element.value = '测试留言';
|
||||
textarea.trigger('input');
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
expect(wrapper.value).to.equal('测试留言');
|
||||
});
|
||||
});
|
||||
|
||||
it('message not editable', () => {
|
||||
@ -159,16 +162,10 @@ describe('OrderGoods', () => {
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', val => {
|
||||
wrapper.value = val;
|
||||
});
|
||||
|
||||
wrapper.vm.$nextTick(() => {
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-order-goods-message p': '无'
|
||||
}
|
||||
});
|
||||
DOMChecker(wrapper, {
|
||||
text: {
|
||||
'.van-order-goods-message p': ''
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -262,7 +259,7 @@ describe('OrderGoods', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('item with message', () => {
|
||||
it('item with message', (done) => {
|
||||
wrapper = mount(OrderGoods, {
|
||||
attachToDocument: true,
|
||||
propsData: {
|
||||
@ -293,6 +290,7 @@ describe('OrderGoods', () => {
|
||||
}
|
||||
}
|
||||
});
|
||||
done();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -1823,9 +1823,9 @@ css-color-names@0.0.4:
|
||||
version "0.0.4"
|
||||
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
|
||||
|
||||
css-loader@^0.28.5:
|
||||
version "0.28.5"
|
||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.5.tgz#dd02bb91b94545710212ef7f6aaa66663113d754"
|
||||
css-loader@^0.28.7:
|
||||
version "0.28.7"
|
||||
resolved "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
|
||||
dependencies:
|
||||
babel-code-frame "^6.11.0"
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
@ -4255,9 +4255,9 @@ karma-phantomjs-launcher@^1.0.4:
|
||||
lodash "^4.0.1"
|
||||
phantomjs-prebuilt "^2.1.7"
|
||||
|
||||
karma-sinon-chai@^1.2.4:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.3.1.tgz#4633419494d9e2d848787dd76053031859f5b7f5"
|
||||
karma-sinon-chai@^1.3.2:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.npmjs.org/karma-sinon-chai/-/karma-sinon-chai-1.3.2.tgz#ea4d97b16433e64813aaddddded7f7bb4338215e"
|
||||
dependencies:
|
||||
lolex "^1.6.0"
|
||||
|
||||
@ -4283,9 +4283,9 @@ karma-webpack@^2.0.4:
|
||||
source-map "^0.1.41"
|
||||
webpack-dev-middleware "^1.0.11"
|
||||
|
||||
karma@^1.7.0:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269"
|
||||
karma@^1.7.1:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae"
|
||||
dependencies:
|
||||
bluebird "^3.3.0"
|
||||
body-parser "^1.16.1"
|
||||
@ -7618,9 +7618,9 @@ vue-html-loader@^1.2.4:
|
||||
loader-utils "^1.0.2"
|
||||
object-assign "^4.1.0"
|
||||
|
||||
vue-lazyload@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.6.tgz#7d5494fc35c35fc84dcc271165b827e309b4e793"
|
||||
vue-lazyload@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.1.2.tgz#86e0de01edd70596abc22d1017eea2f2b28e5efd"
|
||||
|
||||
vue-loader@^13.0.4:
|
||||
version "13.0.4"
|
||||
@ -7970,9 +7970,9 @@ yeast@0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
|
||||
|
||||
zan-doc@^0.2.9:
|
||||
version "0.2.9"
|
||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.9.tgz#9d8787f2a6502686f3c44dc4ced9d8ca0fbe3d4e"
|
||||
zan-doc@^0.2.10:
|
||||
version "0.2.10"
|
||||
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.10.tgz#eb08f72100a873dd8ae0b2eb7f7454d3ff256322"
|
||||
dependencies:
|
||||
cheerio "0.22.0"
|
||||
decamelize "^1.2.0"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user