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

[new feature] Image: add round prop (#3838)

Browse Source
This commit is contained in:
一颗红心 2019-07-18 17:12:27 +08:00 committed by neverland
parent 3f33fcc525
commit e1021e70ba
6 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/image/README.md
View File

@ -31,6 +31,17 @@ Vue.use(Image);
/>
```
### Round
```html
<van-image
round
width="10rem"
height="10rem"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### Lazy Load
```html
@ -56,6 +67,7 @@ Vue.use(Lazyload);
|------|------|------|------|
| src | Src | `string` | - | - |
| fit | Fit mode | `string` | `fill` | - |
| round | Round，when img width not eq height it may not works at `fit=contain` and `fit=scale-down` | `boolean` | `false` | - |
| alt | Alt | `string` | - | - |
| width | Width | `string | number` | - | - |
| height | Height | `string | number` | - | - |

18
src/image/README.zh-CN.md
View File

@ -2,7 +2,7 @@
### 介绍
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
### 引入
@ -39,6 +39,19 @@ Vue.use(Image);
/>
```
### 圆形图片
通过`round`属性可以设置图片变圆
```html
<van-image
round
width="10rem"
height="10rem"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### 图片懒加载
设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
@ -81,7 +94,8 @@ Vue.use(Image);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| src | 图片链接 | `string` | - | - |
| fit | 图片填充模式 | `string` | `fill` | - |
| fit | 图片填充模式 | `string` | `fill` | - |
| round | 圆形图片，当图片宽高不相等时 `fit=contain` 和 `fit=scale-down` 可能无法实现「圆形」图片 | `boolean` | `false` | - |
| alt | 替代文本 | `string` | - | - |
| width | 宽度，默认单位为 px | `string | number` | - | - |
| height | 高度，默认单位为 px | `string | number` | - | - |

21
src/image/demo/index.vue
View File

@ -28,6 +28,25 @@
</van-row>
</demo-block>
<demo-block :title="$t('round')">
<van-row gutter="20">
<van-col
v-for="fit in fits"
span="8"
:key="fit"
>
<van-image
round
:fit="fit"
width="100%"
height="27vw"
:src="image"
/>
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('loading')">
<van-row gutter="20">
<van-col span="8">
@ -86,6 +105,7 @@ export default {
i18n: {
'zh-CN': {
fitMode: '填充模式',
round: '圆形图片',
loading: '加载中提示',
error: '加载失败提示',
defaultTip: '默认提示',
@ -94,6 +114,7 @@ export default {
},
'en-US': {
fitMode: 'Fit Mode',
round: 'Round',
loading: 'Loading',
error: 'Error',
defaultTip: 'Default Tip',

3
src/image/index.js
View File

@ -5,6 +5,7 @@ const [createComponent, bem] = createNamespace('image');
export default createComponent({
props: {
round: Boolean,
src: String,
fit: String,
alt: String,
@ -134,7 +135,7 @@ export default createComponent({
render(h) {
return (
<div class={bem()} style={this.style} onClick={this.onClick}>
<div class={bem({ round: this.round })} style={this.style} onClick={this.onClick}>
{this.renderImage()}
{this.renderPlaceholder()}
</div>

5
src/image/index.less
View File

@ -4,6 +4,11 @@
position: relative;
display: inline-block;
&--round {
overflow: hidden;
border-radius: 50%;
}
&__img,
&__error,
&__loading {

39
src/image/test/__snapshots__/demo.spec.js.snap
View File

@ -49,6 +49,45 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" 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="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><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" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">scale-down</div>
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">