自定義vue圖片預覽縮放組件

<template>
    <div id='zoompic'>
        <div class="zoom-img">
            <img ref="Img" :src="imgurl" @mousedown="move">
            <span class="closeIcon" @click="closeModal" v-if="shwClo">&times;</span>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    props: {
        imgurl:''
    },
    components: {

    },
    data() {
        return {
            shwClo:true,//是否顯示關閉按鈕
            isMove:false,//是否可移動
            eLeft:0,
            eTop:0
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.initImg();
    },
    activated() {//該鉤子在進入當前路由時執行

    },
    deactivated (){//該鉤子在離開當前路由時執行

    },
    watch: {

    },
    methods: {
        closeModal(){
            this.$emit('close',true);
        },
        move(e){
            this.shwClo = false;
            e.preventDefault();
            e.stopPropagation();
            let odiv = e.target;//獲取目標元素
            let curtdv = e.target.parentElement;//獲取目標元素的父元素
            let disX,disY;
            if(curtdv.className == 'close-zoom')return;
            this.isMove = true;//按下才能移動
            //記錄鼠標相對元素的位置
            disX = e.clientX - this.eLeft;
            disY = e.clientY - this.eTop;
            document.onmousemove = (e)=>{ //鼠標按下並移動的事件
                e.preventDefault();
                e.stopPropagation();
                if(this.isMove){
                //用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
                this.eLeft = e.clientX - disX;
                this.eTop = e.clientY - disY;
                //移動當前元素
                //方式一：（需設置元素爲絕對定位）
                // odiv.style.left = this.eLeft + 'px';
                // odiv.style.top = this.eTop + 'px';

                //方式二：
                curtdv.style.webkitTransform = 'translate('+this.eLeft+'px,'+this.eTop+'px)';
                }else return;
            };
            document.onmouseup = (e) => {
                console.log("彈起");
                this.shwClo = true;
                this.isMove = false;
                document.onmousemove = null;
                document.onmousedown = null;
            };
        },
        //滾輪事件
        fnWheel(obj,callback){
            obj.onmousewheel = fn;
            if (obj.addEventListener) {
                obj.addEventListener('DOMMouseScroll', fn, false);
            };
            function fn(ev) {
                var oEvent = ev || window.event;
                var down = true;
                if (oEvent.detail) {
                    down = oEvent.detail > 0
                } else {
                    down = oEvent.wheelDelta < 0
                }
                if (callback) {
                    callback.call(this, down, oEvent);
                }
                if (oEvent.preventDefault) {
                    oEvent.preventDefault();
                }
                return false;
            };
        },
        initImg(){
            const winWidth = window.innerWidth;
            let oImg = this.$refs.Img;
            this.fnWheel(oImg,function(down, oEvent){
                var oldWidth = this.offsetWidth;
                var oldHeight = this.offsetHeight;
                var oldLeft = this.offsetLeft;
                var oldTop = this.offsetTop;
                var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
                var scaleY = (oEvent.clientY - oldTop) / oldHeight;
                if (down) {
                    if(this.offsetWidth < 60) return;//限制縮小尺寸
                    this.style.width = this.offsetWidth * 0.9 + "px";
                    this.style.height = this.offsetHeight * 0.9 + "px";
                } else {
                    if(this.offsetWidth >= winWidth*0.7) return;//限制最大尺寸
                    this.style.width = this.offsetWidth * 1.1 + "px";
                    this.style.height = this.offsetHeight * 1.1 + "px";
                }
                var newWidth = this.offsetWidth;
                var newHeight = this.offsetHeight;
                this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
                this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
            })
        }
    }
};
</script>

<style lang="scss">
#zoompic{
    position: fixed;
    top: 0;
    left: 0;
    z-index:999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    .zoom-img {
        max-width: 80vw;
        max-height: 80vh;
        position: relative;
        .closeIcon {
            width: 50px;
            height: 50px;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background: rgba(0,0,0,.5);
            position: absolute;
            border-radius: 50%;
            top: -20px;
            right: -20px;
        }
        img {
            width: 300px;
        }
    }
}
</style>