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

[improvement] Card: optimize code style

Browse Source
This commit is contained in:
陈嘉涵 2019-05-05 17:58:26 +08:00
parent 9104e2dc5a
commit 403c362476
1 changed files with 81 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
packages/card/index.tsx
View File

@ -46,82 +46,111 @@ function Card(
) { ) {
const { thumb } = props; const { thumb } = props;
const showThumb = slots.thumb || thumb;
const showTag = slots.tag || props.tag;
const showNum = slots.num || isDef(props.num); const showNum = slots.num || isDef(props.num);
const showPrice = slots.price || isDef(props.price); const showPrice = slots.price || isDef(props.price);
const showOriginPrice = slots['origin-price'] || isDef(props.originPrice); const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
const showBottom = showNum || showPrice || showOriginPrice; const showBottom = showNum || showPrice || showOriginPrice;
const Thumb = showThumb && ( function ThumbTag() {
<a href={props.thumbLink} class={bem('thumb')}> if (slots.tag || props.tag) {
{slots.thumb ? ( const DefaultTag = (
slots.thumb()
) : props.lazyLoad ? (
<img class={bem('img')} vLazy={thumb} />
) : (
<img class={bem('img')} src={thumb} />
)}
{showTag && (
<div class={bem('tag')}>
{slots.tag ? (
slots.tag()
) : (
<Tag mark type="danger"> <Tag mark type="danger">
{props.tag} {props.tag}
</Tag> </Tag>
)}
</div>
)}
</a>
); );
const Title = slots.title return <div class={bem('tag')}>{slots.tag ? slots.tag() : DefaultTag}</div>;
? slots.title() }
: props.title && <div class={bem('title')}>{props.title}</div>; }
const Desc = slots.desc function Thumb() {
? slots.desc() if (slots.thumb || thumb) {
: props.desc && <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>; const DefaultThumb = props.lazyLoad ? (
<img class={bem('img')} vLazy={thumb} />
) : (
<img class={bem('img')} src={thumb} />
);
const Price = showPrice && ( return (
<a href={props.thumbLink} class={bem('thumb')}>
{slots.thumb ? slots.thumb() : DefaultThumb}
{ThumbTag()}
</a>
);
}
}
function Title() {
if (slots.title) {
return slots.title();
}
if (props.title) {
return <div class={bem('title')}>{props.title}</div>;
}
}
function Desc() {
if (slots.desc) {
return slots.desc();
}
if (props.desc) {
return <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>;
}
}
function Price() {
if (showPrice) {
return (
<div class={bem('price')}> <div class={bem('price')}>
{slots.price ? slots.price() : `${props.currency} ${props.price}`} {slots.price ? slots.price() : `${props.currency} ${props.price}`}
</div> </div>
); );
}
}
const OriginPrice = showOriginPrice && ( function OriginPrice() {
if (showOriginPrice) {
const slot = slots['origin-price'];
return (
<div class={bem('origin-price')}> <div class={bem('origin-price')}>
{slots['origin-price'] {slot ? slot() : `${props.currency} ${props.originPrice}`}
? slots['origin-price']()
: `${props.currency} ${props.originPrice}`}
</div> </div>
); );
}
}
const Num = showNum && ( function Num() {
<div class={bem('num')}>{slots.num ? slots.num() : `x ${props.num}`}</div> if (showNum) {
); return <div class={bem('num')}>{slots.num ? slots.num() : `x ${props.num}`}</div>;
}
}
const Footer = slots.footer && <div class={bem('footer')}>{slots.footer()}</div>; function Footer() {
if (slots.footer) {
return <div class={bem('footer')}>{slots.footer()}</div>;
}
}
return ( return (
<div class={bem()} {...inherit(ctx, true)}> <div class={bem()} {...inherit(ctx, true)}>
<div class={bem('header')}> <div class={bem('header')}>
{Thumb} {Thumb()}
<div class={bem('content', { centered: props.centered })}> <div class={bem('content', { centered: props.centered })}>
{Title} {Title()}
{Desc} {Desc()}
{slots.tags && slots.tags()} {slots.tags && slots.tags()}
{showBottom && ( {showBottom && (
<div class="van-card__bottom"> <div class="van-card__bottom">
{Price} {Price()}
{OriginPrice} {OriginPrice()}
{Num} {Num()}
</div> </div>
)} )}
</div> </div>
</div> </div>
{Footer} {Footer()}
</div> </div>
); );
} }