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 bottom slot

Browse Source
This commit is contained in:
陈嘉涵 2019-05-30 11:00:59 +08:00
parent 85b2515f60
commit 774438b308
6 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,6 +73,7 @@ Use slot to custom content.
| num | Custom num | | num | Custom num |
| price | Custom price | | price | Custom price |
| origin-price | Custom origin price | | origin-price | Custom origin price |
| bottom | Custom price bottom |
| thumb | Custom thumb | | thumb | Custom thumb |
| tag | Custom thumb tag | | tag | Custom thumb tag |
| tags | Custom tags | | tags | Custom tags |

2
packages/card/index.less
View File

@ -38,9 +38,9 @@
position: relative; position: relative;
display: flex; display: flex;
flex: 1; flex: 1;
height: @card-thumb-size;
flex-direction: column; flex-direction: column;
min-width: 0; /* hack for flex box ellipsis */ min-width: 0; /* hack for flex box ellipsis */
min-height: @card-thumb-size;
&--centered { &--centered {
justify-content: center; justify-content: center;

2
packages/card/index.tsx
View File

@ -28,6 +28,7 @@ export type CardSlots = DefaultSlots & {
title?: ScopedSlot; title?: ScopedSlot;
thumb?: ScopedSlot; thumb?: ScopedSlot;
price?: ScopedSlot; price?: ScopedSlot;
bottom?: ScopedSlot;
footer?: ScopedSlot; footer?: ScopedSlot;
'origin-price'?: ScopedSlot; 'origin-price'?: ScopedSlot;
}; };
@ -117,6 +118,7 @@ function Card(
{Price} {Price}
{OriginPrice} {OriginPrice}
{Num} {Num}
{slots.bottom && slots.bottom()}
</div> </div>
)} )}
</div> </div>

12
packages/card/test/__snapshots__/index.spec.js.snap
View File

@ -1,5 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render bottom slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">
<div class="van-card__bottom">
<div class="van-card__price">¥ 100</div>Custom Bottom
</div>
</div>
</div>
</div>
`;
exports[`render origin-price slot 1`] = ` exports[`render origin-price slot 1`] = `
<div class="van-card"> <div class="van-card">
<div class="van-card__header"> <div class="van-card__header">

15
packages/card/test/index.spec.js
View File

@ -15,3 +15,18 @@ test('render origin-price slot', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('render bottom slot', () => {
const wrapper = mount({
template: `
<card :price="100">
<template v-slot:bottom>Custom Bottom</template>
</card>
`,
components: {
Card
}
});
expect(wrapper).toMatchSnapshot();
});

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

@ -73,6 +73,7 @@ Vue.use(Card);
| num | 自定义数量 | | num | 自定义数量 |
| price | 自定义价格 | | price | 自定义价格 |
| origin-price | 自定义商品原价 | | origin-price | 自定义商品原价 |
| bottom | 自定义价格下方区域 |
| thumb | 自定义图片 | | thumb | 自定义图片 |
| tag | 自定义图片角标 | | tag | 自定义图片角标 |
| tags | 自定义描述下方标签区域 | | tags | 自定义描述下方标签区域 |