[new feature] ImagePreview: add onChange option (#3630)

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

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

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

packages/image-preview/test/__snapshots__/index.spec.js.snap

@@ -9,6 +9,19 @@ exports[`index slot 1`] = `
 </div>
 `;
 
+exports[`lazy-load prop 1`] = `
+<div class="van-image-preview" name="van-fade">
+  <div class="van-image-preview__index">1/3</div>
+  <div class="van-swipe">
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
+      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image" style="transition: .3s all;"></div>
+      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image"></div>
+      <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img class="van-image-preview__image"></div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-image-preview__index">1/3</div>

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(() => {
+  await later();
-    const wrapper = document.querySelector('.van-image-preview');
+
-    const swipe = wrapper.querySelector('.van-swipe__track');
+  const wrapper = document.querySelector('.van-image-preview');
-    triggerDrag(swipe, 0, 0);
+  const swipe = wrapper.querySelector('.van-swipe__track');
-    expect(onClose).toHaveBeenCalledTimes(1);
+  triggerDrag(swipe, 0, 0);
-    expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
+  expect(onClose).toHaveBeenCalledTimes(1);
-    done();
+  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();
+});

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 |

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 {