From fbd751a64170b170e7eae16d7222d5d3bb52f101 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 25 Jun 2019 15:49:17 +0800 Subject: [PATCH] [new feature] ImagePreview: add onChange option (#3630) --- packages/image-preview/ImagePreview.js | 4 +- packages/image-preview/en-US.md | 3 +- packages/image-preview/index.js | 6 +++ .../test/__snapshots__/index.spec.js.snap | 13 +++++ packages/image-preview/test/index.spec.js | 47 +++++++++++++++---- packages/image-preview/zh-CN.md | 1 + types/image-preview.d.ts | 3 +- 7 files changed, 64 insertions(+), 13 deletions(-) diff --git a/packages/image-preview/ImagePreview.js b/packages/image-preview/ImagePreview.js index a30b5fa7d..cd947f7f4 100644 --- a/packages/image-preview/ImagePreview.js +++ b/packages/image-preview/ImagePreview.js @@ -228,7 +228,7 @@ export default sfc({ } }, - onChange(active) { + onSwipeChange(active) { this.resetScale(); this.active = active; this.$emit('change', active); @@ -261,7 +261,7 @@ export default sfc({ indicatorColor="white" initialSwipe={this.startPosition} showIndicators={this.showIndicators} - onChange={this.onChange} + onChange={this.onSwipeChange} > {images.map((image, index) => { const props = { diff --git a/packages/image-preview/en-US.md b/packages/image-preview/en-US.md index 09c8f537b..37475a022 100644 --- a/packages/image-preview/en-US.md +++ b/packages/image-preview/en-US.md @@ -94,7 +94,8 @@ export default { | showIndex | Whether to show index | `Boolean` | `true` | | showIndicators | Whether to show indicators | `Boolean` | `false` | | loop | Whether to enable loop | `Boolean` | `true` | -| onClose | Close callback | `Function` | - | +| onClose | Triggered when close | `Function` | - | +| onChange | Triggered when current image change | `Function` | - | | closeOnPopstate | Whether to close when popstate | `Boolean` | `false` | | asyncClose | Whether to enable async close | `Boolean` | `false` | | className | Custom className | `String | Array | Object` | - | diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js index fc6b3bde1..9db66d97b 100644 --- a/packages/image-preview/index.js +++ b/packages/image-preview/index.js @@ -24,6 +24,12 @@ const initInstance = () => { el: document.createElement('div') }); document.body.appendChild(instance.$el); + + instance.$on('change', index => { + if (instance.onChange) { + instance.onChange(index); + } + }); }; const ImagePreview = (images, startPosition = 0) => { diff --git a/packages/image-preview/test/__snapshots__/index.spec.js.snap b/packages/image-preview/test/__snapshots__/index.spec.js.snap index b85cebc16..81fc67316 100644 --- a/packages/image-preview/test/__snapshots__/index.spec.js.snap +++ b/packages/image-preview/test/__snapshots__/index.spec.js.snap @@ -9,6 +9,19 @@ exports[`index slot 1`] = ` `; +exports[`lazy-load prop 1`] = ` +
+
1/3
+
+
+
+
+
+
+
+
+`; + exports[`render image 1`] = `
1/3
diff --git a/packages/image-preview/test/index.spec.js b/packages/image-preview/test/index.spec.js index b4860ffd4..bf7e265f5 100644 --- a/packages/image-preview/test/index.spec.js +++ b/packages/image-preview/test/index.spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import ImagePreview from '..'; import ImagePreviewVue from '../ImagePreview'; -import { mount, trigger, triggerDrag, transitionStub } from '../../../test/utils'; +import { mount, trigger, triggerDrag, transitionStub, later } from '../../../test/utils'; transitionStub(); @@ -64,7 +64,7 @@ test('function call', done => { }); }); -test('function call options', done => { +test('onClose option', async done => { const onClose = jest.fn(); const instance = ImagePreview({ images, @@ -75,14 +75,28 @@ test('function call options', done => { instance.$emit('input', true); expect(onClose).toHaveBeenCalledTimes(0); - Vue.nextTick(() => { - const wrapper = document.querySelector('.van-image-preview'); - const swipe = wrapper.querySelector('.van-swipe__track'); - triggerDrag(swipe, 0, 0); - expect(onClose).toHaveBeenCalledTimes(1); - expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' }); - done(); + await later(); + + const wrapper = document.querySelector('.van-image-preview'); + const swipe = wrapper.querySelector('.van-swipe__track'); + triggerDrag(swipe, 0, 0); + expect(onClose).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' }); + done(); +}); + +test('onChange option', async done => { + const instance = ImagePreview({ + images, + startPostion: 0, + onChange(index) { + expect(index).toEqual(2); + done(); + } }); + + const swipe = instance.$el.querySelector('.van-swipe__track'); + triggerDrag(swipe, 1000, 0); }); test('register component', () => { @@ -137,3 +151,18 @@ test('closeOnPopstate', () => { trigger(window, 'popstate'); expect(wrapper.emitted('input')[1]).toBeFalsy(); }); + +test('lazy-load prop', () => { + const wrapper = mount(ImagePreviewVue, { + propsData: { + images, + lazyLoad: true + } + }); + + wrapper.setProps({ + value: true + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/image-preview/zh-CN.md b/packages/image-preview/zh-CN.md index a98553162..0675eeb84 100644 --- a/packages/image-preview/zh-CN.md +++ b/packages/image-preview/zh-CN.md @@ -107,6 +107,7 @@ export default { | showIndicators | 是否显示轮播指示器 | `Boolean` | `false` | 1.3.10 | | loop | 是否开启循环播放 | `Boolean` | `true` | 1.4.4 | | onClose | 关闭时的回调函数 | `Function` | - | 1.1.16 | +| onChange | 切换图片时的回调函数，回调参数为当前索引 | `Function` | - | 2.0.3 | | asyncClose | 是否开启异步关闭 | `Boolean` | `false` | 1.4.8 | | closeOnPopstate | 是否在页面回退时自动关闭 | `Boolean` | `false` | 2.0.0 | | className | 自定义类名 | `String | Array | Object` | - | 1.5.2 | diff --git a/types/image-preview.d.ts b/types/image-preview.d.ts index 6440a4dcb..e6cb9a775 100644 --- a/types/image-preview.d.ts +++ b/types/image-preview.d.ts @@ -12,7 +12,8 @@ export type ImagePreviewOptions = string[] | { asyncClose?: boolean; showIndicators?: boolean; closeOnPopstate?: boolean; - onClose?: () => any; + onClose?: () => void; + onChange?: (index: number) => void; }; export class VanImagePreview extends VanPopupMixin {