vue实现在固定区域内鼠标轮滚放大缩小图片组件

<template>
    <div style="width: 100%;position: relative;overflow: hidden;text-align: center;border: 6px solid #f1f2f3;">
        <el-button size='mini' circle type="primary" @click="toBIgChange(0.25)" icon="el-icon-plus"
            style="position: absolute;top: 2px ;left: 2px;z-index: 999;"></el-button>
        <el-button size='mini' circle type="primary" @click="toSmallChange(0.25)" icon="el-icon-minus"
            style="position: absolute;top: 2px ;left: 30px;z-index: 999;"></el-button>
        <el-button size='mini' circle type="primary" @click="toRotateChange" icon="el-icon-refresh-right"
            style="position: absolute;top: 2px ;left: 64px;z-index: 999;"></el-button>
        <img id="img" :src="src" alt="" @mousedown.prevent="dropImage" @wheel.prevent="wheelFn"
            :style="{ transform: 'scale(' + multiples + ') rotate(' + deg + 'deg)' }">
    </div>
</template>
  
<script>
export default {
    props: ['src'],
    data() {
        return {
            multiples: 1,
            odiv: null,
            deg: 0
        }
    },
    mounted() {
        this.dropImage();


    },
    watch: {
        src(newValue, oldValue) {
            this.multiples = 1
            if (this.odiv !== null) {
                this.odiv.style.left = '0px';
                this.odiv.style.top = '0px';
            }
        },
    },
    methods: {
        wheelFn(e) {
            if (e.deltaY > 0) {
                // 鼠标向下滚动，图片缩小
                this.toSmallChange(0.1)
            } else {
                // 鼠标向上滚动，图片放大
                this.toBIgChange(0.1)
            }
            return false
        },
        toBIgChange(power) {
            if (this.multiples >= 2) {
                return;
            }
            this.multiples += power;
        },
        toRotateChange() {
            this.deg += 90
        },
        // 缩小
        toSmallChange(power) {
            if (this.multiples <= 0.75) {
                return;
            }
            this.multiples -= power;
        },
        // 拖拽
        dropImage(e) {
            console.log("拖拽", e);
            if (e === null) {
                return
            }

            this.odiv = e.target;  //获取目标元素  
            console.log('odiv',this.odiv)
            //算出鼠标相对元素的位置
            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;

                //绑定元素位置到positionX和positionY上面
                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;
            };
        },

    }
}
</script>

<style scoped>
img {
    width: 100%;
    position: relative;
    cursor: move;
}
</style>