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] Card: update demo (#3651)

Browse Source
This commit is contained in:
neverland 2019-06-26 20:29:50 +08:00 committed by GitHub
parent 0081f72556
commit e109b6d9c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/card/demo/index.vue
View File

@ -10,7 +10,7 @@
/> />
</demo-block> </demo-block>
<demo-block :title="$t('advancedUsage')"> <demo-block :title="$t('discountInfo')">
<van-card <van-card
num="2" num="2"
price="2.00" price="2.00"
@ -19,26 +19,37 @@
:desc="$t('desc')" :desc="$t('desc')"
:title="$t('title')" :title="$t('title')"
:thumb="imageURL" :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> <template #tags>
<div class="card__tags"> <div>
<van-tag <van-tag
plain plain
type="danger" type="danger"
style="margin-right: 5px;"
> >
标签1 标签
</van-tag> </van-tag>
<van-tag <van-tag
plain plain
type="danger" type="danger"
> >
标签2 标签
</van-tag> </van-tag>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div class="card__footer"> <div>
<van-button <van-button
round round
size="mini" size="mini"
@ -62,26 +73,20 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
title: '商品名称' title: '商品名称',
discountInfo: '营销信息',
customContent: '自定义内容'
},
'en-US': {
discountInfo: 'Discount Info',
customContent: 'Custom Content'
} }
}, },
data() { data() {
return { return {
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg' imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg'
}; };
} }
}; };
</script> </script>
<style lang="less">
.card__footer {
padding-top: 5px;
}
.card__tags {
.van-tag {
margin-right: 5px;
}
}
</style>

30
packages/card/en-US.md
View File

@ -13,28 +13,44 @@ Vue.use(Card);
```html ```html
<van-card <van-card
title="Title"
desc="Description"
num="2" num="2"
price="2.00" 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. Use slot to custom content.
```html ```html
<van-card <van-card
num="2" num="2"
tag="Tag"
title="Title" title="Title"
desc="Description" desc="Description"
price="2.00" price="2.00"
:thumb="imageURL" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
origin-price="10.00"
> >
<div slot="tags">
<van-tag plain type="danger">Tag</van-tag>
<van-tag plain type="danger">Tag</van-tag>
</div>
<div slot="footer"> <div slot="footer">
<van-button size="mini">Button</van-button> <van-button size="mini">Button</van-button>
<van-button size="mini">Button</van-button> <van-button size="mini">Button</van-button>

35
packages/card/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"> <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;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"> <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;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
@ -33,11 +33,6 @@ exports[`renders demo correctly 1`] = `
<div class="van-card__content"> <div class="van-card__content">
<div class="van-card__title">商品名称</div> <div class="van-card__title">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</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__bottom">
<div class="van-card__price">¥ 2.00</div> <div class="van-card__price">¥ 2.00</div>
<div class="van-card__origin-price">¥ 10.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>
</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="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"> </span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
按钮 按钮

26
packages/card/zh-CN.md
View File

@ -17,13 +17,13 @@ Vue.use(Card);
price="2.00" price="2.00"
desc="描述信息" desc="描述信息"
title="商品标题" title="商品标题"
:thumb="imageURL" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/> />
``` ```
### 高级用法 ### 营销信息
可以通过具名插槽添加定制内容 通过`origin-price`设置商品原价，通过`tag`设置商品左上角标签
```html ```html
<van-card <van-card
@ -32,9 +32,27 @@ Vue.use(Card);
price="2.00" price="2.00"
desc="描述信息" desc="描述信息"
title="商品标题" title="商品标题"
:thumb="imageURL" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
origin-price="10.00" 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"> <div 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>