diff --git a/packages/card/index.less b/packages/card/index.less index e8bd4c79c..fde0b3cb0 100644 --- a/packages/card/index.less +++ b/packages/card/index.less @@ -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 { diff --git a/packages/card/index.tsx b/packages/card/index.tsx index 0888312e7..ede70c584 100644 --- a/packages/card/index.tsx +++ b/packages/card/index.tsx @@ -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> ); diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap index 660a2609f..0639e4172 100644 --- a/packages/card/test/__snapshots__/demo.spec.js.snap +++ b/packages/card/test/__snapshots__/demo.spec.js.snap @@ -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">