From b2b1a2a24dae7e1f2a548881b432e45d68d0d52f Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Fri, 19 May 2017 15:02:49 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=95=BF=E6=8C=89?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=EF=BC=8C=E5=9B=BE=E7=89=87=E9=9A=90=E8=97=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/image-preview/src/image-preview.vue | 32 ++++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index d819a582a..22c2793ca 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="image-fade">
-    <div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
+    <div class="van-image-preview" ref="previewContainer" v-show="value">
       <van-swipe>
         <van-swipe-item v-for="item in images">
           <img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import Popup from 'src/mixins/popup';
 import VanSwipe from 'packages/swipe';
 import VanSwipeItem from 'packages/swipe-item';
@@ -47,12 +48,9 @@ export default {
   },
 
   methods: {
-    handlePreviewClick() {
-      this.value = false;
-    },
-
     handleLoad(event) {
-      const containerSize = this.$refs.previewContainer.getBoundingClientRect();
+      const container = this.$refs.previewContainer;
+      const containerSize = container.getBoundingClientRect();
       const ratio = containerSize.width / containerSize.height;
       const target = event.currentTarget;
       const targetRatio = target.width / target.height;
@@ -88,6 +86,28 @@ export default {
       this.opened = false;
       this.doAfterClose();
     }
+  },
+
+  mounted() {
+    const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+    const container = this.$refs.previewContainer;
+
+    if (supportTouch) {
+      let touchStartTime;
+
+      container.addEventListener('touchstart', () => {
+        touchStartTime = new Date();
+      });
+      container.addEventListener('touchend', () => {
+        if (new Date() - touchStartTime < 1500) {
+          this.value = false;
+        }
+      });
+    } else {
+      container.addEventListener('click', () => {
+        this.value = false;
+      });
+    }
   }
 };
 </script>