fix(ImagePreview): close event triggered twice (#5411)

src/image-preview/ImagePreview.js

@@ -18,7 +18,12 @@ function getDistance(touches) {
 }
 
 export default createComponent({
-  mixins: [PopupMixin, TouchMixin],
+  mixins: [
+    PopupMixin({
+      skipToggleEvent: true
+    }),
+    TouchMixin
+  ],
 
   props: {
     className: null,
@@ -83,8 +88,8 @@ export default createComponent({
       };
 
       if (scale !== 1) {
-        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX /
-          scale}px, ${this.moveY / scale}px)`;
+        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this
+          .moveX / scale}px, ${this.moveY / scale}px)`;
       }
 
       return style;
@@ -92,8 +97,15 @@ export default createComponent({
   },
 
   watch: {
-    value() {
+    value(val) {
       this.setActive(this.startPosition);
+
+      if (!val) {
+        this.$emit('close', {
+          index: this.active,
+          url: this.images[this.active]
+        });
+      }
     },
 
     startPosition(active) {
@@ -116,14 +128,7 @@ export default createComponent({
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
         if (!this.doubleClickTimer) {
           this.doubleClickTimer = setTimeout(() => {
-            const index = this.active;
-
             if (!this.asyncClose) {
-              this.$emit('close', {
-                index,
-                url: this.images[index]
-              });
-
               this.$emit('input', false);
             }
 
@@ -248,7 +253,8 @@ export default createComponent({
       if (this.showIndex) {
         return (
           <div class={bem('index')}>
-            {this.slots('index') || `${this.active + 1} / ${this.images.length}`}
+            {this.slots('index') ||
+              `${this.active + 1} / ${this.images.length}`}
           </div>
         );
       }

src/image-preview/demo/index.vue

@@ -1,37 +1,25 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button
-        type="primary"
-        @click="showImagePreview"
-      >
+      <van-button type="primary" @click="showImagePreview">
         {{ $t('button1') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('button2')">
-      <van-button
-        type="primary"
-        @click="showImagePreview(1)"
-      >
+      <van-button type="primary" @click="showImagePreview(1)">
         {{ $t('button2') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('button3')">
-      <van-button
-        type="primary"
-        @click="showImagePreview(0, 1000)"
-      >
+      <van-button type="primary" @click="showImagePreview(0, 3000)">
         {{ $t('button3') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('componentCall')">
-      <van-button
-        type="primary"
-        @click="componentCall"
-      >
+      <van-button type="primary" @click="componentCall">
         {{ $t('componentCall') }}
       </van-button>
       <van-image-preview
@@ -112,7 +100,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-image-preview {
   background-color: @white;

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

@@ -92,7 +92,7 @@ test('double click', async done => {
   done();
 });
 
-test('onClose option', async done => {
+test('onClose option', () => {
   const onClose = jest.fn();
   const instance = ImagePreview({
     images,
@@ -100,37 +100,10 @@ test('onClose option', async done => {
     onClose
   });
 
-  instance.$emit('input', true);
-  expect(onClose).toHaveBeenCalledTimes(0);
-
-  await later(300);
-
-  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('onClose should only trigger once', async done => {
-  const onClose = jest.fn();
-  const instance = ImagePreview({
-    images,
-    startPostion: 1,
-    onClose
-  });
-
-  ImagePreview({
-    images,
-    startPostion: 1,
-    onClose
-  });
-
   instance.close();
 
   expect(onClose).toHaveBeenCalledTimes(1);
-  done();
+  expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
 });
 
 test('onChange option', async done => {