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

refactor(Card): extract render function

Browse Source
This commit is contained in:
chenjiahan 2020-08-24 19:32:22 +08:00
parent 6efaee7108
commit be5f161799
1 changed files with 118 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
src/card/index.js
View File

@ -28,154 +28,145 @@ export default createComponent({
emits: ['click-thumb'],
setup(props, { slots, emit }) {
return () => {
const { thumb } = props;
const renderTitle = () => {
if (slots.title) {
return slots.title();
}
if (props.title) {
return (
<div class={[bem('title'), 'van-multi-ellipsis--l2']}>
{props.title}
</div>
);
}
};
const renderThumbTag = () => {
if (slots.tag || props.tag) {
return (
<div class={bem('tag')}>
{slots.tag ? (
slots.tag()
) : (
<Tag mark type="danger">
{props.tag}
</Tag>
)}
</div>
);
}
};
const renderThumbImage = () => {
if (slots.thumb) {
return slots.thumb();
}
return (
<Image
src={props.thumb}
width="100%"
height="100%"
fit="cover"
lazyLoad={props.lazyLoad}
/>
);
};
const renderThumb = () => {
if (slots.thumb || props.thumb) {
return (
<a
href={props.thumbLink}
class={bem('thumb')}
onClick={(event) => {
emit('click-thumb', event);
}}
>
{renderThumbImage()}
{renderThumbTag()}
</a>
);
}
};
const renderDesc = () => {
if (slots.desc) {
return slots.desc();
}
if (props.desc) {
return <div class={[bem('desc'), 'van-ellipsis']}>{props.desc}</div>;
}
};
const renderPriceText = () => {
const priceArr = props.price.toString().split('.');
return (
<div>
<span class={bem('price-currency')}>{props.currency}</span>
<span class={bem('price-integer')}>{priceArr[0]}</span>.
<span class={bem('price-decimal')}>{priceArr[1]}</span>
</div>
);
};
return () => {
const showNum = slots.num || isDef(props.num);
const showPrice = slots.price || isDef(props.price);
const showOriginPrice = slots['origin-price'] || isDef(props.originPrice);
const showBottom =
showNum || showPrice || showOriginPrice || slots.bottom;
function onThumbClick(event) {
emit('click-thumb', event);
}
const Price = showPrice && (
<div class={bem('price')}>
{slots.price ? slots.price() : renderPriceText()}
</div>
);
function ThumbTag() {
if (slots.tag || props.tag) {
return (
<div class={bem('tag')}>
{slots.tag ? (
slots.tag()
) : (
<Tag mark type="danger">
{props.tag}
</Tag>
)}
</div>
);
}
}
const OriginPrice = showOriginPrice && (
<div class={bem('origin-price')}>
{slots['origin-price']
? slots['origin-price']()
: `${props.currency} ${props.originPrice}`}
</div>
);
function Thumb() {
if (slots.thumb || thumb) {
return (
<a
href={props.thumbLink}
class={bem('thumb')}
onClick={onThumbClick}
>
{slots.thumb ? (
slots.thumb()
) : (
<Image
src={thumb}
width="100%"
height="100%"
fit="cover"
lazy-load={props.lazyLoad}
/>
)}
{ThumbTag()}
</a>
);
}
}
const Num = showNum && (
<div class={bem('num')}>
{slots.num ? slots.num() : `x${props.num}`}
</div>
);
function Title() {
if (slots.title) {
return slots.title();
}
const Footer = slots.footer && (
<div class={bem('footer')}>{slots.footer()}</div>
);
if (props.title) {
return (
<div class={[bem('title'), 'van-multi-ellipsis--l2']}>
{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 PriceContent() {
const priceArr = props.price.toString().split('.');
return (
<div>
<span class={bem('price-currency')}>{props.currency}</span>
<span class={bem('price-integer')}>{priceArr[0]}</span>.
<span class={bem('price-decimal')}>{priceArr[1]}</span>
</div>
);
}
function Price() {
if (showPrice) {
return (
<div class={bem('price')}>
{slots.price ? slots.price() : PriceContent()}
</div>
);
}
}
function OriginPrice() {
if (showOriginPrice) {
const slot = slots['origin-price'];
return (
<div class={bem('origin-price')}>
{slot ? slot() : `${props.currency} ${props.originPrice}`}
</div>
);
}
}
function Num() {
if (showNum) {
return (
<div class={bem('num')}>
{slots.num ? slots.num() : `x${props.num}`}
</div>
);
}
}
function Footer() {
if (slots.footer) {
return <div class={bem('footer')}>{slots.footer()}</div>;
}
}
const Bottom = showBottom && (
<div class={bem('bottom')}>
{slots['price-top']?.()}
{Price}
{OriginPrice}
{Num}
{slots.bottom?.()}
</div>
);
return (
<div class={bem()}>
<div class={bem('header')}>
{Thumb()}
{renderThumb()}
<div class={bem('content', { centered: props.centered })}>
<div>
{Title()}
{Desc()}
{renderTitle()}
{renderDesc()}
{slots.tags?.()}
</div>
{showBottom && (
<div class="van-card__bottom">
{slots['price-top']?.()}
{Price()}
{OriginPrice()}
{Num()}
{slots.bottom?.()}
</div>
)}
{Bottom}
</div>
</div>
{Footer()}
{Footer}
</div>
);
};