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

feat(Card): Card 组件样式调整添加 price 上方的插槽 (#5134)

Browse Source
This commit is contained in:
Lindy 2019-11-29 14:29:42 +08:00 committed by neverland
parent a7ae694dbb
commit abbee1062b
8 changed files with 97 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/card/README.md
View File

@ -45,7 +45,7 @@ Use slot to custom content.
<van-card
num="2"
title="Title"
desc="Description"
desc="Description"
price="2.00"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
>
@ -94,6 +94,7 @@ Use slot to custom content.
| num | Custom num |
| price | Custom price |
| origin-price | Custom origin price |
| price-top | Custom price top |
| bottom | Custom price bottom |
| thumb | Custom thumb |
| tag | Custom thumb tag |

7
src/card/README.zh-CN.md
View File

@ -17,7 +17,7 @@ Vue.use(Card);
<van-card
num="2"
price="2.00"
desc="描述信息"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/>
@ -32,7 +32,7 @@ Vue.use(Card);
num="2"
tag="标签"
price="2.00"
desc="描述信息"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
origin-price="10.00"
@ -47,7 +47,7 @@ Vue.use(Card);
<van-card
num="2"
price="2.00"
desc="描述信息"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
>
@ -96,6 +96,7 @@ Vue.use(Card);
| num | 自定义数量 |
| price | 自定义价格 |
| origin-price | 自定义商品原价 |
| price-top | 自定义价格上方区域 |
| bottom | 自定义价格下方区域 |
| thumb | 自定义图片 |
| tag | 自定义图片角标 |

7
src/card/index.less
View File

@ -29,6 +29,7 @@
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */
min-height: @card-thumb-size;
@ -62,6 +63,11 @@
display: inline-block;
color: @card-price-color;
font-weight: @font-weight-bold;
&--integer {
font-size: @card-price-integer-font-size;
font-family: @card-price-font-family;
}
}
&__origin-price {
@ -74,6 +80,7 @@
&__num {
float: right;
color: @card-num-color;
}
&__tag {

25
src/card/index.tsx
View File

@ -32,6 +32,7 @@ export type CardSlots = DefaultSlots & {
bottom?: ScopedSlot;
footer?: ScopedSlot;
'origin-price'?: ScopedSlot;
'price-top'?: ScopedSlot;
};
export type CardEvents = {
@ -114,11 +115,22 @@ function Card(
}
}
function PriceContent() {
const priceArr = props.price!.toString().split('.');
return (
<div>
{props.currency}
<span class={bem('price', 'integer')}>{priceArr[0]}</span>.
{priceArr[1]}
</div>
);
}
function Price() {
if (showPrice) {
return (
<div class={bem('price')}>
{slots.price ? slots.price() : `${props.currency} ${props.price}`}
{slots.price ? slots.price() : PriceContent()}
</div>
);
}
@ -137,7 +149,7 @@ function Card(
function Num() {
if (showNum) {
return <div class={bem('num')}>{slots.num ? slots.num() : `x ${props.num}`}</div>;
return <div class={bem('num')}>{slots.num ? slots.num() : `x${props.num}`}</div>;
}
}
@ -152,11 +164,14 @@ function Card(
<div class={bem('header')}>
{Thumb()}
<div class={bem('content', { centered: props.centered })}>
{Title()}
{Desc()}
{slots.tags && slots.tags()}
<div>
{Title()}
{Desc()}
{slots.tags && slots.tags()}
</div>
{showBottom && (
<div class="van-card__bottom">
{slots['price-top'] && slots['price-top']()}
{Price()}
{OriginPrice()}
{Num()}

38
src/card/test/__snapshots__/demo.spec.js.snap
View File

@ -11,11 +11,15 @@ exports[`renders demo correctly 1`] = `
</div>
</a>
<div class="van-card__content">
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
</div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
<div class="van-card__num">x 2</div>
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
</div>
<div class="van-card__num">x2</div>
</div>
</div>
</div>
@ -31,12 +35,16 @@ exports[`renders demo correctly 1`] = `
<div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
</a>
<div class="van-card__content">
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
</div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
</div>
<div class="van-card__origin-price">¥ 10.00</div>
<div class="van-card__num">x 2</div>
<div class="van-card__num">x2</div>
</div>
</div>
</div>
@ -51,16 +59,20 @@ exports[`renders demo correctly 1`] = `
</div>
</a>
<div class="van-card__content">
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
<div>
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
<div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
标签
</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
标签
</span></div>
</div>
<div class="van-card__bottom">
<div class="van-card__price">¥ 2.00</div>
<div class="van-card__num">x 2</div>
<div class="van-card__price">
<div>¥<span class="van-card__price van-card__price--integer">2</span>.00</div>
</div>
<div class="van-card__num">x2</div>
</div>
</div>
</div>

23
src/card/test/__snapshots__/index.spec.js.snap
View File

@ -4,6 +4,7 @@ exports[`render bottom slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">
<div></div>
<div class="van-card__bottom">Custom Bottom</div>
</div>
</div>
@ -14,6 +15,7 @@ exports[`render origin-price slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">
<div></div>
<div class="van-card__bottom">
<div class="van-card__origin-price">Custom Origin Price</div>
</div>
@ -26,6 +28,7 @@ exports[`render price & num slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">
<div></div>
<div class="van-card__bottom">
<div class="van-card__price">Custom Price</div>
<div class="van-card__num">Custom Num</div>
@ -38,7 +41,9 @@ exports[`render price & num slot 1`] = `
exports[`render thumb & tag slot 1`] = `
<div class="van-card">
<div class="van-card__header"><a class="van-card__thumb">Custom Thumb<div class="van-card__tag">Custom Tag</div></a>
<div class="van-card__content"></div>
<div class="van-card__content">
<div></div>
</div>
</div>
</div>
`;
@ -46,7 +51,21 @@ exports[`render thumb & tag slot 1`] = `
exports[`render title & desc slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">Custom TitleCustom desc</div>
<div class="van-card__content">
<div>Custom TitleCustom desc</div>
</div>
</div>
</div>
`;
exports[`render price & price-top slot 1`] = `
<div class="van-card">
<div class="van-card__header">
<div class="van-card__content">
<div></div>
<div class="van-card__bottom">Custom Price-top<div class="van-card__price">Custom Price</div>
</div>
</div>
</div>
</div>
`;

11
src/card/test/index.spec.js
View File

@ -94,3 +94,14 @@ test('render title & desc slot', () => {
expect(wrapper).toMatchSnapshot();
});
test('render price & price-top slot', () => {
const wrapper = mount(Card, {
scopedSlots: {
price: () => 'Custom Price',
'price-top': () => 'Custom Price-top'
}
});
expect(wrapper).toMatchSnapshot();
});

10
src/style/var.less
View File

@ -42,6 +42,7 @@
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@price-integer-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
// Animation
@animation-duration-base: .3s;
@ -141,9 +142,12 @@
@card-title-line-height: 16px;
@card-desc-color: @gray-7;
@card-desc-line-height: 20px;
@card-price-color: @red;
@card-origin-price-color: @gray-7;
@card-price-color: @gray-8;
@card-origin-price-color: @gray-6;
@card-num-color: @gray-6;
@card-origin-price-font-size: @font-size-xs;
@card-price-integer-font-size: @font-size-lg;
@card-price-font-family: @price-integer-font-family;
// Cell
@cell-font-size: @font-size-md;
@ -609,7 +613,7 @@
@submit-bar-button-height: 40px;
@submit-bar-padding: 0 @padding-md;
@submit-bar-price-integer-font-size: 20px;
@submit-bar-price-font-family: Avenir-Heavy PingFang SC, Helvetica Neue, Arial, sans-serif;
@submit-bar-price-font-family: @price-integer-font-family;
// Swipe
@swipe-indicator-size: 6px;