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" @contextmenu.prevent.stop="clearStyle">
      <img :src="currentImageSrc" 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>
        <button type="button" name="button" class="btn btn-primary" @click.stop="previousPage()">上一页</button>
        <button type="button" name="button" class="btn btn-primary" @click.stop="nextPage()">下一页</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'
      },
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        show: false,
        deg: 0,
        odiv: null,
        powerw: 1.0,
        container:null,
        positionX: null,
        positionY: null,
        powerh: 1.0,
        currentImageSrc:this.src
      }
    },
    ready(){
      const elementsToMount = document.getElementsByClassName("full-img");
      this.container = document.createElement('div');
      this.container.style.height = '0px'
      // 将要挂载的元素放入新创建的 div中
      for (let i = 0; i < elementsToMount.length; i++) {
        this.container.appendChild(elementsToMount[i]);
      }
      // 将新创建的 div 挂载到 body 上
      document.body.appendChild(this.container);
    },
    beforeDestroy(){
      // 销毁挂载的
      if (this.container && this.container.parentNode) {
        this.container.parentNode.removeChild(this.container);
      }
    },
    methods: {
      nextPage() {
        console.log(this.list)
        //当前图片，是最后一张图片
        if (this.currentImageSrc=== this.list[this.list.length - 1].f_overall_path) {
            this.currentImageSrc= this.list[0].f_overall_path
          } else {
          for (let i = 0; i < this.list.length; i++) {
            if (this.currentImageSrc=== this.list[i].f_overall_path) {
              this.currentImageSrc= this.list[i + 1].f_overall_path
              break
            }
          }
        }

      },
      previousPage() {
        console.log(this.list)
        //当前图片，是第一张图片
        if (this.currentImageSrc === this.list[0].f_overall_path) {
          this.currentImageSrc= this.list[this.list.length - 1].f_overall_path
        } else {
          for (let i = 0; i < this.list.length; i++) {
            if (this.currentImageSrc=== this.list[i].f_overall_path) {
              this.currentImageSrc= this.list[i - 1].f_overall_path
              break
            }
          }
        }
      },
      clearStyle(e){
        if (e === null) {
          return
        }
        this.odiv = document.getElementById('image')
        this.odiv.style.left = 500 + 'px';
        this.odiv.style.top = -150 + 'px';
      },
      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" scoped>
  .full-img {
    position: fixed;
    width: 100%;
    /*height: 1000px;*/
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1070;
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    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="120" :height="160" :src="row.url"></img-self-plus><