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

18
packages/card/index.vue
View File

@ -7,14 +7,22 @@
</div> </div>
<div class="van-card__content"> <div class="van-card__content">
<slot name="title"> <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>
<slot name="desc"> <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>
<slot name="tags"></slot> <slot name="tags"></slot>
</div> </div>
<slot name="footer"></slot> <div class="van-card__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div> </div>
</template> </template>
@ -26,7 +34,9 @@ export default {
thumb: String, thumb: String,
title: String, title: String,
desc: String, desc: String,
centered: Boolean num: [Number, String],
centered: Boolean,
price: [Number, String]
} }
}; };
</script> </script>