js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽

html代码

<div class="upload-img-box" ref="moveWrap">
<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">
<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>
</div>
<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>
<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>
<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>
</div>

script代码

  data() {
        return {
          rotate: 0, //旋转角度
          multiples:0, //缩放大小
        }
  }，
  methods: {
    // 图片旋转
        toRotate(){           
                this.ratate+= 90;
                if (this.ratate >= 360) {
                    this.ratate= 0
                }     
        },
// 滚轮缩放
        rollImg($event,val){
            // $event.wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动
            if($event.wheelDelta == 120){
                this.toBIgChange()
            }else{
                this.toSmallChange()
            }
        },
toBIgChange() {
                if (this.multiples>= 300) {
                    return;
                }
                if(this.multiples+ 10 > 300){
                    this.multiples = 300
                }else{
                    this.multiples+=10
                }
          
        },
        // 缩小
        toSmallChange() {
                if(this.multiples<10) return;
                if(val - 10 < 10){
                    this.multiples = 10
                }else{
                    this.multiples-=10
                }
           
        },  
//图片拖拽
moveImg(e) {
            e.preventDefault()
            // 获取元素
            let imgWrap = this.$refs.moveWrap
            let img = this.$refs.img
            let x = e.pageX - img.offsetLeft //pageX 鼠标点击位置相对于网页左上角的水平偏移量 pageY 鼠标点击位置相对于网页左上角的垂直平偏移量
            let y = e.pageY  - img.offsetTop //offsetTop相对于其最近的非static父元素的上偏移量
            // 添加鼠标移动事件
            imgWrap.addEventListener('mousemove', move)
            function move (e) {
                img.style.left = e.pageX - x + 'px'
                img.style.top = e.pageY  - y + 'px'
            }
            // 添加鼠标抬起事件，鼠标抬起，将事件移除
            img.addEventListener('mouseup', () => {
                imgWrap.removeEventListener('mousemove', move)
            })
            imgWrap.addEventListener('mouseup', () => {
                imgWrap.removeEventListener('mousemove', move)
            })
            // 鼠标离开父级元素，把事件移除
            imgWrap.addEventListener('mouseout', () => {
                imgWrap.removeEventListener('mousemove', move)
            })
        },
  }
}```