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: use Image component

Browse Source
This commit is contained in:
陈嘉涵 2019-05-17 16:30:08 +08:00
parent 4bdfab4cb6
commit fbc232d78a
3 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/card/index.less
View File

@ -19,19 +19,10 @@
&__thumb {
position: relative;
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: @card-thumb-size;
height: @card-thumb-size;
margin-right: 10px;
img {
max-width: 100%;
max-height: 100%;
border: none;
}
}
&__content {

35
packages/card/index.tsx
View File

@ -1,6 +1,7 @@
import { use, isDef } from '../utils';
import { inherit } from '../utils/functional';
import Tag from '../tag';
import Image from '../image';
// Types
import { CreateElement, RenderContext } from 'vue/types';
@ -53,27 +54,35 @@ function Card(
function ThumbTag() {
if (slots.tag || props.tag) {
const DefaultTag = (
<Tag mark type="danger">
{props.tag}
</Tag>
return (
<div class={bem('tag')}>
{slots.tag ? (
slots.tag()
) : (
<Tag mark type="danger">
{props.tag}
</Tag>
)}
</div>
);
return <div class={bem('tag')}>{slots.tag ? slots.tag() : DefaultTag}</div>;
}
}
function Thumb() {
if (slots.thumb || thumb) {
const DefaultThumb = props.lazyLoad ? (
<img class={bem('img')} vLazy={thumb} />
) : (
<img class={bem('img')} src={thumb} />
);
return (
<a href={props.thumbLink} class={bem('thumb')}>
{slots.thumb ? slots.thumb() : DefaultThumb}
{slots.thumb ? (
slots.thumb()
) : (
<Image
src={thumb}
width="100%"
height="100%"
fit="contain"
lazy-load={props.lazyLoad}
/>
)}
{ThumbTag()}
</a>
);

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

@ -4,7 +4,12 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<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"></a>
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
</a>
<div class="van-card__content">
<div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
<div class="van-card__desc van-ellipsis">描述信息</div>
@ -18,7 +23,11 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<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">
<div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
</a>
<div class="van-card__content">