预览使用图床

src/components/album/InkImg.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="img-container">
-    <el-image
+    <InkElImage
       :style="imgStyle"
       :src="src | cdnSrc"
       :preview-src-list="srcList"
@@ -15,12 +15,14 @@
       <div slot="error">
         <i class="el-icon-picture-outline"></i>
       </div>
-    </el-image>
+    </InkElImage>
   </div>
 </template>
 <script>
+import InkElImage from './image/main';
 export default {
   name: "InkImg",
+  components:{InkElImage},
   props: {
     src: String,
     imgStyle: Object,

src/components/album/image/image-viewer.vue

@@ -0,0 +1,331 @@
+<template>
+    <transition name="viewer-fade">
+      <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
+        <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
+        <!-- CLOSE -->
+        <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
+          <i class="el-icon-close"></i>
+        </span>
+        <!-- ARROW -->
+        <template v-if="!isSingle">
+          <span
+            class="el-image-viewer__btn el-image-viewer__prev"
+            :class="{ 'is-disabled': !infinite && isFirst }"
+            @click="prev">
+            <i class="el-icon-arrow-left"/>
+          </span>
+          <span
+            class="el-image-viewer__btn el-image-viewer__next"
+            :class="{ 'is-disabled': !infinite && isLast }"
+            @click="next">
+            <i class="el-icon-arrow-right"/>
+          </span>
+        </template>
+        <!-- ACTIONS -->
+        <div class="el-image-viewer__btn el-image-viewer__actions">
+          <div class="el-image-viewer__actions__inner">
+            <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+            <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+            <i class="el-image-viewer__actions__divider"></i>
+            <i :class="mode.icon" @click="toggleMode"></i>
+            <i class="el-image-viewer__actions__divider"></i>
+            <i class="el-icon-refresh-left" @click="handleActions('anticlocelise')"></i>
+            <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
+          </div>
+        </div>
+        <!-- CANVAS -->
+        <div class="el-image-viewer__canvas">
+          <img
+            v-for="(url, i) in urlList"
+            v-if="i === index"
+            ref="img"
+            v-bind="$attrs"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown">
+        </div>
+      </div>
+    </transition>
+  </template>
+
+  <script>
+  import { on, off } from 'element-ui/src/utils/dom';
+  import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+  import { PopupManager } from 'element-ui/src/utils/popup';
+  
+  const Mode = {
+    CONTAIN: {
+      name: 'contain',
+      icon: 'el-icon-full-screen'
+    },
+    ORIGINAL: {
+      name: 'original',
+      icon: 'el-icon-c-scale-to-original'
+    }
+  };
+  
+  const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+  
+  export default {
+
+  
+    props: {
+      urlList: {
+        type: Array,
+        default: () => []
+      },
+      zIndex: {
+        type: Number,
+        default: 2000
+      },
+      onSwitch: {
+        type: Function,
+        default: () => {}
+      },
+      onClose: {
+        type: Function,
+        default: () => {}
+      },
+      initialIndex: {
+        type: Number,
+        default: 0
+      },
+      appendToBody: {
+        type: Boolean,
+        default: true
+      },
+      maskClosable: {
+        type: Boolean,
+        default: true
+      }
+    },
+  
+    data() {
+      return {
+        index: this.initialIndex,
+        isShow: false,
+        infinite: true,
+        loading: false,
+        mode: Mode.CONTAIN,
+        transform: {
+          scale: 1,
+          deg: 0,
+          offsetX: 0,
+          offsetY: 0,
+          enableTransition: false
+        }
+      };
+    },
+    computed: {
+      isSingle() {
+        return this.urlList.length <= 1;
+      },
+      isFirst() {
+        return this.index === 0;
+      },
+      isLast() {
+        return this.index === this.urlList.length - 1;
+      },
+      currentImg() {
+        return this.urlList[this.index];
+      },
+      imgStyle() {
+        const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+        const style = {
+          transform: `scale(${scale}) rotate(${deg}deg)`,
+          transition: enableTransition ? 'transform .3s' : '',
+          'margin-left': `${offsetX}px`,
+          'margin-top': `${offsetY}px`
+        };
+        if (this.mode === Mode.CONTAIN) {
+          style.maxWidth = style.maxHeight = '100%';
+        }
+        return style;
+      },
+      viewerZIndex() {
+        const nextZIndex = PopupManager.nextZIndex();
+        return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
+      }
+    },
+    watch: {
+      index: {
+        handler: function(val) {
+          this.reset();
+          this.onSwitch(val);
+        }
+      },
+      currentImg(val) {
+        this.$nextTick(_ => {
+          const $img = this.$refs.img[0];
+          if (!$img.complete) {
+            this.loading = true;
+          }
+        });
+      }
+    },
+    methods: {
+      hide() {
+        this.deviceSupportUninstall();
+        this.onClose();
+      },
+      deviceSupportInstall() {
+        this._keyDownHandler = e => {
+          e.stopPropagation();
+          const keyCode = e.keyCode;
+          switch (keyCode) {
+            // ESC
+            case 27:
+              this.hide();
+              break;
+            // SPACE
+            case 32:
+              this.toggleMode();
+              break;
+            // LEFT_ARROW
+            case 37:
+              this.prev();
+              break;
+            // UP_ARROW
+            case 38:
+              this.handleActions('zoomIn');
+              break;
+            // RIGHT_ARROW
+            case 39:
+              this.next();
+              break;
+            // DOWN_ARROW
+            case 40:
+              this.handleActions('zoomOut');
+              break;
+          }
+        };
+        this._mouseWheelHandler = rafThrottle(e => {
+          const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+          if (delta > 0) {
+            this.handleActions('zoomIn', {
+              zoomRate: 0.015,
+              enableTransition: false
+            });
+          } else {
+            this.handleActions('zoomOut', {
+              zoomRate: 0.015,
+              enableTransition: false
+            });
+          }
+        });
+        on(document, 'keydown', this._keyDownHandler);
+        on(document, mousewheelEventName, this._mouseWheelHandler);
+      },
+      deviceSupportUninstall() {
+        off(document, 'keydown', this._keyDownHandler);
+        off(document, mousewheelEventName, this._mouseWheelHandler);
+        this._keyDownHandler = null;
+        this._mouseWheelHandler = null;
+      },
+      handleImgLoad(e) {
+        this.loading = false;
+      },
+      handleImgError(e) {
+        this.loading = false;
+        e.target.alt = '加载失败';
+      },
+      handleMouseDown(e) {
+        if (this.loading || e.button !== 0) return;
+  
+        const { offsetX, offsetY } = this.transform;
+        const startX = e.pageX;
+        const startY = e.pageY;
+        this._dragHandler = rafThrottle(ev => {
+          this.transform.offsetX = offsetX + ev.pageX - startX;
+          this.transform.offsetY = offsetY + ev.pageY - startY;
+        });
+        on(document, 'mousemove', this._dragHandler);
+        on(document, 'mouseup', ev => {
+          off(document, 'mousemove', this._dragHandler);
+        });
+  
+        e.preventDefault();
+      },
+      handleMaskClick() {
+        if (this.maskClosable) {
+          this.hide();
+        }
+      },
+      reset() {
+        this.transform = {
+          scale: 1,
+          deg: 0,
+          offsetX: 0,
+          offsetY: 0,
+          enableTransition: false
+        };
+      },
+      toggleMode() {
+        if (this.loading) return;
+  
+        const modeNames = Object.keys(Mode);
+        const modeValues = Object.values(Mode);
+        const index = modeValues.indexOf(this.mode);
+        const nextIndex = (index + 1) % modeNames.length;
+        this.mode = Mode[modeNames[nextIndex]];
+        this.reset();
+      },
+      prev() {
+        if (this.isFirst && !this.infinite) return;
+        const len = this.urlList.length;
+        this.index = (this.index - 1 + len) % len;
+      },
+      next() {
+        if (this.isLast && !this.infinite) return;
+        const len = this.urlList.length;
+        this.index = (this.index + 1) % len;
+      },
+      handleActions(action, options = {}) {
+        if (this.loading) return;
+        const { zoomRate, rotateDeg, enableTransition } = {
+          zoomRate: 0.2,
+          rotateDeg: 90,
+          enableTransition: true,
+          ...options
+        };
+        const { transform } = this;
+        switch (action) {
+          case 'zoomOut':
+            if (transform.scale > 0.2) {
+              transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+            }
+            break;
+          case 'zoomIn':
+            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+            break;
+          case 'clocelise':
+            transform.deg += rotateDeg;
+            break;
+          case 'anticlocelise':
+            transform.deg -= rotateDeg;
+            break;
+        }
+        transform.enableTransition = enableTransition;
+      }
+    },
+    mounted() {
+      this.deviceSupportInstall();
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+      // add tabindex then wrapper can be focusable via Javascript
+      // focus wrapper so arrow key can't cause inner scroll behavior underneath
+      this.$refs['el-image-viewer__wrapper'].focus();
+    },
+    destroyed() {
+      // if appendToBody is true, remove DOM node after destroy
+      if (this.appendToBody && this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    }
+  };
+  </script>