[bugfix] ImagePreview: wrong index (#1961)

packages/image-preview/ImagePreview.vue

@@ -83,7 +83,7 @@ export default create({
       moveY: 0,
       moving: false,
       zooming: false,
-      active: this.startPosition
+      active: 0
     };
   },
 
@@ -108,6 +108,10 @@ export default create({
   },
 
   watch: {
+    value() {
+      this.active = this.startPosition;
+    },
+
     startPosition(active) {
       this.active = active;
     }
@@ -122,7 +126,7 @@ export default create({
       event.preventDefault();
 
       const deltaTime = new Date() - this.touchStartTime;
-      const { offsetX, offsetY } = this.$refs.swipe;
+      const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
 
       // prevent long tap to close component
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
@@ -164,9 +168,10 @@ export default create({
     onTouchStart(event) {
       const { touches } = event;
       const { offsetX } = this.$refs.swipe;
+
       if (touches.length === 1 && this.scale !== 1) {
         this.startMove(event);
-      } else if (touches.length === 2 && !offsetX) {
+      } /* istanbul ignore else */ else if (touches.length === 2 && !offsetX) {
         this.startZoom(event);
       }
     },
@@ -194,6 +199,7 @@ export default create({
     },
 
     onTouchEnd(event) {
+      /* istanbul ignore else */
       if (this.moving || this.zooming) {
         let stopPropagation = true;
 

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

@@ -19,3 +19,23 @@ exports[`render image 1`] = `
   </div>
 </div>
 `;
+
+exports[`zoom 1`] = `
+<div class="van-image-preview">
+  <div class="van-image-preview__index">1/3</div>
+  <div class="van-swipe">
+    <div class="van-swipe__track" style="width: 300px;">
+      <div class="van-swipe-item" style="width: 100px; height: 100%;">
+        <img src="https://img.yzcdn.cn/1.png" class="van-image-preview__image">
+      </div>
+      <div class="van-swipe-item" style="width: 100px; height: 100%;">
+        <img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image">
+      </div>
+      <div class="van-swipe-item" style="width: 100px; height: 100%;">
+        <img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image">
+      </div>
+    </div>
+    <!---->
+  </div>
+</div>
+`;

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

@@ -1,7 +1,16 @@
 import Vue from 'vue';
 import ImagePreview from '..';
 import ImagePreviewVue from '../ImagePreview';
-import { mount, triggerDrag } from '../../../test/utils';
+import { mount, trigger, triggerDrag } from '../../../test/utils';
+
+function triggerZoom(el, x, y) {
+  trigger(el, 'touchstart', 0, 0, { x, y });
+  trigger(el, 'touchmove', -x / 4, -y / 4, { x, y });
+  trigger(el, 'touchmove', -x / 3, -y / 3, { x, y });
+  trigger(el, 'touchmove', -x / 2, -y / 2, { x, y });
+  trigger(el, 'touchmove', -x, -y, { x, y });
+  trigger(el, 'touchend', 0, 0, { touchList: [] });
+}
 
 const images = [
   'https://img.yzcdn.cn/1.png',
@@ -60,3 +69,18 @@ test('register component', () => {
   Vue.use(ImagePreview);
   expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
 });
+
+test('zoom', async() => {
+  const getBoundingClientRect = Element.prototype.getBoundingClientRect;
+  Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
+
+  const wrapper = mount(ImagePreviewVue, {
+    propsData: { images, value: true }
+  });
+
+  const image = wrapper.find('img');
+  triggerZoom(image, 300, 300);
+  triggerDrag(image, 300, 300);
+  expect(wrapper).toMatchSnapshot();
+  Element.prototype.getBoundingClientRect = getBoundingClientRect;
+});