From d7b69d2fe40e90a8eb7fa589695baa7c2cab0fe6 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 14:51:06 +0800 Subject: [PATCH] [new feature] Image: add loading slot --- packages/image/demo/index.vue | 40 +++++++++++- packages/image/en-US.md | 6 ++ packages/image/index.js | 63 ++++++++++++------- packages/image/index.less | 17 ++++- .../test/__snapshots__/demo.spec.js.snap | 49 +++++++++++++-- .../test/__snapshots__/index.spec.js.snap | 16 ++++- packages/image/test/index.spec.js | 4 ++ packages/image/zh-CN.md | 24 ++++++- 8 files changed, 185 insertions(+), 34 deletions(-) diff --git a/packages/image/demo/index.vue b/packages/image/demo/index.vue index 5b8b0dd76..42492e73e 100644 --- a/packages/image/demo/index.vue +++ b/packages/image/demo/index.vue @@ -19,6 +19,7 @@ > @@ -26,6 +27,33 @@ + + + + + +
{{ $t('defaultTip') }}
+ + + + + + +
{{ $t('customTip') }}
+ + + @@ -33,10 +61,18 @@ export default { i18n: { 'zh-CN': { - fitMode: '缩放模式' + fitMode: '填充模式', + loading: '加载中提示', + error: '加载失败提示', + defaultTip: '默认提示', + customTip: '自定义提示' }, 'en-US': { - fitMode: 'Fit Mode' + fitMode: 'Fit Mode', + loading: 'Loading', + error: 'Error', + defaultTip: 'Default Tip', + customTip: 'Custom Tip' } }, diff --git a/packages/image/en-US.md b/packages/image/en-US.md index 5dd864a86..eda5beea2 100644 --- a/packages/image/en-US.md +++ b/packages/image/en-US.md @@ -78,3 +78,9 @@ Vue.use(Lazyload); | click | Triggered when click image | event: Event | | load | Triggered when image loaded | - | | error | Triggered when image load failed | - | + +### Slots + +| Name | Description | +|------|------| +| loading | Custom loading placeholder | diff --git a/packages/image/index.js b/packages/image/index.js index fd062a171..a1b4b5ba9 100644 --- a/packages/image/index.js +++ b/packages/image/index.js @@ -1,4 +1,5 @@ import { use, isDef, suffixPx } from '../utils'; +import Icon from '../icon'; const [sfc, bem] = use('image'); @@ -19,6 +20,13 @@ export default sfc({ }; }, + watch: { + src() { + this.loading = true; + this.error = false; + } + }, + computed: { style() { const style = {}; @@ -48,33 +56,46 @@ export default sfc({ onClick(event) { this.$emit('click', event); + }, + + renderContent() { + if (this.loading) { + return ( +
+ {this.slots('loading') || } +
+ ); + } + }, + + renderImage() { + const imgData = { + class: bem('img'), + attrs: { + alt: this.alt + }, + style: { + objectFit: this.fit + }, + on: { + load: this.onLoad, + error: this.onError + } + }; + + if (this.lazyLoad) { + return ; + } + + return ; } }, render(h) { - const imgData = { - class: bem('img'), - attrs: { - alt: this.alt - }, - style: { - objectFit: this.fit - }, - on: { - load: this.onLoad, - error: this.onError - } - }; - - const Image = this.lazyLoad ? ( - - ) : ( - - ); - return (
- {Image} + {this.renderImage()} + {this.renderContent()}
); } diff --git a/packages/image/index.less b/packages/image/index.less index 5f7da3686..bee220fef 100644 --- a/packages/image/index.less +++ b/packages/image/index.less @@ -1,11 +1,26 @@ @import '../style/var'; .van-image { + position: relative; display: inline-block; - &__img { + &__img, + &__error, + &__loading { display: block; width: 100%; height: 100%; } + + &__error, + &__loading { + position: absolute; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + color: @gray-dark; + 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 6011ba2db..6feaadfc1 100644 --- a/packages/image/test/__snapshots__/demo.spec.js.snap +++ b/packages/image/test/__snapshots__/demo.spec.js.snap @@ -4,32 +4,69 @@ exports[`renders demo correctly 1`] = `
-
+
+
+
+
-
+
+
+
+
contain
-
+
+
+
+
cover
-
+
+
+
+
fill
-
+
+
+
+
none
-
+
+
+
+
scale-down
+
+
+
+
+
+
+
+
默认提示
+
+
+
+
+ +
+
+
自定义提示
+
+
+
`; diff --git a/packages/image/test/__snapshots__/index.spec.js.snap b/packages/image/test/__snapshots__/index.spec.js.snap index f66af2b11..90525a802 100644 --- a/packages/image/test/__snapshots__/index.spec.js.snap +++ b/packages/image/test/__snapshots__/index.spec.js.snap @@ -1,3 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`lazy load 1`] = `
`; +exports[`lazy load 1`] = ` +
+
+
+
+`; + +exports[`load event 1`] = `
`; + +exports[`load event 2`] = ` +
+
+
+
+`; diff --git a/packages/image/test/index.spec.js b/packages/image/test/index.spec.js index 0e5e936e9..961733f80 100644 --- a/packages/image/test/index.spec.js +++ b/packages/image/test/index.spec.js @@ -19,6 +19,10 @@ test('load event', () => { wrapper.find('img').trigger('load'); expect(wrapper.emitted('load')[0][0]).toBeTruthy(); + expect(wrapper).toMatchSnapshot(); + + wrapper.setProps({ src: '' }); + expect(wrapper).toMatchSnapshot(); }); test('error event', () => { diff --git a/packages/image/zh-CN.md b/packages/image/zh-CN.md index 91d4aea77..68087e9da 100644 --- a/packages/image/zh-CN.md +++ b/packages/image/zh-CN.md @@ -20,7 +20,7 @@ Vue.use(Image); /> ``` -### 缩放模式 +### 填充模式 ```html + + +``` + ## API ### Props @@ -55,13 +67,13 @@ Vue.use(Lazyload); | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | src | 图片链接 | `String` | - | - | -| fit | 图片裁剪、缩放的模式 | `String` | `fill` | - | +| fit | 图片填充模式 | `String` | `fill` | - | | alt | 替代文本 | `String` | - | - | | width | 宽度，默认单位为 px | `String | Number` | - | - | | height | 高度，默认单位为 px | `String | Number` | - | - | | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | - | -### fit 可选值 +### 图片填充模式 | 名称 | 含义 | |------|------| @@ -78,3 +90,9 @@ Vue.use(Lazyload); | click | 点击图片时触发 | event: Event | | load | 图片加载完毕时触发 | - | | error | 图片加载失败时触发 | - | + +### Slots + +| 名称 | 说明 | +|------|------| +| loading | 自定义加载状态显示内容 |