feat(Card): change thumb fit mode to cover

This commit is contained in:
陈嘉涵 2020-01-24 10:45:06 +08:00
parent 37f512fbd1
commit e766d5d574
9 changed files with 16 additions and 24 deletions

View File

@ -19,7 +19,7 @@ Vue.use(Card);
price="2.00" price="2.00"
title="Title" title="Title"
desc="Description" desc="Description"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/> />
``` ```
@ -33,7 +33,7 @@ Vue.use(Card);
title="Title" title="Title"
desc="Description" desc="Description"
origin-price="10.00" origin-price="10.00"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/> />
``` ```
@ -47,7 +47,7 @@ Use slot to custom content.
title="Title" title="Title"
desc="Description" desc="Description"
price="2.00" price="2.00"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
> >
<div slot="tags"> <div slot="tags">
<van-tag plain type="danger">Tag</van-tag> <van-tag plain type="danger">Tag</van-tag>

View File

@ -19,7 +19,7 @@ Vue.use(Card);
price="2.00" price="2.00"
desc="描述信息" desc="描述信息"
title="商品标题" title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
/> />
``` ```
@ -34,7 +34,7 @@ Vue.use(Card);
price="2.00" price="2.00"
desc="描述信息" desc="描述信息"
title="商品标题" title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
origin-price="10.00" origin-price="10.00"
/> />
``` ```
@ -49,7 +49,7 @@ Vue.use(Card);
price="2.00" price="2.00"
desc="描述信息" desc="描述信息"
title="商品标题" title="商品标题"
thumb="https://img.yzcdn.cn/vant/t-thirt.jpg" thumb="https://img.yzcdn.cn/vant/cat.jpeg"
> >
<div slot="tags"> <div slot="tags">
<van-tag plain type="danger">标签</van-tag> <van-tag plain type="danger">标签</van-tag>

View File

@ -72,7 +72,7 @@ export default {
data() { data() {
return { return {
imageURL: 'https://img.yzcdn.cn/vant/t-thirt.jpg', imageURL: 'https://img.yzcdn.cn/vant/cat.jpeg',
}; };
}, },
}; };

View File

@ -88,7 +88,7 @@ function Card(
src={thumb} src={thumb}
width="100%" width="100%"
height="100%" height="100%"
fit="contain" fit="cover"
lazy-load={props.lazyLoad} lazy-load={props.lazyLoad}
/> />
)} )}

View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"> <div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;"> <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"> <div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;"> <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>
@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-card"> <div class="van-card">
<div class="van-card__header"><a class="van-card__thumb"> <div class="van-card__header"><a class="van-card__thumb">
<div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/t-thirt.jpg" class="van-image__img" style="object-fit: contain;"> <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div> <!----></i></div>
</div> </div>

View File

@ -216,7 +216,7 @@ export default {
### 输入框内容对齐 ### 输入框内容对齐
通过`input-align`属性可以设置输入框内容的对齐方式 通过`input-align`属性可以设置输入框内容的对齐方式,可选值为`center``right`
```html ```html
<van-field <van-field

View File

@ -18,9 +18,7 @@ Vue.use(SwipeCell);
<template slot="left"> <template slot="left">
<van-button square type="primary" text="Select" /> <van-button square type="primary" text="Select" />
</template> </template>
<van-cell :border="false" title="Cell" value="Cell Content" /> <van-cell :border="false" title="Cell" value="Cell Content" />
<template slot="right"> <template slot="right">
<van-button square type="danger" text="Delete" /> <van-button square type="danger" text="Delete" />
<van-button square type="primary" text="Collect"/> <van-button square type="primary" text="Collect"/>
@ -28,16 +26,14 @@ Vue.use(SwipeCell);
</van-swipe-cell> </van-swipe-cell>
``` ```
### Async close ### Before Close
```html ```html
<van-swipe-cell :before-close="beforeClose"> <van-swipe-cell :before-close="beforeClose">
<template slot="left"> <template slot="left">
<van-button square type="primary" text="Select" /> <van-button square type="primary" text="Select" />
</template> </template>
<van-cell :border="false" title="Cell" value="Cell Content" /> <van-cell :border="false" title="Cell" value="Cell Content" />
<template slot="right"> <template slot="right">
<van-button square type="danger" text="Delete" /> <van-button square type="danger" text="Delete" />
</template> </template>

View File

@ -20,9 +20,7 @@ Vue.use(SwipeCell);
<template slot="left"> <template slot="left">
<van-button square type="primary" text="选择" /> <van-button square type="primary" text="选择" />
</template> </template>
<van-cell :border="false" title="单元格" value="内容" /> <van-cell :border="false" title="单元格" value="内容" />
<template slot="right"> <template slot="right">
<van-button square type="danger" text="删除" /> <van-button square type="danger" text="删除" />
<van-button square type="primary" text="收藏"/> <van-button square type="primary" text="收藏"/>
@ -39,9 +37,7 @@ Vue.use(SwipeCell);
<template slot="left"> <template slot="left">
<van-button square type="primary" text="选择" /> <van-button square type="primary" text="选择" />
</template> </template>
<van-cell :border="false" title="单元格" value="内容" /> <van-cell :border="false" title="单元格" value="内容" />
<template slot="right"> <template slot="right">
<van-button square type="danger" text="删除" /> <van-button square type="danger" text="删除" />
</template> </template>

View File

@ -18,7 +18,7 @@
</van-swipe-cell> </van-swipe-cell>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('beforeClose')">
<van-swipe-cell :before-close="beforeClose"> <van-swipe-cell :before-close="beforeClose">
<template #left> <template #left>
<van-button square type="primary" :text="$t('select')" /> <van-button square type="primary" :text="$t('select')" />
@ -45,16 +45,16 @@ export default {
delete: '删除', delete: '删除',
collect: '收藏', collect: '收藏',
title: '单元格', title: '单元格',
title2: '异步关闭',
confirm: '确定删除吗?', confirm: '确定删除吗?',
beforeClose: '异步关闭',
}, },
'en-US': { 'en-US': {
select: 'Select', select: 'Select',
delete: 'Delete', delete: 'Delete',
collect: 'Collect', collect: 'Collect',
title: 'Cell', title: 'Cell',
title2: 'Async close',
confirm: 'Are you sure to delete?', confirm: 'Are you sure to delete?',
beforeClose: 'Before Close',
}, },
}, },