mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Card): change thumb fit mode to cover
This commit is contained in:
parent
37f512fbd1
commit
e766d5d574
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -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>
|
||||||
|
@ -216,7 +216,7 @@ export default {
|
|||||||
|
|
||||||
### 输入框内容对齐
|
### 输入框内容对齐
|
||||||
|
|
||||||
通过`input-align`属性可以设置输入框内容的对齐方式
|
通过`input-align`属性可以设置输入框内容的对齐方式,可选值为`center`、`right`
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-field
|
<van-field
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user