image preview component

docs/examples/image-pewview.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="page-image-pewview">
-    <h1 class="page-title">Image Preview</h1>
-  </div>
-</template>

docs/examples/image-preview.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="page-image-pewview">
+    <h1 class="page-title">Image Preview</h1>
+
+    <h2 class="page-sub-title">基础用法</h2>
+    <zan-image-preview v-model="preview"></zan-image-preview>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      preview: true
+    };
+  }
+};
+</script>

docs/nav.config.json

@@ -131,7 +131,7 @@
             },
             {
               "path": "/image-preview",
-              "title": "ImagePreview 图片预览"
+              "title": "ImagePreview"
             }
           ]
         }

packages/dialog/src/dialog.vue

@@ -70,10 +70,8 @@ export default {
         setTimeout(() => {
           if (this.modal && this.bodyOverflow !== 'hidden') {
             document.body.style.overflow = this.bodyOverflow;
-            document.body.style.paddingRight = this.bodyPaddingRight;
           }
           this.bodyOverflow = null;
-          this.bodyPaddingRight = null;
         }, 200);
       }
 

packages/image-preview/index.js

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

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

@@ -1,18 +1,73 @@
 <template>
-  <div>
-    <h2>author: {{ author }}</h2>
-    <div>Hello {{ name }}</div>
-  </div>
+  <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>
+  </transition>
 </template>
 
 <script>
-  export default {
-    name: 'Sample',
-    props: ['author'],
-    data() {
-      return {
-        name: 'World'
-      };
+import Popup from 'src/mixins/popup';
+
+export default {
+  name: 'zan-image-preview',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+
+    lockOnScroll: {
+      default: true
+    },
+
+    closeOnClickOverlay: {
+      default: true
     }
-  };
+  },
+
+  data() {
+    return {
+      image: 'https://img.yzcdn.cn/upload_files/2017/03/02/FhDtQ7okM18PeQ3P0RAfIzVADUEq.jpg'
+    };
+  },
+
+  mounted() {
+    this.open();
+    this.previewSize = this.$refs.previewContainer.getBoundingClientRect();
+  },
+
+  computed: {
+    /**
+     * 图片样式计算
+     * 根据屏幕自适应显示最长边
+     */
+    imageStyle() {
+    }
+  },
+
+  methods: {
+    close() {
+      if (this.closing) return;
+
+      this.closing = true;
+
+      this.value = false;
+
+      if (this.lockOnScroll) {
+        setTimeout(() => {
+          if (this.modal && this.bodyOverflow !== 'hidden') {
+            document.body.style.overflow = this.bodyOverflow;
+          }
+          this.bodyOverflow = null;
+        }, 200);
+      }
+
+      this.opened = false;
+      this.doAfterClose();
+    }
+  }
+};
 </script>

packages/zanui-css/src/image_preview.css

@@ -0,0 +1,15 @@
+@component-namespace zan {
+  @b image-preview {
+    position: absolute;
+    width: 100%;
+    height: 75%;
+    overflow: hidden;
+
+    @e image {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin: 0 auto;
+    }
+  }
+}

packages/zanui-css/src/index.css

@@ -19,3 +19,4 @@
 @import './steps.css';
 @import './tag.css';
 @import './checkbox.css';
+@import './image_preview.css';