点击图片并实现滑轮能实现图片的放大和缩小

最新推荐文章于 2024-08-12 15:07:29 发布

朱留坤

最新推荐文章于 2024-08-12 15:07:29 发布

阅读量151

点赞数 4

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/zhu_liu_kun/article/details/139059440

版权

<template>
  <div class="drag-outer"
       ref="dragWrap"
       :style="'width:'+imgWidth"
       @mouseenter="isHover = true"
       @mouseleave="isHover = isMousedown = false"
       @mousemove="dragMousemove">
    <div class="drag-inner"
         ref="dragElement"
         @mousedown="dragMousedown"
         @mouseup.stop="isMousedown = false">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      imgWidth: {
        type:String,
        default () {
          return '400px'
        }
      },
      scaleZoom: {
        type: Object,
        default () {
          return {
            max: 5,
            min: 0.2
          }
        }
      }
    },
    data() {
      return {
        isMousedown: false,
        isHover: false,
        moveStart: {},
        translate: {x: 0, y: 0},
        scale: 1
      }
    },
    mounted() {
      window.addEventListener('mousewheel',this.handleScroll,false)
    },
    methods: {
      handleScroll(e) {
        if (this.isHover) {
          let speed = e.wheelDelta / 120
          if (e.wheelDelta > 0 && this.scale < this.scaleZoom.max) {
            this.scale += 0.2 * speed
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
          } else if (e.wheelDelta < 0 && this.scale > this.scaleZoom.min) {
            this.scale += 0.2 * speed
            this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
          }
        }
      },
      dragMousedown() {
        this.moveStart.x = event.clientX
        this.moveStart.y = event.clientY
        this.isMousedown = true
      },
      dragMousemove() {
        if (this.isMousedown) {
          this.translate.x += (event.clientX - this.moveStart.x) / this.scale
          this.translate.y += (event.clientY - this.moveStart.y) / this.scale
          this.$refs.dragElement.style.transform = `scale(${this.scale}) translate(${this.translate.x}px, ${this.translate.y}px)`
          this.moveStart.x = event.clientX
          this.moveStart.y = event.clientY
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .drag-outer {
    overflow: hidden;
    height:500px; float: left;
    display: flex;
    background-color:#fff;
    justify-content: center;
    align-items: center;
    .drag-inner {
      transform-origin: center center;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: move;
      user-select: none;
      width:100%;
      height:100%;
      >* {
        -webkit-user-drag: none;
        user-drag: none;
      }
      img{object-fit:contain; width:100%; height:100%}
    }
  }
</style>

<template>
  <div>
    <inc_imgsvg v-if="srcImg" :imgWidth="'100%'">
	  <img :src="srcImg" alt="">
	</inc_imgsvg>
  </div>
</template>

<script>
import inc_imgsvg from "@/components/customImg/index";
export default {
    name: "index",
    components: {inc_imgsvg},
    data(){
      return{
        srcImg:'https://xxx.png'
      }
    }
}
</script>

这是点击放大后你可以这样用

  <el-dialog v-model="dialogVisible">
        <span style="font-size: 22px; font-weight: bold">
          {{ enlargedName }}</span
        >
        <magnifying :imgWidth="'100%'">
          <img
            style="width: 100%"
            :src="getExternal(mangImageUrl)"
            alt="Preview Image"
          />
        </magnifying>
      </el-dialog>