vue实现鼠标滚动图片放大缩小拖拽

1.封装可放大缩小拖拽组件

<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>

2.引用组件实现效果

<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>