diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index b0f27058c..6da67fc0c 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -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` | - | - |
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 91761fff0..a5bfd47d2 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -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` | - |
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 993c39f6d..2c586a78a 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -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 |
diff --git a/docs/examples-docs/cell-swipe.md b/docs/examples-docs/cell-swipe.md
index 45225aabd..a16494da7 100644
--- a/docs/examples-docs/cell-swipe.md
+++ b/docs/examples-docs/cell-swipe.md
@@ -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
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index b2566b15a..bbad3c505 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -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
diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md
index a2278a668..a6c572e82 100644
--- a/docs/examples-docs/icon.md
+++ b/docs/examples-docs/icon.md
@@ -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` | `''` | - |
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index 1239abd78..0de221cb1 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -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>
```
:::
diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md
index 67d32b869..2fe09d2a9 100644
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
@@ -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` | - |
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index 098e7001d..8a9dcffc2 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -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` |
diff --git a/docs/examples-docs/notice-bar.md b/docs/examples-docs/notice-bar.md
index eaccdde97..7da1faa12 100644
--- a/docs/examples-docs/notice-bar.md
+++ b/docs/examples-docs/notice-bar.md
@@ -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
diff --git a/docs/examples-docs/order-goods.md b/docs/examples-docs/order-goods.md
index f88a36717..3c882555f 100644
--- a/docs/examples-docs/order-goods.md
+++ b/docs/examples-docs/order-goods.md
@@ -221,6 +221,12 @@ export default {
| is_period_buy | 是否为周期购 | `Boolean` |
| show_delivery_time | 是否显示发货时间 | `Boolean` |
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| clickEmptyButton | 点击商品为空时的按钮时触发 | - |
+
### Slot
| name | 描述 |
|-----------|-----------|
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index 899cb071e..ee7612ae6 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -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 |
diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md
index 892b9df15..88d857736 100644
--- a/docs/examples-docs/popup.md
+++ b/docs/examples-docs/popup.md
@@ -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` | |
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index d9d229b4b..d41d06a3d 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -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 | 状态栏添加额外的元素 |
-
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index 4d21b6ba6..63491187f 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -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 显示内容 |
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 78dd05c34..77859a6d4 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -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-fixed {
- position: absolute;
- bottom: 0;
- left: 0;
- }
+.footer {
+ margin-top: 30px;
+ width: 100%;
+ padding: 10px 0 20px;
+ background: #f8f8f8;
+
+ &.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>
diff --git a/docs/src/components/demo-block.vue b/docs/src/components/demo-block.vue
index 466594eaf..749bea221 100644
--- a/docs/src/components/demo-block.vue
+++ b/docs/src/components/demo-block.vue
@@ -6,6 +6,8 @@
<script>
export default {
+ name: 'demo-block',
+
computed: {
component() {
return this.$route.path.split('/').pop();
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index 87d9ecdd5..ae59d4043 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -13,7 +13,7 @@
</template>
<script>
-import docConfig from '../doc.config.js';
+import docConfig from '../doc.config';
import MobileNav from './mobile-nav';
export default {
diff --git a/docs/src/examples.js b/docs/src/examples.js
index d63c18c42..235d2fb2c 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -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
diff --git a/docs/src/index.js b/docs/src/index.js
index 3c36180f8..0b1484d7f 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -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),
diff --git a/package.json b/package.json
index 0d3d08093..a7ea9f6c7 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/packages/badge/index.vue b/packages/badge/index.vue
index 7808d6755..9ed36df14 100644
--- a/packages/badge/index.vue
+++ b/packages/badge/index.vue
@@ -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));
}
}
};
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index f356c8aa9..3bcf14a33 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -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>
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 67145aa67..c2f32d3e9 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -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: () => {}
diff --git a/packages/order-goods/Empty.vue b/packages/order-goods/Empty.vue
index 7e9779908..f997cfe1a 100644
--- a/packages/order-goods/Empty.vue
+++ b/packages/order-goods/Empty.vue
@@ -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>
diff --git a/packages/order-goods/index.vue b/packages/order-goods/index.vue
index 05dad6558..56f808ecb 100644
--- a/packages/order-goods/index.vue
+++ b/packages/order-goods/index.vue
@@ -12,6 +12,7 @@
:icon="emptyIcon"
:message="emptyMessage"
:button-text="emptyButtonText"
+ @clickEmptyButton="$emit('clickEmptyButton')"
/>
<div class="van-order-goods-list">
<van-order-goods-card
diff --git a/packages/panel/index.vue b/packages/panel/index.vue
index 37003010c..eed3760d7 100644
--- a/packages/panel/index.vue
+++ b/packages/panel/index.vue
@@ -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>
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index e24bf0990..4fd9ad45d 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -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>
diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css
index 854c9d6b8..d79285264 100644
--- a/packages/vant-css/src/badge.css
+++ b/packages/vant-css/src/badge.css
@@ -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);
}
}
diff --git a/packages/vant-css/src/cell.css b/packages/vant-css/src/cell.css
index 5bc960596..8b381dd41 100644
--- a/packages/vant-css/src/cell.css
+++ b/packages/vant-css/src/cell.css
@@ -37,6 +37,10 @@
&__title {
display: table-cell;
+
+ .van-icon {
+ margin-right: 5px;
+ }
}
&__label {
diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css
index 1fd4c337e..704897bf4 100644
--- a/packages/vant-css/src/loading.css
+++ b/packages/vant-css/src/loading.css
@@ -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%;
diff --git a/test/unit/get-webpack-conf.js b/test/unit/get-webpack-conf.js
index 3861fd399..d583169ad 100644
--- a/test/unit/get-webpack-conf.js
+++ b/test/unit/get-webpack-conf.js
@@ -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'),
diff --git a/test/unit/specs/order-goods.spec.js b/test/unit/specs/order-goods.spec.js
index eef2d8ca5..698c5ff5b 100644
--- a/test/unit/specs/order-goods.spec.js
+++ b/test/unit/specs/order-goods.spec.js
@@ -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);
});
diff --git a/yarn.lock b/yarn.lock
index e49b9ee00..4ce6cd205 100644
--- a/yarn.lock
+++ b/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"