From d6f6e7d888bfcea825f2ceebe9ebb8f7af87f94e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 17 May 2019 15:13:05 +0800 Subject: [PATCH] [new feature] Image: add error slot --- packages/image/demo/index.vue | 32 +++++++++++++++++-- packages/image/en-US.md | 1 + packages/image/index.js | 19 +++++++++-- packages/image/index.less | 1 + .../test/__snapshots__/demo.spec.js.snap | 32 +++++++++++++++---- .../test/__snapshots__/index.spec.js.snap | 4 +-- packages/image/zh-CN.md | 17 ++++++++-- 7 files changed, 90 insertions(+), 16 deletions(-) diff --git a/packages/image/demo/index.vue b/packages/image/demo/index.vue index 42492e73e..518a31dab 100644 --- a/packages/image/demo/index.vue +++ b/packages/image/demo/index.vue @@ -54,6 +54,32 @@ + + + + + +
{{ $t('defaultTip') }}
+ + + + + + +
{{ $t('customTip') }}
+ + + @@ -65,14 +91,16 @@ export default { loading: '加载中提示', error: '加载失败提示', defaultTip: '默认提示', - customTip: '自定义提示' + customTip: '自定义提示', + loadFail: '加载失败' }, 'en-US': { fitMode: 'Fit Mode', loading: 'Loading', error: 'Error', defaultTip: 'Default Tip', - customTip: 'Custom Tip' + customTip: 'Custom Tip', + loadFail: 'Load failed' } }, diff --git a/packages/image/en-US.md b/packages/image/en-US.md index eda5beea2..682ff1049 100644 --- a/packages/image/en-US.md +++ b/packages/image/en-US.md @@ -84,3 +84,4 @@ Vue.use(Lazyload); | Name | Description | |------|------| | loading | Custom loading placeholder | +| error | Custom error placeholder | diff --git a/packages/image/index.js b/packages/image/index.js index a1b4b5ba9..27166dc25 100644 --- a/packages/image/index.js +++ b/packages/image/index.js @@ -51,6 +51,7 @@ export default sfc({ onError(event) { this.error = true; + this.loading = false; this.$emit('error', event); }, @@ -58,11 +59,19 @@ export default sfc({ this.$emit('click', event); }, - renderContent() { + renderPlaceholder() { if (this.loading) { return (
- {this.slots('loading') || } + {this.slots('loading') || } +
+ ); + } + + if (this.error) { + return ( +
+ {this.slots('error') || }
); } @@ -83,6 +92,10 @@ export default sfc({ } }; + if (this.error) { + return; + } + if (this.lazyLoad) { return ; } @@ -95,7 +108,7 @@ export default sfc({ return (
{this.renderImage()} - {this.renderContent()} + {this.renderPlaceholder()}
); } diff --git a/packages/image/index.less b/packages/image/index.less index bee220fef..3f21f8232 100644 --- a/packages/image/index.less +++ b/packages/image/index.less @@ -21,6 +21,7 @@ align-items: center; justify-content: center; color: @gray-dark; + font-size: 14px; background-color: @background-color; } } diff --git a/packages/image/test/__snapshots__/demo.spec.js.snap b/packages/image/test/__snapshots__/demo.spec.js.snap index 6feaadfc1..c28bb70d0 100644 --- a/packages/image/test/__snapshots__/demo.spec.js.snap +++ b/packages/image/test/__snapshots__/demo.spec.js.snap @@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
-
+
contain
-
+
cover
-
+
fill
-
+
none
-
+
scale-down
@@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
-
+
默认提示
@@ -68,5 +68,23 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+
+
+
+
默认提示
+
+
+
+
+
+
+
自定义提示
+
+
+
`; diff --git a/packages/image/test/__snapshots__/index.spec.js.snap b/packages/image/test/__snapshots__/index.spec.js.snap index 90525a802..c6603965a 100644 --- a/packages/image/test/__snapshots__/index.spec.js.snap +++ b/packages/image/test/__snapshots__/index.spec.js.snap @@ -2,7 +2,7 @@ exports[`lazy load 1`] = `
-
+
`; @@ -11,7 +11,7 @@ exports[`load event 1`] = `
-
+
`; diff --git a/packages/image/zh-CN.md b/packages/image/zh-CN.md index 68087e9da..08d1cadc5 100644 --- a/packages/image/zh-CN.md +++ b/packages/image/zh-CN.md @@ -50,7 +50,7 @@ Vue.use(Lazyload); ### 加载中提示 -`Image`组件默认提供了图片加载中的提示，可以通过插槽自定义加载中提示 +`Image`组件提供了默认的加载中提示，可以通过`loading`插槽自定义加载中提示 ```html @@ -60,6 +60,18 @@ Vue.use(Lazyload); ``` +### 加载失败提示 + +`Image`组件提供了默认的加载失败提示，可以通过`error`插槽自定义加载失败提示 + +```html + + + +``` + ## API ### Props @@ -95,4 +107,5 @@ Vue.use(Lazyload); | 名称 | 说明 | |------|------| -| loading | 自定义加载状态显示内容 | +| loading | 自定义加载中的提示内容 | +| error | 自定义加载失败时的提示内容 |