NanjingMuseumWuJinZang-PC/src/components/PaintingDetailBox.vue

<script setup>
import { ref, onMounted, computed } from 'vue'

const props = defineProps({
  direction: {
    type: String,
    default: "横",
  },
  url: {
    type: String,
    default: "",
  },
  bigUrl: {
    type: String,
    default: "",
  }
})

const isRow = computed(() => {
  return props.direction
})
// 画作是否超过了屏幕（可以拖动）
const isMove = ref(false)
const imgWidth = ref(0)
const imgHeight = ref(0)
const pageHeight = ref(0)
const zhouMove = ref(3)
const tiemrr = ref(-1)
// 画轴移动
const isFlag = ref(false)
const moveLoc = ref(0)
// 横轴左侧大盒子的宽度
const leftBoxWidth = ref(0)

const mousemoveFu = (e, flag) => {
  let ev = e || event
  if (isFlag.value && isMove.value) {
    if (isRow.value === "竖") {
      // 最大能往下移动的距离
      const maxNum = imgHeight.value - window.innerHeight

      // 向上是负  向下是正
      let temp = moveLoc.value + ev.movementY * (flag ? -5 : 1)

      if (-temp < 0) temp = 0
      else if (-temp >= maxNum) temp = -maxNum

      moveLoc.value = temp
    } else {
      // 最大能往右移动的距离
      const maxNum = imgWidth.value - leftBoxWidth.value
      // 向左是负 向右是正
      let temp = moveLoc.value + ev.movementX * (flag ? -5 : 1)
      if (-temp < 0) temp = 0
      else if (-temp >= maxNum) temp = -maxNum
      moveLoc.value = temp
    }
  }
}

onMounted(() => {
  const element = document.querySelector('#myElement')

  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      console.log(`Width changed to ${entry.contentRect.width}`)
      // 在这里执行你的逻辑
      // 判断画轴有没有超过屏幕
      const pageHeightWindow = window.innerHeight
      pageHeight.value = pageHeightWindow

      moveLoc.value = 0
      setTimeout(() => {
        if (isRow.value === "竖") {
          const dom = document.querySelector(".imgBox")
          if (dom && dom.offsetHeight > pageHeightWindow) {
            isMove.value = true
            imgWidth.value = dom.offsetWidth
            imgHeight.value = dom.offsetHeight
          }
        } else {
          const leftBoxWidthDom = document.querySelector(".leftBxo")
          const leftBoxWidthDomWidth = leftBoxWidthDom.offsetWidth
          leftBoxWidth.value = leftBoxWidthDomWidth
          const dom = document.querySelector(".imgBoxHH")
          if ( dom && dom.offsetWidth > leftBoxWidthDomWidth) {
            isMove.value = true
            imgWidth.value = dom.offsetWidth
            imgHeight.value = dom.offsetHeight
          }
        }
      }, 200)
      tiemrr.value = setInterval(() => {
        if (zhouMove.value >= 99) clearInterval(tiemrr.value)
        zhouMove.value = zhouMove.value + 1
      }, 30)
    }
  })

  resizeObserver.observe(element)

})
</script>

<template>
  <div
    id="myElement"
    class="box"
  >
    <div
      :class="`leftBxo ${isMove ? '' : isRow === '横' ? '' : 'leftBxoCenter'}`"
    >
      <!-- 左侧加号 -->
      <div
        class="addIcon"
        @click="lookBigImg"
      >
        <el-image
          :src="require('@/assets/images/painting-box-img/big-view.png')"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[props.bigUrl ? props.bigUrl : props.url]"
          fit="cover"
        />
        <!-- <img
          src="@/assets/images/painting-box-img/big-view.png"
          alt=""
        > -->
      </div>

      <!--  ---------竖------- 大盒子 -->
      <div
        v-if="isRow === '竖'"
        :class="`imgBox ${isMove ? '' : 'imgBoxMove'}`"
        :style="`clip-path: rect(0 100% ${zhouMove}% 0);
        transform: translateY(${moveLoc}px)
        `"
        @mousedown="isFlag = true"
        @mouseup="isFlag = false"
        @mouseleave="isFlag = false"
        @mousemove="mousemoveFu"
      >
        <!-- 画轴的移动 -->
        <img
          class="zhou"
          src="@/assets/images/painting-box-img/zhou.png"
          alt=""
          :style="`bottom:${100 - zhouMove}%`"
        >

        <img
          :src="`${props.url}`"
          alt=""
        >
      </div>

      <!-- ------------横----------大盒子 -->
      <div
        v-else
        :class="`imgBoxHH ${isMove ? '' : 'imgBoxHHMove'}`"
        :style="`clip-path: rect(0 ${zhouMove}% 100% 0);
        transform: translateX(${moveLoc}px) translateY(-50%)
        `"
        @mousedown="isFlag = true"
        @mouseup="isFlag = false"
        @mouseleave="isFlag = false"
        @mousemove="mousemoveFu"
      >
        <!-- 画轴的移动 -->
        <img
          class="zhou"
          src="@/assets/images/painting-box-img/zhouH.png"
          alt=""
          :style="`right:${100 - zhouMove}%`"
        >

        <img
          :src="`${props.url}`"
          alt=""
        >
      </div>

      <!-- 右侧小盒子 -->
      <div
        v-if="isMove"
        class="smImgBox"
      >
        <div
          class="smImgBoxMain"
          :style="`width:${imgWidth / 5}px; height:${imgHeight / 5}px`"
        >
          <div
            v-if="isRow === '竖'"
            class="smBoxBor"
            :style="`height:${pageHeight / 5}px;transform: translateY(${
              -moveLoc / 5
            }px)`"
            @mousedown="isFlag = true"
            @mouseup="isFlag = false"
            @mouseleave="isFlag = false"
            @mousemove="(e) => mousemoveFu(e, true)"
          />

          <div
            v-else
            class="smBoxBorHH"
            :style="`width:${leftBoxWidth / 5}px;transform: translateX(${
              -moveLoc / 5
            }px)`"
            @mousedown="isFlag = true"
            @mouseup="isFlag = false"
            @mouseleave="isFlag = false"
            @mousemove="(e) => mousemoveFu(e, true)"
          />
          <img
            :src="
              props.url
            "
            alt=""
          >
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.el-image-viewer__actions__inner .el-icon:last-child),
::v-deep(.el-image-viewer__actions__inner .el-icon:nth-last-child(2)){
  display: none;
}
::v-deep(.el-image-viewer__btn .el-icon){
  margin: auto 10px;
}
::deep(.el-image-viewer__actions){
  width: 200px;
}
::deep(.el-image-viewer__actions__inner){
  justify-content: center;
}
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .leftBxo {
    // background-color: aquamarine;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    position: relative;
    overflow: hidden;
    .addIcon {
      position: absolute;
      bottom: 50px;
      left: 50px;
      cursor: pointer;
      font-size: 30px;
    }

    // 竖大盒子
    .imgBox {
      cursor: grab;
      height: auto;
      overflow: hidden;
      width: 46%;
      // padding: 5% 3%;
      padding:15% 3% 5% 3%;
      white-space: nowrap;
      display: inline-block;
      background-image: url("@/assets/images/painting-box-img/ba.png");
      background-size: 95% 100%;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;

      .zhou {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
      }
      & > img {
        pointer-events: none;
        width: 100%;
        display: inline-block;
      }
    }
    .imgBoxMove {
      cursor: default;
      display: flex;
      align-items: center;
      margin: 0 auto;
    }

    // 横大盒子
    .imgBoxHH {
      cursor: grab;
      width: auto;
      overflow: hidden;
      height: 55%;
      padding: 3% 5%;
      white-space: nowrap;
      display: inline-block;
      background-image: url("@/assets/images/painting-box-img/baH.png");
      background-size: 100% 100%;
      position: relative;
      top: 50%;
      .zhou {
        position: absolute;
        right: 100%;
        top: 0;
        height: 100%;
      }
      & > img {
        pointer-events: none;
        height: 100%;
        display: inline-block;
      }
    }
    .imgBoxHHMove {
      cursor: default;
    }

    .smImgBox {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 10px 20px;
      .smImgBoxMain {
        overflow: hidden;
        position: relative;
        .smBoxBor {
          cursor: grab;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          border: 1px solid #fff;
        }
        .smBoxBorHH {
          cursor: grab;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          border: 1px solid #fff;
        }
        & > img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
  .leftBxoCenter {
    display: flex;
    align-items: center;
  }
}
</style>