image preview

build/bin/build-entry.js

@@ -50,7 +50,8 @@ ComponentNames.forEach(name => {
 
     // services
     'Dialog',
-    'Toast'
+    'Toast',
+    'ImagePreview'
   ].indexOf(componentName) === -1) {
     installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
       name: componentName,

docs/examples/image-preview.vue

@@ -3,16 +3,28 @@
     <h1 class="page-title">Image Preview</h1>
 
     <h2 class="page-sub-title">基础用法</h2>
-    <zan-image-preview v-model="preview"></zan-image-preview>
+    <zan-button @click="previewImage">click me</zan-button>
+    <zan-button @click="previewImage2">click me</zan-button>
   </div>
 </template>
 
 <script>
+import { ImagePreview } from 'src/index';
+
 export default {
   data() {
     return {
       preview: true
     };
+  },
+
+  methods: {
+    previewImage() {
+      ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FjVBWm29JBob2gj9RC86MOD38RNf.jpg');
+    },
+    previewImage2() {
+      ImagePreview('https://img.yzcdn.cn/upload_files/2017/03/03/FseigsLj7DceULRKWhXsIsrkq1vT.jpg');
+    }
   }
 };
 </script>

packages/image-preview/index.js

@@ -1,3 +1,3 @@
-import ImagePreview from './src/image-preview.vue';
+import ImagePreview from './src/image-preview.js';
 
 export default ImagePreview;

packages/image-preview/src/image-preview.js

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

packages/image-preview/src/image-preview.vue

@@ -1,7 +1,10 @@
 <template>
   <transition name="image-fade">
-    <div class="zan-image-preview" ref="previewContainer" v-show="value">
+    <div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
-      <img class="zan-image-preview__image" :src="image" alt="" :style="imageStyle">
+      <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() {
+  methods: {
-    this.open();
+    handlePreviewClick() {
-    this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
+      this.value = false;
     },
-
-  computed: {
     /**
      * 图片样式计算
      * 根据屏幕自适应显示最长边
      */
-    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;
 

packages/zanui-css/src/image_preview.css

@@ -1,15 +1,29 @@
 @component-namespace zan {
   @b image-preview {
-    position: absolute;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 75%;
+    height: 100%;
-    overflow: hidden;
+    overflow: scroll;
 
     @e image {
       display: block;
       width: 100%;
       height: auto;
-      margin: 0 auto;
+      transition: .2s;
+      position: absolute;
+      left: 0;
+
+      @m center {
+        top: 50%;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      @m top {
+        top: 0;
+        transform: none;
+      }
     }
   }
 }

src/index.js

@@ -47,7 +47,6 @@ const install = function(Vue) {
   Vue.component(Badge.name, Badge);
   Vue.component(Search.name, Search);
   Vue.component(Step.name, Step);
-  Vue.component(ImagePreview.name, ImagePreview);
 };
 
 // auto install