blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #101 from chenjiahan/dev

Browse Source 
Doc: update Step/Loading/Tag/Badge documents
This commit is contained in:
neverland 2017-08-31 19:38:20 +08:00 committed by GitHub
commit c594091955
34 changed files with 459 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/examples-docs/badge.md
View File

@ -1,11 +1,18 @@
<style> <style>
.demo-badge { .demo-badge {
.badge-group-wrapper { .van-badge-group {
padding: 30px 20px; width: auto;
margin: 0 15px;
padding: 20px 0;
background-color: #fff; background-color: #fff;
&::after {
display: none;
}
} }
.van-badge-group { .van-badge {
width: 85px;
margin: 0 auto; margin: 0 auto;
} }
} }
@ -15,12 +22,12 @@
export default { export default {
data() { data() {
return { return {
activeKey: '2' activeKey: 0
}; };
}, },
methods: { methods: {
onItemClick(e, data) { onClick(key) {
this.activeKey = data.mark; this.activeKey = key;
} }
} }
}; };
@ -39,48 +46,44 @@ Vue.component(Badge.name, Badge);
#### 基础用法 #### 基础用法
默认情况下激活第一个`badge`。 通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="badge-group-wrapper"> <van-badge-group :active-key="activeKey">
<van-badge-group> <van-badge title="热销榜" @click="onClick"></van-badge>
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge> <van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge> <van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
<van-badge title="火炽寿司" @click="onItemClick"></van-badge> <van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
</van-badge-group> </van-badge-group>
</div> ```
``` 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` | - |
### Badge API
### z-badge API | 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | badge的文案标题 | `string` | `''` | `required` | | title | 内容 | `String` | `''` | - |
| info | 当前badge的提示消息 | `string` | `''` | | | info | 提示消息 | `String` | `''` | - |
| url | 跳转链接 | `string` | 链接直接跳转或者hash | | | url | 跳转链接 | `String` | - | - |

10
docs/examples-docs/button.md
View File

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

32
docs/examples-docs/card.md
View File

@ -1,3 +1,13 @@
<script>
export default {
data() {
return {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
}
}
}
</script>
## Card 图文组件 ## Card 图文组件
### 使用指南 ### 使用指南
@ -11,15 +21,9 @@ Vue.component(Card.name, Card);
#### 基础用法 #### 基础用法
当没有底部按钮时，右侧内容会居中显示。
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-card <van-card title="商品名称" desc="商品描述" :thumb="imageURL" />
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
desc="描述"
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</van-card>
``` ```
::: :::
@ -29,10 +33,9 @@ Vue.component(Card.name, Card);
:::demo 高级用法 :::demo 高级用法
```html ```html
<van-card <van-card :thumb="imageURL">
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
<div class="van-card__row" slot="title"> <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> <span class="van-card__price">¥ 2.00</span>
</div> </div>
<div class="van-card__row" slot="desc"> <div class="van-card__row" slot="desc">
@ -50,11 +53,10 @@ Vue.component(Card.name, Card);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | `string` | | | | thumb | 左侧图片 | `String` | - | - |
| title | 标题 | `string` | | | | title | 标题 | `String` | - | - |
| desc | 描述 | `string` | | | | desc | 描述 | `String` | - | - |
| centered | 内容是否垂直居中 | `string` | `false` | | | centered | 内容是否垂直居中 | `String` | `false` | - |
### Slot ### Slot

25
docs/examples-docs/cell-swipe.md
View File

@ -1,6 +1,6 @@
<style> <style>
.swipe-delete-btn { .van-cell-swipe__left,
background-color: #FF4444; .van-cell-swipe__right {
color: #FFFFFF; color: #FFFFFF;
font-size: 16px; font-size: 16px;
width: 65px; width: 65px;
@ -9,15 +9,11 @@
text-align: center; text-align: center;
line-height: 44px; line-height: 44px;
} }
.swipe-check-btn { .van-cell-swipe__left {
background-color: #FF4444;
}
.van-cell-swipe__right {
background-color: #84c483; background-color: #84c483;
color: #FFFFFF;
font-size: 16px;
width: 65px;
height: 44px;
display: inline-block;
text-align: center;
line-height: 44px;
} }
</style> </style>
## CellSwipe 滑动单元格 ## CellSwipe 滑动单元格
@ -36,22 +32,21 @@ Vue.component(CellSwipe.name, CellSwipe);
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-cell-swipe :right-width="65" :left-width="65"> <van-cell-swipe :right-width="65" :left-width="65">
<span slot="left">选择</span>
<van-cell-group> <van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell> <van-cell title="单元格1" value="单元格1内容"></van-cell>
</van-cell-group> </van-cell-group>
<span slot="right" class="swipe-delete-btn">删除</span> <span slot="right">删除</span>
<span slot="left" class="swipe-check-btn">选择</span>
</van-cell-swipe> </van-cell-swipe>
``` ```
::: :::
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| left-width | 左侧滑动按钮宽度 | `number` | 0 | | | left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
| right-width | 右侧滑动按钮宽度 | `number` | 0 | | | right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
### Slot ### Slot

82
docs/examples-docs/cell.md
View File

@ -8,6 +8,21 @@ export default {
}; };
</script> </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 单元格 ## Cell 单元格
### 使用指南 ### 使用指南
@ -22,86 +37,66 @@ Vue.component(CellGroup.name, CellGroup);
#### 基础用法 #### 基础用法
你可以将`van-cell-group`组件看成一个容器即可。 将`van-cell-group`组件看成一个容器即可
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="单元格1" value="单元格1内容"></van-cell> <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> </van-cell-group>
``` ```
::: :::
#### 只设置value #### 只设置value
只设置`value`时会向左对齐
只设置`value`时会向左对齐。
:::demo 只设置value :::demo 只设置value
```html ```html
<van-cell-group> <van-cell-group>
<van-cell value="单元格1内容"></van-cell> <van-cell value="单元格内容"></van-cell>
<van-cell value="单元格2内容"></van-cell>
</van-cell-group> </van-cell-group>
``` ```
::: :::
#### 标题带描述信息 #### 展示图标
通过`icon`属性在标题左侧展示图标
传入`label`属性，属性值为描述信息的值。 :::demo 展示图标
:::demo 标题带描述信息
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="单元格1" label="描述信息" value="查看专栏" is-link url="javascript:void(0)" @click="handleClick"></van-cell> <van-cell title="单元格" icon="location"></van-cell>
<van-cell title="单元格2" label="描述信息" value="查看专栏" is-link></van-cell>
</van-cell-group> </van-cell-group>
``` ```
::: :::
#### 带图标 #### 展示箭头
传入`isLink`属性则会在右侧显示箭头
传入`icon`属性。 :::demo 展示箭头
:::demo 带图标
```html ```html
<van-cell-group> <van-cell-group>
<van-cell title="起码运动馆" icon="home"></van-cell> <van-cell title="单元格1" is-link></van-cell>
<van-cell title="线下门店" icon="location"></van-cell> <van-cell title="单元格2" is-link value="内容"></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-group> </van-cell-group>
``` ```
::: :::
#### 高级用法 #### 高级用法
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`、`icon`、`title`和`right-icon`的`slot`。
:::demo 高级用法 :::demo 高级用法
```html ```html
<van-cell-group> <van-cell-group>
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link> <van-cell value="进入店铺" icon="home" is-link>
<template slot="title"> <template slot="title">
<span class="van-cell-text">起码运动馆</span> <span class="van-cell-text">起码运动馆</span>
<van-tag type="danger">官方</van-tag> <van-tag type="danger">官方</van-tag>
</template> </template>
</van-cell> </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="其他"> <van-cell title="其他">
<template slot="right-icon"> <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> </template>
</van-cell> </van-cell>
</van-cell-group> </van-cell-group>
@ -112,12 +107,13 @@ Vue.component(CellGroup.name, CellGroup);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| icon | 左侧图标 | `string` | | | | icon | 左侧图标 | `String` | - | - |
| title | 左侧标题 | `string` | | | | title | 左侧标题 | `String` | - | - |
| value | 右侧内容 | `string` | | | | value | 右侧内容 | `String` | - | - |
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | | | label | 标题下方的描述信息 | `String` | - | - |
| url | 跳转链接 | `string` | | | | url | 跳转链接 | `String` | - | - |
| label | 描述信息，显示在标题下方 | `string` | | | | isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
| required | 是否显示表单必填符号 | `Boolean` | `false` | - |
### Slot ### Slot

181
docs/examples-docs/icon.md
View File

@ -8,13 +8,14 @@
.van-col { .van-col {
text-align: center; text-align: center;
height: 120px; height: 100px;
float: none; float: none;
display: inline-block; display: inline-block;
color: rgba(69, 90, 100, .8);
} }
.van-icon { .van-icon {
font-size: 45px; font-size: 32px;
margin: 15px 0; margin: 15px 0;
display: block; display: block;
} }
@ -29,15 +30,99 @@
import Vue from 'vue'; import Vue from 'vue';
import { Icon } from 'packages'; 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-inner', Icon);
Vue.component('van-icon', { Vue.component('van-icon', {
props: ['name'], props: ['name'],
render(h) { render(h) {
return <van-col span="8"> return (
<van-icon-inner name={this.name}></van-icon-inner> <div>
<span>{this.name}</span> {icons.map(icon => (
<van-col span="8">
<van-icon-inner name={icon}></van-icon-inner>
<span>{icon}</span>
</van-col> </van-col>
))}
</div>
)
} }
}); });
@ -57,7 +142,7 @@ Vue.component(Icon.name, Icon);
#### 基础用法 #### 基础用法
设置`name`属性为对应的图标名称即可： 设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
:::demo 基础用法 :::demo 基础用法
```html ```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 ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| name | icon名称 | `string` | `''` | | | name | icon名称 | `String` | `''` | - |

16
docs/examples-docs/image-preview.md
View File

@ -11,7 +11,7 @@ import { ImagePreview } from 'packages/index';
export default { export default {
methods: { methods: {
handleImagePreview() { showImagePreview() {
ImagePreview([ ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png', 'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
@ -38,22 +38,20 @@ import { ImagePreview } from 'vant';
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-button @click="handleImagePreview">预览图片</van-button> <van-button @click="showImagePreview">预览图片</van-button>
```
<script>
import { ImagePreview } from 'packages/index';
```javascript
export default { export default {
methods: { methods: {
handleImagePreview() { showImagePreview() {
ImagePreview([ ImagePreview([
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg', 'https://img.yzcdn.cn/1.jpg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg' 'https://img.yzcdn.cn/2.jpg'
]); ]);
} }
} }
}; };
</script>
``` ```
::: :::

10
docs/examples-docs/layout.md
View File

@ -79,12 +79,12 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
#### Row #### Row
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | | | gutter | 列元素之间的间距（单位为px） | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | | | prefix | className 前缀 | `String` | `van` | - |
#### Column #### Column
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| span | 列元素宽度 | `String | Number` | - | | | span | 列元素宽度 | `String | Number` | - | - |
| offset | 列元素偏移距离 | `String | Number` | - | | | offset | 列元素偏移距离 | `String | Number` | - | - |
| prefix | className 前缀 | `String` | `van` | | | prefix | className 前缀 | `String` | `van` | - |

59
docs/examples-docs/loading.md
View File

@ -1,19 +1,8 @@
<style> <style>
.demo-loading { .demo-loading {
.van-loading { .van-loading {
margin: 0 auto; display: inline-block;
} margin: 10px 0 10px 20px;
.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;
} }
} }
</style> </style>
@ -29,39 +18,21 @@ Vue.component(Loading.name, Loading);
### 代码演示 ### 代码演示
#### 渐变深色spinner
:::demo 渐变深色spinner
```html
<van-loading class="some-customized-class"></van-loading>
```
:::
#### 渐变浅色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 #### 单色 spinner
:::demo 单色 spinner :::demo 单色 spinner
```html ```html
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading> <van-loading type="circle" color="white"></van-loading>
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading> <van-loading type="circle" color="black"></van-loading>
```
:::
#### 渐变色 spinner
:::demo 渐变色 spinner
```html
<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` | | color | 颜色 | `string` | `black` | `black` `white` |
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` | | type | 类型 | `string` | `gradient-circle` | `gradient-circle` `circle` |

6
docs/examples-docs/notice-bar.md
View File

@ -58,9 +58,9 @@ Vue.component(NoticeBar.name, NoticeBar);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| mode | 通告栏模式 | String | `''` | `closeable` `link` | | mode | 通告栏模式 | String | `''` | `closeable` `link` |
| delay | 动画延迟时间，单位秒 | Number | `1` | | | delay | 动画延迟时间，单位秒 | Number | `1` | - |
| scrollable | 是否滚动 | Boolean | `true` | | | speed | 滚动速率，单位px | Number | `40` | - |
| speed | 滚动速率，单位px | Number | `40` | | | scrollable | 是否滚动 | Boolean | `true` | - |
### Event ### Event

6
docs/examples-docs/order-goods.md
View File

@ -221,6 +221,12 @@ export default {
| is_period_buy | 是否为周期购 | `Boolean` | | is_period_buy | 是否为周期购 | `Boolean` |
| show_delivery_time | 是否显示发货时间 | `Boolean` | | show_delivery_time | 是否显示发货时间 | `Boolean` |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|

56
docs/examples-docs/panel.md
View File

@ -1,19 +1,6 @@
<style> <style>
.demo-panel { .demo-panel {
.van-panel-sum { .van-panel__footer {
background: #fff;
text-align: right;
font-size: 14px;
color: #333;
line-height: 30px;
padding-right: 15px;
span {
color: red;
}
}
.van-panel-buttons {
text-align: right; text-align: right;
.van-button { .van-button {
@ -21,7 +8,7 @@
} }
} }
.panel-content { .van-panel__content {
padding: 20px; padding: 20px;
} }
} }
@ -39,47 +26,24 @@ Vue.component(Panel.name, Panel);
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
面板只是一个容器，里面可以放入自定义的内容
面板只是一个容器，里面可以放入自定义的内容。
:::demo 基础用法 :::demo 基础用法
```html ```html
<van-panel title="标题" desc="标题描述" status="状态"> <van-panel title="标题" desc="标题描述" status="状态">
<div class="panel-content"> <div>Panel内容</div>
panel内容
</div>
</van-panel> </van-panel>
``` ```
::: :::
#### 高级用法 #### 高级用法
使用`slot`自定义内容
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
:::demo 高级用法 :::demo 高级用法
```html ```html
<van-panel title="标题" desc="标题描述" status="状态"> <van-panel title="标题" desc="标题描述" status="状态">
<van-card <div>Panel内容</div>
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" <div slot="footer">
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">
<van-button size="small">按钮一</van-button> <van-button size="small">按钮一</van-button>
<van-button size="small" type="danger">按钮二</van-button> <van-button size="small" type="danger">按钮二</van-button>
</div> </div>
@ -91,9 +55,9 @@ Vue.component(Panel.name, Panel);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `string` | | | | title | 标题 | `String` | - | - |
| desc | 描述 | `string` | | | | desc | 描述 | `String` | - | - |
| status | 状态 | `string` | | | | status | 状态 | `String` | - | - |
### Slot ### Slot

12
docs/examples-docs/popup.md
View File

@ -163,9 +163,9 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` | | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` | | overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` | | lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` | | position | 弹出菜单位置 | `String` | - | `top`, `bottom`, `right`, `left` |
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` | | closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `Boolean` | `true` | - |
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | | | transition | 弹出菜单的`transition` | `String` | `popup-slide` | |

67
docs/examples-docs/steps.md
View File

@ -1,12 +1,17 @@
<style> <style>
.demo-steps { .demo-steps {
.steps-success { .steps-success,
.van-icon-location {
color: #06bf04; color: #06bf04;
} }
.van-button { .van-button {
margin: 15px 0 0 15px; margin: 15px 0 0 15px;
} }
.van-steps__message + p {
margin-bottom: 10px;
}
} }
</style> </style>
@ -20,7 +25,7 @@ export default {
methods: { methods: {
nextStep() { nextStep() {
if (++this.active > 3) this.active = 0; this.active = ++this.active % 4;
} }
} }
} }
@ -42,7 +47,7 @@ Vue.component(Steps.name, Steps);
:::demo 基础用法 :::demo 基础用法
```html ```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> <van-step>商家接单</van-step>
<van-step>买家提货</van-step> <van-step>买家提货</van-step>
@ -61,7 +66,7 @@ export default {
methods: { methods: {
nextStep() { 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 ```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> <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 ```html
<van-steps direction="vertical" :active="0" active-color="#f60"> <van-steps direction="vertical" :active="0" active-color="#f60">
<van-step> <van-step>
<h3>【城市】最新的物流状态之类的表述哈哈哈哈</h3> <h3>【城市】物流状态1</h3>
<p>2016-07-12 12:12:12</p> <p>2016-07-12 12:40</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999</h3> <h3>【城市】物流状态2</h3>
<p>2016-07-12 12:12:12</p> <p>2016-07-11 10:00</p>
</van-step> </van-step>
<van-step> <van-step>
<h3>未发货</h3> <h3>快件已发货</h3>
<p>2016-07-12 12:12:12</p> <p>2016-07-10 09:30</p>
</van-step> </van-step>
</van-steps> </van-steps>
``` ```
::: :::
### 高级用法 ### 高级用法
使用`slot`增加自定义内容
可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
:::demo 高级用法 :::demo 高级用法
```html ```html
<van-steps :active="active" title="等待商家发货"> <van-steps :active="active" title="等待商家发货">
<van-icon slot="icon" name="like"></van-icon> <van-icon slot="icon" name="location"></van-icon>
<p slot="message-extra">流程</p> <p slot="message-extra">物流进度</p>
<van-step>买家下单</van-step> <van-step>买家下单</van-step>
<van-step>商家接单</van-step> <van-step>商家接单</van-step>
<van-step>买家提货</van-step> <van-step>买家提货</van-step>
@ -128,13 +138,13 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active | 当前激活的步骤，从0开始 | `number` | | | | active | 当前步骤，起始值为0 | `Number` | | |
| icon | 当前步骤的icon | `string` | | | | icon | 当前步骤的icon | `String` | | |
| iconClass | 当前步骤栏为icon添加的类 | `string` | | | | iconClass | 当前步骤栏为icon添加的类 | `String` | | |
| title | 当前步骤从标题 | `string` | | | | title | 当前步骤从标题 | `String` | | |
| description | 当前步骤描述 | `string` | | | | description | 当前步骤描述 | `String` | | |
| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` | | direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | | | activeColor | active状态颜色 | `String` | `#06bf04` | |
### Steps Slot ### Steps Slot
@ -142,4 +152,3 @@ export default {
|-----------|-----------| |-----------|-----------|
| icon | 自定义icon区域 | | icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 | | message-extra | 状态栏添加额外的元素 |

73
docs/examples-docs/tag.md
View File

@ -1,10 +1,14 @@
<style> <style>
.tags-container { .demo-tag {
padding: 5px 15px;
.van-tag + .van-tag { .van-tag + .van-tag {
margin-left: 10px; margin-left: 10px;
} }
.van-tag {
&:first-of-type {
margin-left: 15px;
}
}
} }
</style> </style>
@ -20,44 +24,37 @@ Vue.component(Tag.name, Tag);
### 代码演示 ### 代码演示
#### 基础用法 #### 基础用法
通过 type 属性控制 Tag 颜色，默认为灰色
`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="tags-container"> <van-tag>标签</van-tag>
<van-tag>返现</van-tag> <van-tag type="danger">标签</van-tag>
</div> <van-tag type="success">标签</van-tag>
<div class="tags-container"> <van-tag type="primary">标签</van-tag>
<van-tag type="danger">返现</van-tag>
<van-tag type="success">四字标签</van-tag>
<van-tag type="primary">一</van-tag>
</div>
``` ```
::: :::
#### 高级用法 #### 空心样式
设置`plain`属性设置为空心样式
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。 :::demo 空心样式
:::demo 高级用法
```html ```html
<div class="tags-container"> <van-tag plain>标签</van-tag>
<van-tag>返现</van-tag> <van-tag plain type="danger">标签</van-tag>
<van-tag plain>返现</van-tag> <van-tag plain type="primary">标签</van-tag>
</div> <van-tag plain type="success">标签</van-tag>
<div class="tags-container"> ```
<van-tag type="danger">返现</van-tag> :::
<van-tag plain type="danger">返现</van-tag>
</div> #### 标记样式
<div class="tags-container"> 通过`mark`设置为标记样式
<van-tag type="primary">返现</van-tag>
<van-tag plain type="primary">返现</van-tag> :::demo 标记样式
</div> ```html
<div class="tags-container"> <van-tag mark>标签</van-tag>
<van-tag type="success">返现</van-tag> <van-tag mark type="danger">标签</van-tag>
<van-tag plain type="success">返现</van-tag> <van-tag mark type="primary">标签</van-tag>
</div> <van-tag mark type="success">标签</van-tag>
``` ```
::: :::
@ -65,12 +62,12 @@ Vue.component(Tag.name, Tag);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| plain | 是否是空心tag | `boolean` | `false` | | | type | 类型 | `String` | `''`| `primary` `success` `danger` |
| mark | 是否是标记 | `boolean` | `false` | | | plain | 是否为空心样式 | `Boolean` | `false` | |
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` | | mark | 是否为标记样式 | `Boolean` | `false` | |
### Slot ### Slot
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义tag显示内容 | | - | 自定义 Tag 显示内容 |

10
docs/src/ExamplesApp.vue
View File

@ -54,11 +54,6 @@ export default {
</script> </script>
<style> <style>
a {
color: #4078c0;
text-decoration: none;
}
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@ -70,9 +65,12 @@ export default {
.examples-container { .examples-container {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background: #f8f8f8;
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
width: 0;
}
} }
.footer { .footer {

2
docs/src/components/demo-block.vue
View File

@ -6,6 +6,8 @@
<script> <script>
export default { export default {
name: 'demo-block',
computed: { computed: {
component() { component() {
return this.$route.path.split('/').pop(); return this.$route.path.split('/').pop();

2
docs/src/components/demo-list.vue
View File

@ -13,7 +13,7 @@
</template> </template>
<script> <script>
import docConfig from '../doc.config.js'; import docConfig from '../doc.config';
import MobileNav from './mobile-nav'; import MobileNav from './mobile-nav';
export default { export default {

7
docs/src/examples.js
View File

@ -2,13 +2,12 @@ import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import App from './ExamplesApp'; import App from './ExamplesApp';
import routes from './router.config'; import routes from './router.config';
import Vant, { Lazyload } from 'packages/index'; import Vant, { Lazyload } from 'packages';
import ZanDoc from 'zan-doc'; import ZanDoc from 'zan-doc';
import DemoList from './components/demo-list';
import 'packages/vant-css/src/index.css'; import 'packages/vant-css/src/index.css';
import 'zan-doc/src/helper/touch-simulator'; import 'zan-doc/src/helper/touch-simulator';
import DemoList from './components/demo-list.vue';
Vue.use(Vant); Vue.use(Vant);
Vue.use(ZanDoc); Vue.use(ZanDoc);
Vue.use(Lazyload, { Vue.use(Lazyload, {
@ -31,7 +30,7 @@ router.beforeEach((to, from, next) => {
if (container) { if (container) {
document.querySelector('.examples-container').scrollTop = 0; document.querySelector('.examples-container').scrollTop = 0;
} }
next() next();
}); });
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line

5
docs/src/index.js
View File

@ -4,7 +4,6 @@ import App from './ExamplesDocsApp';
import routes from './router.config'; import routes from './router.config';
import ZanDoc from 'zan-doc'; import ZanDoc from 'zan-doc';
import DemoBlock from './components/demo-block'; import DemoBlock from './components/demo-block';
import 'packages/vant-css/src/reset.css';
const isMobile = (function() { const isMobile = (function() {
var platform = navigator.userAgent.toLowerCase(); var platform = navigator.userAgent.toLowerCase();
@ -14,7 +13,7 @@ const isMobile = (function() {
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(ZanDoc); Vue.use(ZanDoc);
Vue.component('demo-block', DemoBlock); Vue.component(DemoBlock.name, DemoBlock);
const routesConfig = routes(); const routesConfig = routes();
routesConfig.push({ routesConfig.push({
@ -41,7 +40,7 @@ router.afterEach(() => {
if (!isMobile) { if (!isMobile) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
}) });
new Vue({ // eslint-disable-line new Vue({ // eslint-disable-line
render: h => h(App), render: h => h(App),

10
package.json
View File

@ -42,7 +42,7 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"babel-runtime": "6.x", "babel-runtime": "6.x",
"vue-lazyload": "^1.0.6" "vue-lazyload": "^1.1.2"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "2.4.2" "vue": "2.4.2"
@ -65,7 +65,7 @@
"cheerio": "^0.22.0", "cheerio": "^0.22.0",
"codecov": "^2.2.0", "codecov": "^2.2.0",
"cross-env": "^5.0.5", "cross-env": "^5.0.5",
"css-loader": "^0.28.5", "css-loader": "^0.28.7",
"eslint-plugin-vue": "^2.1.0", "eslint-plugin-vue": "^2.1.0",
"extract-text-webpack-plugin": "2.0.0", "extract-text-webpack-plugin": "2.0.0",
"felint": "^0.5.0-alpha.3", "felint": "^0.5.0-alpha.3",
@ -81,12 +81,12 @@
"html-webpack-plugin": "^2.29.0", "html-webpack-plugin": "^2.29.0",
"isparta-loader": "^2.0.0", "isparta-loader": "^2.0.0",
"json-templater": "^1.0.4", "json-templater": "^1.0.4",
"karma": "^1.7.0", "karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0", "karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1", "karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4", "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-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "^0.0.31", "karma-spec-reporter": "^0.0.31",
"karma-webpack": "^2.0.4", "karma-webpack": "^2.0.4",
@ -117,6 +117,6 @@
"webpack": "^3.5.5", "webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1", "webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0", "webpack-merge": "^4.1.0",
"zan-doc": "^0.2.9" "zan-doc": "^0.2.10"
} }
} }

14
packages/badge/index.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<a <a :class="['van-badge', { 'van-badge--select': isSelect }]" :href="url" @click="onClick">
class="van-badge"
:class="{ 'van-badge--select': isSelect }"
:href="url"
@click="handleClick">
<div class="van-badge__active"></div> <div class="van-badge__active"></div>
<div v-if="info" class="van-badge__info">{{ info }}</div> <div v-if="info" class="van-badge__info">{{ info }}</div>
{{ title }} {{ title }}
@ -40,12 +36,8 @@ export default {
}, },
methods: { methods: {
handleClick(e) { onClick() {
this.$emit('click', e, { this.$emit('click', this.$parent.badges.indexOf(this));
title: this.title,
url: this.url,
info: this.info
});
} }
} }
}; };

6
packages/cell/index.vue
View File

@ -2,7 +2,7 @@
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')"> <a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
<div <div
class="van-cell__title" class="van-cell__title"
v-if="this.$slots.title || title" v-if="$slots.title || title"
> >
<slot name="icon"> <slot name="icon">
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i> <i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
@ -14,10 +14,10 @@
</div> </div>
<div <div
class="van-cell__value" class="van-cell__value"
v-if="value || this.$slots.default" v-if="value || $slots.default"
:class="{ :class="{
'van-cell__value--link': isLink, 'van-cell__value--link': isLink,
'van-cell__value--alone': !this.$slots.title && !title && !label 'van-cell__value--alone': !$slots.title && !title && !label
}" }"
> >
<slot> <slot>

13
packages/field/index.vue
View File

@ -47,10 +47,11 @@
</template> </template>
<script> <script>
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
import Cell from '../cell'; import Cell from '../cell';
import Icon from '../icon'; import Icon from '../icon';
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'time', 'datetime', 'password', 'textarea'];
export default { export default {
name: 'van-field', name: 'van-field',
@ -63,15 +64,14 @@ export default {
type: { type: {
type: String, type: String,
default: 'text', default: 'text',
validator(value) { validator: value => VALID_TYPES.indexOf(value) > -1
return VALID_TYPES.indexOf(value) > -1;
}
}, },
placeholder: String,
value: {}, value: {},
icon: String,
label: String, label: String,
disabled: Boolean, placeholder: String,
error: Boolean, error: Boolean,
disabled: Boolean,
readonly: Boolean, readonly: Boolean,
required: Boolean, required: Boolean,
maxlength: [String, Number], maxlength: [String, Number],
@ -82,7 +82,6 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
icon: String,
onIconClick: { onIconClick: {
type: Function, type: Function,
default: () => {} default: () => {}

8
packages/order-goods/Empty.vue
View File

@ -2,7 +2,7 @@
<div class="van-order-goods-empty"> <div class="van-order-goods-empty">
<img :src="icon" /> <img :src="icon" />
<p>{{ message }}</p> <p>{{ message }}</p>
<van-button @click="onClickButton">{{ buttonText }}</van-button> <van-button @click="$emit('clickEmptyButton')">{{ buttonText }}</van-button>
</div> </div>
</template> </template>
@ -20,12 +20,6 @@ export default {
icon: String, icon: String,
message: String, message: String,
buttonText: String buttonText: String
},
methods: {
onClickButton() {
history.back();
}
} }
}; };
</script> </script>

1
packages/order-goods/index.vue
View File

@ -12,6 +12,7 @@
:icon="emptyIcon" :icon="emptyIcon"
:message="emptyMessage" :message="emptyMessage"
:button-text="emptyButtonText" :button-text="emptyButtonText"
@clickEmptyButton="$emit('clickEmptyButton')"
/> />
<div class="van-order-goods-list"> <div class="van-order-goods-list">
<van-order-goods-card <van-order-goods-card

2
packages/panel/index.vue
View File

@ -10,7 +10,7 @@
<div class="van-panel__content"> <div class="van-panel__content">
<slot></slot> <slot></slot>
</div> </div>
<div class="van-panel__footer" v-if="this.$slots.footer"> <div class="van-panel__footer" v-if="$slots.footer">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>

2
packages/tag/index.vue
View File

@ -1,5 +1,5 @@
<template> <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> <slot></slot>
</span> </span>
</template> </template>

4
packages/vant-css/src/badge.css
View File

@ -32,9 +32,7 @@
display: block; display: block;
} }
&::after { &::after {
@mixin border-retina (top); @mixin border-retina (top, right, left);
@mixin border-retina (right);
@mixin border-retina (left);
} }
} }

4
packages/vant-css/src/cell.css
View File

@ -37,6 +37,10 @@
&__title { &__title {
display: table-cell; display: table-cell;
.van-icon {
margin-right: 5px;
}
} }
&__label { &__label {

10
packages/vant-css/src/loading.css
View File

@ -10,9 +10,8 @@
} }
.van-loading { .van-loading {
line-height: 0;
font-size: 0; font-size: 0;
line-height: 0;
&--circle { &--circle {
width: 16px; width: 16px;
@ -26,11 +25,10 @@
} }
&__spinner { &__spinner {
display: inline-block;
height: 100%;
width: 100%; width: 100%;
animation: van-loading 0.8s linear; height: 100%;
animation-iteration-count: infinite; display: inline-block;
animation: van-loading 0.8s linear infinite;
&--circle { &--circle {
border-radius: 100%; border-radius: 100%;

2
test/unit/get-webpack-conf.js
View File

@ -35,7 +35,7 @@ function getWebpackConfig(testFileName) {
stats: 'errors-only', stats: 'errors-only',
resolve: { resolve: {
modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'], modules: [path.resolve(process.cwd(), 'node_modules'), 'node_modules'],
extensions: ['.js', '.json', '.vue'], extensions: ['.js', '.json', '.vue', '.css'],
alias: { alias: {
src: path.resolve(process.cwd(), 'src'), src: path.resolve(process.cwd(), 'src'),
packages: path.resolve(process.cwd(), 'packages'), packages: path.resolve(process.cwd(), 'packages'),

28
test/unit/specs/order-goods.spec.js
View File

@ -76,6 +76,9 @@ describe('OrderGoods', () => {
} }
}); });
const submitSpyFunc = sinon.spy();
wrapper.vm.$on('clickEmptyButton', submitSpyFunc);
wrapper.find('.van-button')[0].trigger('click'); wrapper.find('.van-button')[0].trigger('click');
DOMChecker(wrapper, { 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' '.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', () => { it('empty list config', () => {
@ -110,7 +115,7 @@ describe('OrderGoods', () => {
}); });
}); });
it('edit message', () => { it('edit message', (done) => {
wrapper = mount(OrderGoods, { wrapper = mount(OrderGoods, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
@ -120,16 +125,14 @@ describe('OrderGoods', () => {
}); });
wrapper.vm.$on('input', val => { 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]; const textarea = wrapper.find('textarea')[0];
textarea.value = '测试留言'; textarea.element.value = '测试留言';
textarea.trigger('input'); textarea.trigger('input');
wrapper.vm.$nextTick(() => {
expect(wrapper.value).to.equal('测试留言');
});
}); });
it('message not editable', () => { it('message not editable', () => {
@ -159,18 +162,12 @@ describe('OrderGoods', () => {
} }
}); });
wrapper.vm.$on('input', val => {
wrapper.value = val;
});
wrapper.vm.$nextTick(() => {
DOMChecker(wrapper, { DOMChecker(wrapper, {
text: { text: {
'.van-order-goods-message p': '无' '.van-order-goods-message p': ''
} }
}); });
}); });
});
it('points props', () => { it('points props', () => {
wrapper = mount(OrderGoods, { wrapper = mount(OrderGoods, {
@ -262,7 +259,7 @@ describe('OrderGoods', () => {
}); });
}); });
it('item with message', () => { it('item with message', (done) => {
wrapper = mount(OrderGoods, { wrapper = mount(OrderGoods, {
attachToDocument: true, attachToDocument: true,
propsData: { propsData: {
@ -293,6 +290,7 @@ describe('OrderGoods', () => {
} }
} }
}); });
done();
}, 300); }, 300);
}); });

30
yarn.lock
View File

@ -1823,9 +1823,9 @@ css-color-names@0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
css-loader@^0.28.5: css-loader@^0.28.7:
version "0.28.5" version "0.28.7"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.5.tgz#dd02bb91b94545710212ef7f6aaa66663113d754" resolved "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
dependencies: dependencies:
babel-code-frame "^6.11.0" babel-code-frame "^6.11.0"
css-selector-tokenizer "^0.7.0" css-selector-tokenizer "^0.7.0"
@ -4255,9 +4255,9 @@ karma-phantomjs-launcher@^1.0.4:
lodash "^4.0.1" lodash "^4.0.1"
phantomjs-prebuilt "^2.1.7" phantomjs-prebuilt "^2.1.7"
karma-sinon-chai@^1.2.4: karma-sinon-chai@^1.3.2:
version "1.3.1" version "1.3.2"
resolved "https://registry.yarnpkg.com/karma-sinon-chai/-/karma-sinon-chai-1.3.1.tgz#4633419494d9e2d848787dd76053031859f5b7f5" resolved "https://registry.npmjs.org/karma-sinon-chai/-/karma-sinon-chai-1.3.2.tgz#ea4d97b16433e64813aaddddded7f7bb4338215e"
dependencies: dependencies:
lolex "^1.6.0" lolex "^1.6.0"
@ -4283,9 +4283,9 @@ karma-webpack@^2.0.4:
source-map "^0.1.41" source-map "^0.1.41"
webpack-dev-middleware "^1.0.11" webpack-dev-middleware "^1.0.11"
karma@^1.7.0: karma@^1.7.1:
version "1.7.0" version "1.7.1"
resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269" resolved "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz#85cc08e9e0a22d7ce9cca37c4a1be824f6a2b1ae"
dependencies: dependencies:
bluebird "^3.3.0" bluebird "^3.3.0"
body-parser "^1.16.1" body-parser "^1.16.1"
@ -7618,9 +7618,9 @@ vue-html-loader@^1.2.4:
loader-utils "^1.0.2" loader-utils "^1.0.2"
object-assign "^4.1.0" object-assign "^4.1.0"
vue-lazyload@^1.0.6: vue-lazyload@^1.1.2:
version "1.0.6" version "1.1.2"
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.0.6.tgz#7d5494fc35c35fc84dcc271165b827e309b4e793" resolved "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.1.2.tgz#86e0de01edd70596abc22d1017eea2f2b28e5efd"
vue-loader@^13.0.4: vue-loader@^13.0.4:
version "13.0.4" version "13.0.4"
@ -7970,9 +7970,9 @@ yeast@0.1.2:
version "0.1.2" version "0.1.2"
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
zan-doc@^0.2.9: zan-doc@^0.2.10:
version "0.2.9" version "0.2.10"
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.9.tgz#9d8787f2a6502686f3c44dc4ced9d8ca0fbe3d4e" resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.10.tgz#eb08f72100a873dd8ae0b2eb7f7454d3ff256322"
dependencies: dependencies:
cheerio "0.22.0" cheerio "0.22.0"
decamelize "^1.2.0" decamelize "^1.2.0"