qjkankan_v1.1.1/packages/qjkankan-editor/src/views/material/popup/imagePreviewer.vue

<template>
  <popup v-if="ifShow">
    <div class="preview-wrapper">
      <div class="title">
        <i class="iconfont icon-material_image title-icon"/>
        {{imageTitleList[currentIndex]}}
      </div>
      <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
      <img
        class="image"
        :src="imageList[currentIndex]"
        :style="imageStyle"
        @wheel.prevent="onImageWheel"
      />
      <div class="toolbar">
        <i
          class="iconfont icon-material_preview_previous hover-tips" :class="{disabled: currentIndex === 0}" @click="onClickPrevious()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.prev`)}}</div>
          </div>
        </i>
        <i class="iconfont icon-material_preview_next1 hover-tips append-splitter" :class="{disabled: currentIndex === imageList.length - 1}" @click="onClickNext()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.next`)}}</div>
          </div>
        </i>
        <i v-if="canScale" class="iconfont icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.zoom_in`)}}</div>
          </div>
        </i>
        <i v-if="canScale" class="iconfont icon-material_preview_narrow hover-tips" @click="onClickZoomOut()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.zoom_out`)}}</div>
          </div>
        </i>
        <i class="iconfont icon-material_preview_next hover-tips-warn" @click="onClickDelete()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.delete`)}}</div>
          </div>
        </i>
        <i v-if="canFullScreen && objectFit === 'scale-down'" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.fullscreen`)}}</div>
          </div>
        </i>
        <i v-if="canFullScreen && objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
          <div>
            <div class="remark">{{$i18n.t(`material.components.cancel_fullscreen`)}}</div>
          </div>
        </i>
      </div>
    </div>
  </popup>
</template>

<script>
import Popup from "@/components/shared/popup";

export default {
  props: {
    imageTitleList: {
      type: Array,
      default: () => {
        return [
          'aaa',
          'bbb'
        ]
      }
    },
    imageList: {
      type: Array,
      default: () => {
        return [
          'https://ossxiaoan.4dage.com/720yun_fd_manage/fodder/20220125_114634855.jpg',
          'https://ossxiaoan.4dage.com/720yun_fd_manage/fodder/20220125_142545584.jpg',
        ]
      }
    },
    canScale: {
      type: Boolean,
      default: true
    },
    canFullScreen: {
      type: Boolean,
      default: true
    },
  },
  components:{
    Popup
  },
  data(){
    return {
      ifShow: false,
      currentIndex: 0,
      scaleRate: 1,
      objectFit: 'scale-down',
    }
  },
  computed: {
    imageStyle() {
      return {
        transform: `scale(${this.scaleRate})`,
        objectFit: this.objectFit,
      }
    }
  },
  watch: {
    imageList: {
      handler: function (newList) {
        if (newList.length - 1 < this.currentIndex) {
          this.currentIndex = newList.length - 1
        }
      }
    }
  },
  methods:{
    show(index) {
      Number.isSafeInteger(index) && (this.currentIndex = index)
      this.ifShow = true
    },
    onImageWheel(e) {
      if (e.deltaY < 0) {
        this.scaleRate = this.scaleRate * 1.1
      } else {
        this.scaleRate = this.scaleRate * 0.9
      }
    },
    onClickPrevious() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    onClickNext() {
      if (this.currentIndex < this.imageList.length - 1) {
        this.currentIndex++
      }
    },
    onClickZoomIn() {
      this.scaleRate = this.scaleRate * 1.1
    },
    onClickZoomOut() {
      this.scaleRate *= 0.9
    },
    onClickDelete() {
      this.$emit('click-delete', this.currentIndex)
    },
    onClickFullScreen() {
      this.scaleRate = 1
      this.objectFit = 'contain'
    },
    onClickCancelFullScreen() {
      this.scaleRate = 1
      this.objectFit = 'scale-down'
    },
    onClickClose() {
      this.ifShow = false
    }
  },
  mounted() {
    this.$bus.on('clickEsc',()=>{
      this.onClickClose()
    })
  },
}
</script>

<style scoped lang="less">
  .preview-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .title {
      position: absolute;
      top: 16px;
      left: 30px;
      z-index: 2;
      height: 36px;
      font-size: 14px;
      color: #FFFFFF;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 16px;
      padding-right: 16px;
      .title-icon {
        margin-right: 6px;
      }
    }
    .close-btn {
      position: absolute;
      top: 16px;
      right: 30px;
      width: 36px;
      height: 36px;
      z-index: 2;
      cursor: pointer;
    }
    .toolbar {
      position: absolute;
      bottom: 147px;
      left: 50%;
      transform: translateX(-50%);
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 43px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 8px;
      z-index: 2;
      .iconfont {
        cursor: pointer;
        color: white;
        margin-right: 36px;
        font-size: 22px;
        &.disabled {
          opacity: 0.5;
          pointer-events: none;
        }
        &:last-child {
          margin-right: 0;
        }
      }
      .append-splitter {
        &::after {
          pointer-events: none;
          content: "|";
          position: absolute;
          right: -18px;
          top: -4px;
          font-size: 20px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
    }
    .image {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
  }

.hover-tips, .hover-tips-warn {
  position: relative;
  font-size: 18px;

  &:hover {
    > div {
      display: block;
    }
  }

  // tip的方框
  > div {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: default;
    display: none;
    z-index: 10000;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -60px;
    color: #fff;
    pointer-events: none;
    text-align: center;
    word-break: keep-all;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 3px;
    // tip的箭头
    &::before {
      border: 7px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.6);
      width: 0;
      height: 0px;
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
    }

    // tip的文字
    .remark {
      line-height: 2.5;
      color: #fff;
    }
  }
}
</style>