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">旋轉(zhuǎn)</span></div>
</div>

script代碼

  data() {
        return {
          rotate: 0, //旋轉(zhuǎn)角度
          multiples:0, //縮放大小
        }
  }，
  methods: {
    // 圖片旋轉(zhuǎn)
        toRotate(){           
                this.ratate+= 90;
                if (this.ratate >= 360) {
                    this.ratate= 0
                }     
        },
// 滾輪縮放
        rollImg($event,val){
            // $event.wheelDelta統(tǒng)一為±120蜗帜，其中正數(shù)表示為向上滾動恋拷，負數(shù)表示向下滾動
            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 鼠標點擊位置相對于網(wǎng)頁左上角的水平偏移量 pageY 鼠標點擊位置相對于網(wǎng)頁左上角的垂直平偏移量
            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)
            })
        },
  }
}```