From 5fff24cee8eccd52e7d23893e25cf0d0971ec905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 31 Dec 2019 14:16:12 +0800
Subject: [PATCH] chore(ImagePreview): optimize event binding

---
 src/image-preview/ImagePreview.js | 49 +++++++++++++------------------
 1 file changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index d66af6e13..dae739a86 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -99,7 +99,10 @@ export default createComponent({
   watch: {
     value(val) {
       if (val) {
-        this.onShow();
+        this.setActive(this.startPosition);
+        this.$nextTick(() => {
+          this.$refs.swipe.swipeTo(this.startPosition, { immediate: true });
+        });
       } else {
         this.$emit('close', {
           index: this.active,
@@ -108,39 +111,27 @@ export default createComponent({
       }
     },
 
-    startPosition(active) {
-      this.setActive(active);
-    }
-  },
+    startPosition(val) {
+      this.setActive(val);
+    },
 
-  mounted() {
-    if (this.value) {
-      this.bindEvent();
+    shouldRender: {
+      handler(val) {
+        if (val) {
+          this.$nextTick(() => {
+            const swipe = this.$refs.swipe.$el;
+            on(swipe, 'touchstart', this.onWrapperTouchStart);
+            on(swipe, 'touchmove', preventDefault);
+            on(swipe, 'touchend', this.onWrapperTouchEnd);
+            on(swipe, 'touchcancel', this.onWrapperTouchEnd);
+          });
+        }
+      },
+      immediate: true
     }
   },
 
   methods: {
-    onShow() {
-      this.bindEvent();
-      this.setActive(this.startPosition);
-      this.$nextTick(() => {
-        this.$refs.swipe.swipeTo(this.startPosition, { immediate: true });
-      });
-    },
-
-    bindEvent() {
-      if (!this.eventBinded) {
-        this.eventBinded = true;
-        this.$nextTick(() => {
-          const swipe = this.$refs.swipe.$el;
-          on(swipe, 'touchstart', this.onWrapperTouchStart);
-          on(swipe, 'touchmove', preventDefault);
-          on(swipe, 'touchend', this.onWrapperTouchEnd);
-          on(swipe, 'touchcancel', this.onWrapperTouchEnd);
-        });
-      }
-    },
-
     onWrapperTouchStart() {
       this.touchStartTime = new Date();
     },