Vue/原生JS实现图片鼠标拖拽，滚轮放大缩小

组件：

<template>
  <div>
    <img :src="src" :alt="alt" @click.stop="open()" :width="width" :height="height" title="点击查看图片"
         :id="'vc-imgself-img-'+attach">
    <div class="full-img" v-show="show">
      <img :src="src" alt="" class="img-state" :alt="alt || ''" @mousewheel="bigimg(this)" id="image" draggable="false"
           @mousedown.prevent="dropImage" style="position:fixed">
      <div class="btns row">
        <button type="button" name="button" class="btn btn-primary" @click.stop="leftRevolve()">向左旋转</button>
        <button type="button" name="button" class="btn btn-primary" @click.stop="rightRevolve()">向右旋转</button>
        <button type="button" name="button" class="btn btn-primary" @click.stop="close()">关闭</button>
      </div>
    </div>
  </div>
</template>
 
<script>
  import $ from 'jquery'
 
  export default {
    props: {
      src: {
        type: String
      },
      width: {
        default: 60
      },
      height: {
        default: 60
      },
      alt: {
        default: '图片加载失败'
      },
      attach: {
        type: String,
        default: 'name'
      }
    },
    data() {
      return {
        show: false,
        deg: 0,
        odiv: null,
        powerw: 1.0,
        positionX: null,
        positionY: null,
        powerh: 1.0
      }
    },
    methods: {
      bigimg() {
        if (event.wheelDelta > 0) {
          this.powerh = this.powerh * 1.15
          this.powerw = 1.15 * this.powerw
        } else {
          this.powerh = this.powerh * 0.85
          this.powerw = 0.85 * this.powerw
        }
        this.imgState()
      },
      dropImage(e) {
        if (e === null) {
          return
        }
        this.odiv = e.target;
        let disX = e.clientX - this.odiv.offsetLeft;
        let disY = e.clientY - this.odiv.offsetTop;
        document.onmousemove = (e) => {
          let left = e.clientX - disX;
          let top = e.clientY - disY;
          this.positionX = top;
          this.positionY = left;
          this.odiv.style.left = left + 'px';
          this.odiv.style.top = top + 'px';
        };
        document.onmouseup = (e) => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
      open() {
        this.deg = 0
        this.powerw = 0.7
        this.powerh = 0.8
        $('.full-img').css({
          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
        })
        $('.container').css({
          'opacity': '1'
        })
        this.show = true
      },
      close() {
        this.show = false
      },
      leftRevolve() {
        //tag
        this.deg -= 90
        this.imgState()
      },
      rightRevolve() {
        //tag
        this.deg += 90
        this.imgState()
      },
      imgState() {
        $('.img-state').css({
          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.powerh + ' ,' + this.powerw + ')'
        })
 
      }
    },
  }
</script>
<style media="screen">
  .full-img {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
 
  .btns {
    position: fixed;
    bottom: 100px;
    height: auto;
  }
 
  .btns button {
    margin-right: 20px;
  }
 
  .img-state {
 
  }
</style>

引用使用：

<img-self-plus :width="200" :height="200" :src="solveModal.preData.defectImg"></img-self-plus>