From 0bf7852f0b2c54f18d18c0bb0ae3a15d91e3e6f6 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 15 Mar 2017 20:56:37 +0800
Subject: [PATCH] image preview

---
 docs/examples-dist/image-preview.vue         | 21 +++++++-
 docs/examples-dist/swipe.vue                 |  4 +-
 docs/examples-docs/image-preview.md          | 22 +++++++++
 docs/examples-docs/swipe.md                  |  4 +-
 packages/image-preview/src/image-preview.js  |  4 +-
 packages/image-preview/src/image-preview.vue | 50 ++++++--------------
 packages/swipe/src/scroll.js                 |  2 +-
 packages/zanui-css/src/image_preview.css     | 11 ++---
 8 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 24e5d5956..f08fe4946 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -1,4 +1,21 @@
-<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
+<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1><example-block title="">
+                <zan-button @click="handleImagePreview">预览图片</zan-button>
+
+              </example-block></section></template>
 
 <script>
-import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
\ No newline at end of file
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import { ImagePreview } from 'src/index';
+
+export default {
+  methods: {
+    handleImagePreview() {
+      ImagePreview([
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
+      ]);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 097501ad3..e107e8bf5 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -4,7 +4,7 @@
     <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
   <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
@@ -14,7 +14,7 @@
     <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
   <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
 </zan-swipe>
 
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index e7ed9b7fd..414e9e7f0 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -1,3 +1,25 @@
+<script>
+import { ImagePreview } from 'src/index';
+
+export default {
+  methods: {
+    handleImagePreview() {
+      ImagePreview([
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
+      ]);
+    }
+  }
+};
+</script>
+
 ## ImagePreview 图片预览
 
+### 基础用法
 
+:::demo
+```html
+<zan-button @click="handleImagePreview">预览图片</zan-button>
+```
+:::
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index e5761444a..8449eb4e7 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -23,7 +23,7 @@
     <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
   <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
 </zan-swipe>
 ```
@@ -38,7 +38,7 @@
     <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
   <zan-swipe-item>
-    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
   </zan-swipe-item>
 </zan-swipe>
 ```
diff --git a/packages/image-preview/src/image-preview.js b/packages/image-preview/src/image-preview.js
index af58b935c..93c62f354 100644
--- a/packages/image-preview/src/image-preview.js
+++ b/packages/image-preview/src/image-preview.js
@@ -12,13 +12,13 @@ const initInstance = () => {
   });
 };
 
-var ImagePreviewBox = image => {
+var ImagePreviewBox = images => {
   if (!instance) {
     initInstance();
   }
 
   if (!instance.value) {
-    instance.image = image;
+    instance.images = images;
 
     document.body.appendChild(instance.$el);
 
diff --git a/packages/image-preview/src/image-preview.vue b/packages/image-preview/src/image-preview.vue
index 3e80c3eeb..21679c8e4 100644
--- a/packages/image-preview/src/image-preview.vue
+++ b/packages/image-preview/src/image-preview.vue
@@ -1,22 +1,32 @@
 <template>
   <transition name="image-fade">
     <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
-      <img class="zan-image-preview__image" :src="image" alt="" :class="{
-        'zan-image-preview__image--center': true,
-        'zan-image-preview__image--top': imageIsLargeView
-      }">
+      <zan-swipe>
+        <zan-swipe-item v-for="item in images">
+          <img class="zan-image-preview__image" :src="item" alt="" :class="{
+            'zan-image-preview__image--center': true
+          }">
+        </zan-swipe-item>
+      </zan-swipe>
     </div>
   </transition>
 </template>
 
 <script>
 import Popup from 'src/mixins/popup';
+import ZanSwipe from 'packages/swipe';
+import ZanSwipeItem from 'packages/swipe-item';
 
 export default {
   name: 'zan-image-preview',
 
   mixins: [Popup],
 
+  components: {
+    ZanSwipe,
+    ZanSwipeItem
+  },
+
   props: {
     overlay: {
       default: true
@@ -33,7 +43,7 @@ export default {
 
   data() {
     return {
-      image: '',
+      images: [],
       viewportSize: null
     };
   },
@@ -42,36 +52,6 @@ export default {
     handlePreviewClick() {
       this.value = false;
     },
-    /**
-     * 图片样式计算
-     * 根据屏幕自适应显示最长边
-     */
-    computeImageStyle() {
-      // const previewSize = this.$refs.previewContainer.getBoundingClientRect();
-      // const img = new Image();
-      // const _this = this;
-
-      // img.onload = function() {
-      //   const imgRatio = parseFloat(this.width / this.height);
-      //   const previewRatio = parseFloat(previewSize.width / previewSize.height);
-
-      //   if (previewRatio <= imgRatio) {
-      //     const top = (previewSize.height - parseInt(previewSize.width / imgRatio, 10)) / 2;
-      //     _this.imageStyle = {
-      //       width: '100%',
-      //       height: 'auto',
-      //       top: top + 'px'
-      //     };
-      //   } else if (previewRatio > imgRatio) {
-      //     _this.imageStyle = {
-      //       width: 'auto',
-      //       height: '100%'
-      //     };
-      //   }
-      // };
-
-      // img.src = this.image;
-    },
 
     close() {
       if (this.closing) return;
diff --git a/packages/swipe/src/scroll.js b/packages/swipe/src/scroll.js
index c2b2477ac..94b325178 100755
--- a/packages/swipe/src/scroll.js
+++ b/packages/swipe/src/scroll.js
@@ -49,7 +49,6 @@ extend(Scroll.prototype, {
       left: 0,
       width: '100%',
       height: '100%',
-      display: 'block',
       '-webkit-transform': 'translate3d(-9999px, 0, 0)',
       'pointer-events': 'none'
     };
@@ -75,6 +74,7 @@ extend(Scroll.prototype, {
     page = this.getCurrentPage();
     if (page) {
       page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
+      page.style['display'] = 'block';
     }
 
     leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];
diff --git a/packages/zanui-css/src/image_preview.css b/packages/zanui-css/src/image_preview.css
index ad5ded9aa..eb47d8b12 100644
--- a/packages/zanui-css/src/image_preview.css
+++ b/packages/zanui-css/src/image_preview.css
@@ -5,13 +5,13 @@
     left: 0;
     width: 100%;
     height: 100%;
-    overflow: scroll;
+    overflow: auto;
 
     @e image {
       display: block;
       width: 100%;
       height: auto;
-      transition: .2s;
+      transition: .2s ease-out;
       position: absolute;
       left: 0;
 
@@ -19,11 +19,10 @@
         top: 50%;
         transform: translate3d(0, -50%, 0);
       }
+    }
 
-      @m top {
-        top: 0;
-        transform: none;
-      }
+    .zan-swipe {
+      height: 100%;
     }
   }
 }