mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Doc] Card: update demo (#3651)
This commit is contained in:
neverland
GitHub
parent
0081f72556
commit
e109b6d9c9
@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<demo-block :title="$t('discountInfo')">
|
||||
<van-card
|
||||
num="2"
|
||||
price="2.00"
|
||||
@ -19,26 +19,37 @@
|
||||
:desc="$t('desc')"
|
||||
:title="$t('title')"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customContent')">
|
||||
<van-card
|
||||
num="2"
|
||||
price="2.00"
|
||||
:desc="$t('desc')"
|
||||
:title="$t('title')"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<template #tags>
|
||||
<div class="card__tags">
|
||||
<div>
|
||||
<van-tag
|
||||
plain
|
||||
type="danger"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
标签1
|
||||
标签
|
||||
</van-tag>
|
||||
<van-tag
|
||||
plain
|
||||
type="danger"
|
||||
>
|
||||
标签2
|
||||
标签
|
||||
</van-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="card__footer">
|
||||
<div>
|
||||
<van-button
|
||||
round
|
||||
size="mini"
|
||||
@ -62,26 +73,20 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '商品名称'
|
||||
title: '商品名称',
|
||||
discountInfo: '营销信息',
|
||||
customContent: '自定义内容'
|
||||
},
|
||||
'en-US': {
|
||||
discountInfo: 'Discount Info',
|
||||
customContent: 'Custom Content'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.card__footer {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.card__tags {
|
||||
.van-tag {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,28 +13,44 @@ Vue.use(Card);
|
||||
|
||||
```html
|
||||
<van-card
|
||||
title="Title"
|
||||
desc="Description"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
title="Title"
|
||||
desc="Description"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
/>
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
### Discount Info
|
||||
|
||||
```html
|
||||
<van-card
|
||||
num="2"
|
||||
tag="Tag"
|
||||
price="2.00"
|
||||
title="Title"
|
||||
desc="Description"
|
||||
origin-price="10.00"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
/>
|
||||
```
|
||||
|
||||
### Custom Content
|
||||
|
||||
Use slot to custom content.
|
||||
|
||||
```html
|
||||
<van-card
|
||||
num="2"
|
||||
tag="Tag"
|
||||
title="Title"
|
||||
desc="Description"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
origin-price="10.00"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
>
|
||||
<div slot="tags">
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">Button</van-button>
|
||||
<van-button size="mini">Button</van-button>
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-card">
|
||||
<div class="van-card__header"><a class="van-card__thumb">
|
||||
<div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-card">
|
||||
<div class="van-card__header"><a class="van-card__thumb">
|
||||
<div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
@ -33,11 +33,6 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-card__content">
|
||||
<div class="van-card__title">商品名称</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||
标签1
|
||||
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||
标签2
|
||||
</span></div>
|
||||
<div class="van-card__bottom">
|
||||
<div class="van-card__price">¥ 2.00</div>
|
||||
<div class="van-card__origin-price">¥ 10.00</div>
|
||||
@ -45,8 +40,32 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-card">
|
||||
<div class="van-card__header"><a class="van-card__thumb">
|
||||
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="van-card__content">
|
||||
<div class="van-card__title">商品名称</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div><span class="van-tag van-tag--plain van-hairline--surround" style="margin-right: 5px; color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
|
||||
标签
|
||||
</span></div>
|
||||
<div class="van-card__bottom">
|
||||
<div class="van-card__price">¥ 2.00</div>
|
||||
<div class="van-card__num">x 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-card__footer">
|
||||
<div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
按钮
|
||||
|
||||
@ -17,13 +17,13 @@ Vue.use(Card);
|
||||
price="2.00"
|
||||
desc="描述信息"
|
||||
title="商品标题"
|
||||
:thumb="imageURL"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
/>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
### 营销信息
|
||||
|
||||
可以通过具名插槽添加定制内容
|
||||
通过`origin-price`设置商品原价，通过`tag`设置商品左上角标签
|
||||
|
||||
```html
|
||||
<van-card
|
||||
@ -32,9 +32,27 @@ Vue.use(Card);
|
||||
price="2.00"
|
||||
desc="描述信息"
|
||||
title="商品标题"
|
||||
:thumb="imageURL"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
origin-price="10.00"
|
||||
/>
|
||||
```
|
||||
|
||||
### 自定义内容
|
||||
|
||||
`Card`组件提供了多个插槽，可以灵活地自定义内容
|
||||
|
||||
```html
|
||||
<van-card
|
||||
num="2"
|
||||
price="2.00"
|
||||
desc="描述信息"
|
||||
title="商品标题"
|
||||
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
|
||||
>
|
||||
<div slot="tags">
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">按钮</van-button>
|
||||
<van-button size="mini">按钮</van-button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user