zjugis_OA/client/src/components/PreviewImage/index.vue

<template>
  <div class="preView">
    <div class="preview_box">
      <div class="header" v-if="closeabled">
        <div class="icon_close">
          <el-icon @click="closeHandler"><Close /></el-icon>
        </div>
      </div>
      <div class="content" :style="{ height: closeabled ? 'calc(100% - 50px)' : '100%' }">
        <img ref="imgRef" :src="props.src" />
        <ul class="img_tool">
          <li @click="zoomHandler(1)">
            <el-icon><ZoomIn /></el-icon>
          </li>
          <li @click="zoomHandler(-1)">
            <el-icon><ZoomOut /></el-icon>
          </li>
          <li @click="rotateHandler(-1)">
            <el-icon><RefreshLeft /></el-icon>
          </li>
          <li @click="rotateHandler(1)">
            <el-icon><RefreshRight /></el-icon>
          </li>
          <li @click="scaleToOriginal">
            <el-icon><ScaleToOriginal /></el-icon>
          </li>
          <li @click="rotateHandler(0)">
            <el-icon><Refresh /></el-icon>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ImagePreview from './ImagePreview.ts'
defineOptions({
  name: 'PreView'
})
const props = withDefaults(
  defineProps<{
    src: string
    visiable: boolean
    fullScreen: boolean
    width: number
    height: number
    title: string
    closeabled: boolean
  }>(),
  {
    visiable: true,
    fullScreen: false,
    width: 60,
    height: 90,
    title: '资源预览',
    closeabled: false
  }
)
const emit = defineEmits<{
  (e: 'close')
}>()

const imgRef = ref<HTMLElement>()
let imagePreview: ImagePreview
const zoomHandler = (num: number) => {
  imagePreview.zoomHandler(num)
}
const rotateHandler = (num: number) => {
  imagePreview.rotateHandler(num)
}
const scaleToOriginalType = ref<boolean>(false)
const scaleToOriginal = () => {
  scaleToOriginalType.value = !scaleToOriginalType.value
  imagePreview.setScaleToOriginal(scaleToOriginalType.value)
}
const closeHandler = () => {
  emit('close')
}
onMounted(() => {
  imagePreview = new ImagePreview()
  imagePreview.bindMouseEvent(imgRef.value as HTMLElement)
})
</script>

<style lang="scss" scoped>
.preView {
  z-index: 99999999;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.5);
  > .preview_box {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    padding: 20px;
    padding-top: 10px;
    > .header {
      height: 50px;
      display: flex;
      padding: 0px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .icon_close {
        font-size: 32px;
        right: 20px;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        opacity: 0.6;
      }
    }
    > .content {
      height: 100%;
      padding: 0px 20px;
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      > img {
        display: block;
        cursor: pointer;
        user-drag: none;
        margin-top: 8%;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        &.scale {
          transition-duration: 0.2s;
        }
      }
      > .img_tool {
        display: flex;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        padding: 15px 25px;
        position: absolute;
        bottom: 10px;
        > li {
          color: #fff;
          font-size: 26px;
          line-height: 26px;
          padding: 0px 10px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>