cloud-web-corejs 1.0.280 → 1.1.0-dev.4

package/src/components/VabUpload/image-viewer.vue

@@ -1,442 +1,442 @@
-<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>
-      <div class="big">
-        <!-- 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 urlArr"
-            v-if="i === index"
-            ref="img"
-            class="el-image-viewer__img"
-            :key="url"
-            :src="currentImg"
-            :style="imgStyle"
-            @load="handleImgLoad"
-            @error="handleImgError"
-            @mousedown="handleMouseDown"
-          />
-        </div>
-      </div>
-      <div class="small">
-        <div class="swiper-container small-slide">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide" v-for="(productImageDTO, pindex) in urlArr2" :key="productImageDTO + pindex" :class="{ on: swiperIndex == pindex }">
-              <img :src="productImageDTO" :data-bigsrc="pindex" />
-            </div>
-          </div>
-          <!-- 如果需要导航按钮 -->
-          <div class="swiper-button-prev"><i class="el-icon-arrow-left"></i></div>
-          <div class="swiper-button-next"><i class="el-icon-arrow-right"></i></div>
-        </div>
-      </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';
-import Swiper from 'swiper';
-import 'swiper/dist/css/swiper.min.css';
-import 'swiper/dist/js/swiper.min';
-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 {
-  name: 'elImageViewer',
-
-  props: {
-    urlList: {
-      type: Array,
-      default: () => []
-    },
-    zIndex: {
-      type: Number,
-      default: 9999
-    },
-    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 {
-      urlArr: [],
-      urlArr2: [],
-      index: this.initialIndex,
-      isShow: false,
-      infinite: true,
-      loading: false,
-      mode: Mode.CONTAIN,
-      transform: {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      },
-      swiperIndex: 0,
-      swiper: null
-    };
-  },
-  computed: {
-    isSingle() {
-      return this.urlArr.length <= 1;
-    },
-    isFirst() {
-      return this.index === 0;
-    },
-    isLast() {
-      return this.index === this.urlArr.length - 1;
-    },
-    currentImg() {
-      return this.urlArr[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: {
-    getHandleImage(imageDto, flag) {
-      if (typeof imageDto == 'string') {
-        return imageDto;
-      } else {
-        if (flag == 1) {
-          return imageDto.domain + imageDto.url;
-        } else if (flag == 2) {
-          return imageDto.domain + (imageDto.medium || imageDto.url);
-        }
-      }
-    },
-    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.urlArr.length;
-      this.index = (this.index - 1 + len) % len;
-      this.swiper.slideTo(this.index, 100);
-      this.swiperIndex = this.index;
-    },
-    next() {
-      if (this.isLast && !this.infinite) return;
-      const len = this.urlArr.length;
-      this.index = (this.index + 1) % len;
-      this.swiper.slideTo(this.index, 100);
-      this.swiperIndex = this.index;
-    },
-    handleActions(action, options = {}) {
-      if (this.loading) return;
-      const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      const { transform } = this;
-      let that = 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;
-    }
-  },
-  created() {
-    this.swiperIndex = this.index;
-    this.urlArr = this.urlList.map(imgDTO => {
-      return this.getHandleImage(imgDTO, 1);
-    });
-    this.urlArr2 = this.urlList.map(imgDTO => {
-      return this.getHandleImage(imgDTO, 2);
-    });
-  },
-  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();
-
-    let that = this;
-    let ff = this.urlArr2;
-    setTimeout(function() {
-      that.swiper = new Swiper('.small-slide', {
-        slidesPerView: 'auto',
-        spaceBetween: 10,
-        // loop: true,
-        slideToClickedSlide: true,
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
-        },
-        preventLinksProPagation: false,
-        on: {
-          click: function(event) {
-            let num = this.clickedIndex;
-            if (this.clickedIndex != undefined) {
-              that.index = Number(event.target.dataset.bigsrc);
-              that.swiperIndex = num;
-            } else {
-              console.log(event.target);
-            }
-          }
-        }
-      });
-    }, 200);
-  },
-  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>
-<style lang="scss" scoped>
-.el-image-viewer__wrapper {
-  .big {
-    height: calc(100vh - 92px);
-    position: relative;
-  }
-  .small {
-    padding: 12px;
-    background: none !important;
-    .swiper-container {
-      padding: 0 28px;
-      .swiper-slide {
-        width: 72px;
-        height: 67.5px;
-        img {
-          height: 67px;
-          width: 100%;
-          cursor: pointer;
-        }
-        &.on img {
-          border: solid 2px #fec171;
-          height: 63px;
-        }
-      }
-      .swiper-button-prev,
-      .swiper-button-next {
-        width: 22px;
-        height: 71.75px;
-        background: #ececec;
-        line-height: 71.75px;
-        text-align: center;
-        color: #666666;
-        font-size: 18px;
-        margin-top: 0;
-        top: 0;
-        opacity: 1;
-        &.swiper-button-disabled {
-          background: #ececec !important;
-        }
-      }
-      .swiper-button-prev {
-        left: 0;
-      }
-      .swiper-button-next {
-        right: 0;
-      }
-    }
-  }
-}
-</style>
+<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>
+      <div class="big">
+        <!-- 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 urlArr"
+            v-if="i === index"
+            ref="img"
+            class="el-image-viewer__img"
+            :key="url + '-' + i"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown"
+          />
+        </div>
+      </div>
+      <div class="small">
+        <div class="swiper-container small-slide">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="(productImageDTO, pindex) in urlArr2" :key="productImageDTO + pindex" :class="{ on: swiperIndex == pindex }">
+              <img :src="productImageDTO" :data-bigsrc="pindex" />
+            </div>
+          </div>
+          <!-- 如果需要导航按钮 -->
+          <div class="swiper-button-prev"><i class="el-icon-arrow-left"></i></div>
+          <div class="swiper-button-next"><i class="el-icon-arrow-right"></i></div>
+        </div>
+      </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';
+import Swiper from 'swiper';
+import 'swiper/dist/css/swiper.min.css';
+import 'swiper/dist/js/swiper.min';
+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 {
+  name: 'elImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 9999
+    },
+    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 {
+      urlArr: [],
+      urlArr2: [],
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      },
+      swiperIndex: 0,
+      swiper: null
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlArr.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlArr.length - 1;
+    },
+    currentImg() {
+      return this.urlArr[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: {
+    getHandleImage(imageDto, flag) {
+      if (typeof imageDto == 'string') {
+        return imageDto;
+      } else {
+        if (flag == 1) {
+          return imageDto.domain + imageDto.url;
+        } else if (flag == 2) {
+          return imageDto.domain + (imageDto.medium || imageDto.url);
+        }
+      }
+    },
+    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.urlArr.length;
+      this.index = (this.index - 1 + len) % len;
+      this.swiper.slideTo(this.index, 100);
+      this.swiperIndex = this.index;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlArr.length;
+      this.index = (this.index + 1) % len;
+      this.swiper.slideTo(this.index, 100);
+      this.swiperIndex = this.index;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      let that = 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;
+    }
+  },
+  created() {
+    this.swiperIndex = this.index;
+    this.urlArr = this.urlList.map(imgDTO => {
+      return this.getHandleImage(imgDTO, 1);
+    });
+    this.urlArr2 = this.urlList.map(imgDTO => {
+      return this.getHandleImage(imgDTO, 2);
+    });
+  },
+  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();
+
+    let that = this;
+    let ff = this.urlArr2;
+    setTimeout(function() {
+      that.swiper = new Swiper('.small-slide', {
+        slidesPerView: 'auto',
+        spaceBetween: 10,
+        // loop: true,
+        slideToClickedSlide: true,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        },
+        preventLinksProPagation: false,
+        on: {
+          click: function(event) {
+            let num = this.clickedIndex;
+            if (this.clickedIndex != undefined) {
+              that.index = Number(event.target.dataset.bigsrc);
+              that.swiperIndex = num;
+            } else {
+              console.log(event.target);
+            }
+          }
+        }
+      });
+    }, 200);
+  },
+  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>
+<style lang="scss" scoped>
+.el-image-viewer__wrapper {
+  .big {
+    height: calc(100vh - 92px);
+    position: relative;
+  }
+  .small {
+    padding: 12px;
+    background: none !important;
+    .swiper-container {
+      padding: 0 28px;
+      .swiper-slide {
+        width: 72px;
+        height: 67.5px;
+        img {
+          height: 67px;
+          width: 100%;
+          cursor: pointer;
+        }
+        &.on img {
+          border: solid 2px #fec171;
+          height: 63px;
+        }
+      }
+      .swiper-button-prev,
+      .swiper-button-next {
+        width: 22px;
+        height: 71.75px;
+        background: #ececec;
+        line-height: 71.75px;
+        text-align: center;
+        color: #666666;
+        font-size: 18px;
+        margin-top: 0;
+        top: 0;
+        opacity: 1;
+        &.swiper-button-disabled {
+          background: #ececec !important;
+        }
+      }
+      .swiper-button-prev {
+        left: 0;
+      }
+      .swiper-button-next {
+        right: 0;
+      }
+    }
+  }
+}
+</style>