image preview

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);
 

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;