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

Card: support num and price props

Browse Source
This commit is contained in:
陈嘉涵 2017-09-06 09:47:35 +08:00
parent cbf840b624
commit 44a08889f3
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,25 +23,29 @@ Vue.component(Card.name, Card);
:::demo 基础用法
```html
<van-card title="商品名称" desc="商品描述" :thumb="imageURL" />
<van-card
title="商品名称"
desc="商品描述"
num="2"
price="2.00"
:thumb="imageURL"
/>
```
:::
#### 高级用法
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
可以通过具名`slot`添加定制内容
:::demo 高级用法
```html
<van-card :thumb="imageURL">
<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">
<span class="van-card__num">x 2</span>
</div>
<div class="van-card__footer" slot="footer">
<van-card
title="商品名称"
desc="商品描述"
num="2"
price="2.00"
:thumb="imageURL"
>
<div slot="footer">
<van-button size="mini">按钮一</van-button>
<van-button size="mini">按钮二</van-button>
</div>
@ -51,11 +55,13 @@ Vue.component(Card.name, Card);
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | `String` | - | - |
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| thumb | 左侧图片 | `String` | - | - |
| title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - |
| num | 商品数量 | `String | Number` | - | - |
| price | 商品价格 | `String | Number` | - | - |
| centered | 内容是否垂直居中 | `String` | `false` | - |
### Slot

18
packages/card/index.vue
View File

@ -7,14 +7,22 @@
</div>
<div class="van-card__content">
<slot name="title">
<h4 v-text="title" class="van-card__title"></h4>
<div class="van-card__row" v-if="title || price !== undefined">
<h4 v-if="title" class="van-card__title">{{ title }}</h4>
<p v-if="price !== undefined" class="van-card__price">¥ {{ price }}</p>
</div>
</slot>
<slot name="desc">
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
<div class="van-card__row" v-if="desc || num !== undefined">
<p v-if="desc" class="van-card__desc">{{ desc }}</p>
<p v-if="num !== undefined" class="van-card__num">x {{ num }}</p>
</div>
</slot>
<slot name="tags"></slot>
</div>
<slot name="footer"></slot>
<div class="van-card__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</template>
@ -26,7 +34,9 @@ export default {
thumb: String,
title: String,
desc: String,
centered: Boolean
num: [Number, String],
centered: Boolean,
price: [Number, String]
}
};
</script>