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

[new feature] Card: add tag slot (#2636)

Browse Source
This commit is contained in:
neverland 2019-01-27 17:27:38 +08:00 committed by GitHub
parent e4327a3ebd
commit d42f866cd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,5 +68,6 @@ Use slot to custom content.
| price | Custom price | | price | Custom price |
| origin-price | Custom origin price | | origin-price | Custom origin price |
| thumb | Custom thumb | | thumb | Custom thumb |
| tag | Custom thumb tag |
| tags | Custom tags | | tags | Custom tags |
| footer | Custom footer | | footer | Custom footer |

13
packages/card/index.js
View File

@ -25,6 +25,7 @@ export default sfc({
const { thumb, $slots: slots } = this; const { thumb, $slots: slots } = this;
const showThumb = slots.thumb || thumb; const showThumb = slots.thumb || thumb;
const showTag = slots.tag || this.tag;
const showNum = slots.num || isDef(this.num); const showNum = slots.num || isDef(this.num);
const showPrice = slots.price || isDef(this.price); const showPrice = slots.price || isDef(this.price);
const showOriginPrice = slots['origin-price'] || isDef(this.originPrice); const showOriginPrice = slots['origin-price'] || isDef(this.originPrice);
@ -37,10 +38,14 @@ export default sfc({
) : ( ) : (
<img class={bem('img')} src={thumb} /> <img class={bem('img')} src={thumb} />
))} ))}
{this.tag && ( {showTag && (
<Tag mark type="danger" class={bem('tag')}> <div class={bem('tag')}>
{this.tag} {slots.tag || (
</Tag> <Tag mark type="danger">
{this.tag}
</Tag>
)}
</div>
)} )}
</a> </a>
); );

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

@ -18,7 +18,9 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img"><span class="van-tag van-tag--mark van-card__tag" style="background-color:#f44;">标签</span></a> <div class="van-card__header"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
<div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color:#f44;">标签</span></div>
</a>
<div class="van-card__content"> <div class="van-card__content">
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div> <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
<div class="van-card__desc van-ellipsis">描述信息</div> <div class="van-card__desc van-ellipsis">描述信息</div>

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

@ -49,7 +49,7 @@ Vue.use(Card);
| thumb | 左侧图片 URL | `String` | - | - | | thumb | 左侧图片 URL | `String` | - | - |
| title | 标题 | `String` | - | - | | title | 标题 | `String` | - | - |
| desc | 描述 | `String` | - | - | | desc | 描述 | `String` | - | - |
| tag | 标签 | `String` | - | 1.3.4 | | tag | 图片角标 | `String` | - | 1.3.4 |
| num | 商品数量 | `String | Number` | - | - | | num | 商品数量 | `String | Number` | - | - |
| price | 商品价格 | `String | Number` | - | - | | price | 商品价格 | `String | Number` | - | - |
| origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 | | origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 |
@ -68,5 +68,6 @@ Vue.use(Card);
| price | 自定义价格 | | price | 自定义价格 |
| origin-price | 自定义商品原价 | | origin-price | 自定义商品原价 |
| thumb | 自定义图片 | | thumb | 自定义图片 |
| tags | 自定义描述下方的内容 | | tag | 自定义图片角标 |
| tags | 自定义描述下方标签区域 |
| footer | 自定义右下角内容 | | footer | 自定义右下角内容 |