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 error slot

Browse Source
This commit is contained in:
陈嘉涵 2019-05-17 15:13:05 +08:00
parent d7b69d2fe4
commit d6f6e7d888
7 changed files with 90 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/image/demo/index.vue
View File

@ -54,6 +54,32 @@
</van-col> </van-col>
</van-row> </van-row>
</demo-block> </demo-block>
<demo-block :title="$t('error')">
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
/>
<div class="text">{{ $t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
>
<template v-slot:error>
{{ $t('loadFail') }}
</template>
</van-image>
<div class="text">{{ $t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
</demo-section> </demo-section>
</template> </template>
@ -65,14 +91,16 @@ export default {
loading: '加载中提示', loading: '加载中提示',
error: '加载失败提示', error: '加载失败提示',
defaultTip: '默认提示', defaultTip: '默认提示',
customTip: '自定义提示' customTip: '自定义提示',
loadFail: '加载失败'
}, },
'en-US': { 'en-US': {
fitMode: 'Fit Mode', fitMode: 'Fit Mode',
loading: 'Loading', loading: 'Loading',
error: 'Error', error: 'Error',
defaultTip: 'Default Tip', defaultTip: 'Default Tip',
customTip: 'Custom Tip' customTip: 'Custom Tip',
loadFail: 'Load failed'
} }
}, },

1
packages/image/en-US.md
View File

@ -84,3 +84,4 @@ Vue.use(Lazyload);
| Name | Description | | Name | Description |
|------|------| |------|------|
| loading | Custom loading placeholder | | loading | Custom loading placeholder |
| error | Custom error placeholder |

19
packages/image/index.js
View File

@ -51,6 +51,7 @@ export default sfc({
onError(event) { onError(event) {
this.error = true; this.error = true;
this.loading = false;
this.$emit('error', event); this.$emit('error', event);
}, },
@ -58,11 +59,19 @@ export default sfc({
this.$emit('click', event); this.$emit('click', event);
}, },
renderContent() { renderPlaceholder() {
if (this.loading) { if (this.loading) {
return ( return (
<div class={bem('loading')}> <div class={bem('loading')}>
{this.slots('loading') || <Icon name="photo-o" size="20" />} {this.slots('loading') || <Icon name="photo-o" size="22" />}
</div>
);
}
if (this.error) {
return (
<div class={bem('error')}>
{this.slots('error') || <Icon name="warning-o" size="22" />}
</div> </div>
); );
} }
@ -83,6 +92,10 @@ export default sfc({
} }
}; };
if (this.error) {
return;
}
if (this.lazyLoad) { if (this.lazyLoad) {
return <img vLazy={this.src} {...imgData} />; return <img vLazy={this.src} {...imgData} />;
} }
@ -95,7 +108,7 @@ export default sfc({
return ( return (
<div class={bem()} style={this.style} onClick={this.onClick}> <div class={bem()} style={this.style} onClick={this.onClick}>
{this.renderImage()} {this.renderImage()}
{this.renderContent()} {this.renderPlaceholder()}
</div> </div>
); );
} }

1
packages/image/index.less
View File

@ -21,6 +21,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @gray-dark; color: @gray-dark;
font-size: 14px;
background-color: @background-color; background-color: @background-color;
} }
} }

32
packages/image/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-row"> <div class="van-row">
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"> <div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
</div> </div>
@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <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-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" 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" 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: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">contain</div> <div class="text">contain</div>
</div> </div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" 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" 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: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">cover</div> <div class="text">cover</div>
</div> </div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" 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" 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: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">fill</div> <div class="text">fill</div>
</div> </div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" 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" 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: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">none</div> <div class="text">none</div>
</div> </div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;"> <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" 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" 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: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">scale-down</div> <div class="text">scale-down</div>
@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-row" style="margin-left: -10px; margin-right: -10px;"> <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-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img"> <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="text">默认提示</div> <div class="text">默认提示</div>
@ -68,5 +68,23 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</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;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">自定义提示</div>
</div>
</div>
</div>
</div> </div>
`; `;

4
packages/image/test/__snapshots__/index.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`lazy load 1`] = ` exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img"> <div class="van-image"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
`; `;
@ -11,7 +11,7 @@ exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn
exports[`load event 2`] = ` exports[`load event 2`] = `
<div class="van-image"><img src="" class="van-image__img"> <div class="van-image"><img src="" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 20px;"> <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div> <!----></i></div>
</div> </div>
`; `;

17
packages/image/zh-CN.md
View File

@ -50,7 +50,7 @@ Vue.use(Lazyload);
### 加载中提示 ### 加载中提示
`Image`组件默认提供了图片加载中的提示，可以通过插槽自定义加载中提示 `Image`组件提供了默认的加载中提示，可以通过`loading`插槽自定义加载中提示
```html ```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg"> <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
@ -60,6 +60,18 @@ Vue.use(Lazyload);
</van-image> </van-image>
``` ```
### 加载失败提示
`Image`组件提供了默认的加载失败提示，可以通过`error`插槽自定义加载失败提示
```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
<template v-slot:error>
<van-icon name="close" size="20" />
</template>
</van-image>
```
## API ## API
### Props ### Props
@ -95,4 +107,5 @@ Vue.use(Lazyload);
| 名称 | 说明 | | 名称 | 说明 |
|------|------| |------|------|
| loading | 自定义加载状态显示内容 | | loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 |