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

Doc: update component document && examples

Browse Source
This commit is contained in:
陈嘉涵 2017-08-31 15:18:54 +08:00
parent aff5da68e4
commit 3de9f86b47
16 changed files with 243 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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` | - |

38
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
@ -62,6 +64,6 @@ Vue.component(Card.name, Card);
|-----------|-----------| |-----------|-----------|
| title | 自定义标题 | | title | 自定义标题 |
| desc | 自定义描述 | | desc | 自定义描述 |
| tags | 自定义tags | | tags | 自定义 tags |
| thumb | 自定义thumb | | thumb | 自定义 thumb |
| footer | 自定义footer | | footer | 自定义 footer |

27
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: #84c483; background-color: #FF4444;
color: #FFFFFF; }
font-size: 16px; .van-cell-swipe__right {
width: 65px; background-color: #84c483;
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

183
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> <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 基础用法 :::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` | - |

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

62
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>
@ -89,11 +53,11 @@ Vue.component(Panel.name, Panel);
### API ### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| title | 标题 | `string` | | | | title | 标题 | `String` | - | - |
| desc | 描述 | `string` | | | | desc | 描述 | `String` | - | - |
| status | 状态 | `string` | | | | status | 状态 | `String` | - | - |
### Slot ### Slot
@ -101,5 +65,5 @@ Vue.component(Panel.name, Panel);
| name | 描述 | | name | 描述 |
|-----------|-----------| |-----------|-----------|
| - | 自定义内容 | | - | 自定义内容 |
| header | 自定义header | | header | 自定义 header |
| footer | 自定义footer | | footer | 自定义 footer |

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` | |

62
docs/src/ExamplesApp.vue
View File

@ -54,42 +54,42 @@ export default {
</script> </script>
<style> <style>
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body, html { body, html {
height: 100%; height: 100%;
} }
.examples-container { .examples-container {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative; position: relative;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0; width: 0;
}
} }
}
.footer { .footer {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;
padding: 10px 0 20px; padding: 10px 0 20px;
background: #f8f8f8; background: #f8f8f8;
&.footer-fixed { &.footer-fixed {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
}
} }
}
.zanui-logo { .zanui-logo {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 150px; width: 150px;
height: auto; height: auto;
} }
</style> </style>

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>

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>

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 {

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

@ -11,6 +11,7 @@
.van-loading { .van-loading {
font-size: 0; font-size: 0;
line-height: 0;
&--circle { &--circle {
width: 16px; width: 16px;