image preview

2017-03-05 16:57:50 +08:00
parent f224cda4f2
commit 8856af91fd
7 changed files with 102 additions and 21 deletions
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import ImagePreview from './image-preview.vue';
+import merge from 'src/utils/merge';
+
+let instance;
+
+const ImagePreviewConstructor = Vue.extend(ImagePreview);
+
+const initInstance = () => {
+  instance = new ImagePreviewConstructor({
+    el: document.createElement('div')
+  });
+};
+
+var ImagePreviewBox = image => {
+  if (!instance) {
+    initInstance();
+  }
+
+  if (!instance.value) {
+    instance.image = image;
+
+    document.body.appendChild(instance.$el);
+
+    Vue.nextTick(() => {
+      instance.value = true;
+    });
+  }
+};
+
+export default ImagePreviewBox;
@@ -1,7 +1,10 @@
 <template>
  <transition name="image-fade">
-    <div class="zan-image-preview" ref="previewContainer" v-show="value">
-      <img class="zan-image-preview__image" :src="image" alt="" :style="imageStyle">
+    <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
+      }">
    </div>
  </transition>
 </template>
@@ -30,25 +33,46 @@ export default {

  data() {
    return {
-      image: 'https://img.yzcdn.cn/upload_files/2017/03/02/FhDtQ7okM18PeQ3P0RAfIzVADUEq.jpg'
+      image: '',
+      viewportSize: null
    };
  },

-  mounted() {
-    this.open();
-    this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
-  },
-
-  computed: {
+  methods: {
+    handlePreviewClick() {
+      this.value = false;
+    },
    /**
     * 图片样式计算
     * 根据屏幕自适应显示最长边
     */
-    imageStyle() {
-    }
-  },
+    computeImageStyle() {
+      let previewSize = this.$refs.previewContainer.getBoundingClientRect();
+      let img = new Image();
+      let _this = this;
+
+      img.onload = function() {
+        let imgRatio = parseFloat(this.width / this.height);
+        let previewRatio = parseFloat(previewSize.width / previewSize.height);
+
+        if (previewRatio <= imgRatio) {
+          let 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;
+    },

-  methods: {
    close() {
      if (this.closing) return;