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
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 {