diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js index 173e8f1b5..cdcc50700 100644 --- a/src/image-preview/ImagePreview.js +++ b/src/image-preview/ImagePreview.js @@ -4,6 +4,8 @@ import { preventDefault } from '../utils/dom/event'; import { PopupMixin } from '../mixins/popup'; import { TouchMixin } from '../mixins/touch'; import { CloseOnPopstateMixin } from '../mixins/close-on-popstate'; +import Image from '../image'; +import Loading from '../loading'; import Swipe from '../swipe'; import SwipeItem from '../swipe-item'; @@ -19,11 +21,7 @@ function getDistance(touches) { } export default createComponent({ - mixins: [ - PopupMixin, - TouchMixin, - CloseOnPopstateMixin - ], + mixins: [PopupMixin, TouchMixin, CloseOnPopstateMixin], props: { className: null, @@ -253,6 +251,51 @@ export default createComponent({ this.scale = scale; this.moveX = 0; this.moveY = 0; + }, + + genIndex() { + if (this.showIndex) { + return ( +
+ {this.slots('index') || `${this.active + 1}/${this.images.length}`} +
+ ); + } + }, + + genImages() { + const imageSlots = { + loading: () => + }; + + return ( + + {this.images.map((image, index) => ( + + + + ))} + + ); } }, @@ -261,48 +304,6 @@ export default createComponent({ return; } - const { active, images } = this; - - const Index = this.showIndex && ( -
- {this.slots('index') || `${active + 1}/${images.length}`} -
- ); - - const Images = ( - - {images.map((image, index) => { - const props = { - class: bem('image'), - style: index === active ? this.imageStyle : null, - on: { - touchstart: this.onImageTouchStart, - touchmove: this.onImageTouchMove, - touchend: this.onImageTouchEnd, - touchcancel: this.onImageTouchEnd - } - }; - return ( - - {this.lazyLoad ? ( - - ) : ( - - )} - - ); - })} - - ); - return (
- {Images} - {Index} + {this.genImages()} + {this.genIndex()}
); diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue index c7c0356be..7c4f7e173 100644 --- a/src/image-preview/demo/index.vue +++ b/src/image-preview/demo/index.vue @@ -94,6 +94,7 @@ export default { showImagePreview(position, timer) { const instance = ImagePreview({ images, + lazyLoad: true, swipeDuration: 300, asyncClose: !!timer, closeOnPopstate: true, diff --git a/src/image-preview/index.less b/src/image-preview/index.less index d4523dfce..a97c7df2e 100644 --- a/src/image-preview/index.less +++ b/src/image-preview/index.less @@ -13,9 +13,10 @@ right: 0; bottom: 0; left: 0; - max-width: 100%; - max-height: 100%; - margin: auto; + + .van-image__loading { + background-color: transparent; + } } &__index { diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap index 0c4470f2d..532a1a3d5 100644 --- a/src/image-preview/test/__snapshots__/index.spec.js.snap +++ b/src/image-preview/test/__snapshots__/index.spec.js.snap @@ -13,9 +13,27 @@ exports[`lazy-load prop 1`] = `
-
-
-
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
1/3
@@ -26,22 +44,66 @@ exports[`render image 1`] = `
-
-
-
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
1/3
`; +exports[`set show-index prop to false 1`] = ` +
+
+
+
+
+`; + exports[`zoom 1`] = `
-
-
-
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
1/3
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js index 329736a91..2282f815c 100644 --- a/src/image-preview/test/index.spec.js +++ b/src/image-preview/test/index.spec.js @@ -136,6 +136,17 @@ test('zoom', async () => { Element.prototype.getBoundingClientRect = getBoundingClientRect; }); +test('set show-index prop to false', () => { + const wrapper = mount(ImagePreviewVue, { + propsData: { + value: true, + showIndex: false + } + }); + + expect(wrapper).toMatchSnapshot(); +}); + test('index slot', () => { const wrapper = mount({ template: ` diff --git a/src/uploader/test/__snapshots__/index.spec.js.snap b/src/uploader/test/__snapshots__/index.spec.js.snap index 7e4592da9..37b0cc946 100644 --- a/src/uploader/test/__snapshots__/index.spec.js.snap +++ b/src/uploader/test/__snapshots__/index.spec.js.snap @@ -1,37 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`click to preview image 1`] = ` -
-
-
-
- -
-
-
-
- 1/1 -
-
-`; - exports[`delete preview image 1`] = `
diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 61a420db3..be37a1fef 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -341,7 +341,7 @@ it('click to preview image', () => { wrapper.find('.van-image').trigger('click'); const imagePreviewNode2 = document.querySelector('.van-image-preview'); - expect(imagePreviewNode2).toMatchSnapshot(); + expect(imagePreviewNode2.querySelectorAll('.van-image-preview__image').length).toEqual(1); }); it('click-preview event', () => {