【代码实现--图片放大、缩小、旋转、拖拽】

记录一下【代码实现–图片放大、缩小、旋转、拖拽】
需求：点击图片，查看实际图片，并且 可以放大、缩小、旋转、拖拽
实现：全局组件BigImg，接受图片路径参数，显示图片，拖拽使用自定义指令 v-dragImage实现（改变margin）
问题： /不限制图片大小，实现居中后，拖拽的距离和图片移动位置不同,然后看了一下element image大图预览拖拽的源码，发现有个初始 let tOffsetX=0, tOffsetY= 0;/

全局组件BigImg如下

<template>
    <!-- 过渡动画 -->
    <transition name="fade-enter-active">
        <div class="img-view">
            <!-- 遮罩层 -->
            <div class="img-layer" @click.stop.prevent="bigImg"></div>
            <div class="img-box">
                <!-- 图片 -->
                <img v-dragImage :style="imgStyle" :src="imgSrc" draggable="false" alt="没有图片资源"/>
            </div>
            <div class="btn-box">
                <div @click.stop="tobig"><i class="el-icon-zoom-in"></i></div>
                <div @click.stop="tosmall"><i class="el-icon-zoom-out"></i></div>
                <div @click.stop="toleft"><i class="el-icon-refresh-left"></i></div>
                <div @click.stop="toright"><i class="el-icon-refresh-right"></i></div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default {
        name: "BigImg",
        props: ["imgSrc"], //接受图片地址
        data() {
            return {
                imgScale:1,
                imgRotate:0,
                imgStyle:{
                    transform: 'scale(1) rotate(0deg)'
                }
            };
        },
        methods: {
            bigImg() {
                console.log('点击事件')
                // 发送事件
                this.$emit("clickit");
            },
            tobig(){
                this.imgScale = (((this.imgScale * 10) + 2)/10).toFixed(1);
                this.imgStyle = {
                    transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
                }
            },
            tosmall(){
                this.imgScale = (((this.imgScale * 10) - 2)/10).toFixed(1);
                this.imgStyle = {
                    transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
                }
            },
            toleft(){
                this.imgRotate = this.imgRotate - 90;
                this.imgStyle = {
                    transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
                }
            },
            toright(){

                this.imgRotate = this.imgRotate + 90;
                this.imgStyle = {
                    transform: 'scale('+this.imgScale+') rotate('+this.imgRotate+'deg)'
                }
            },
        },
    };
</script>
<style scoped>
    /* bigimg */
    .img-view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }
    /*遮罩层样式*/
    .img-view .img-layer {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .7;
        background: #000;
    }
    .img-view .img-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*不限制图片大小，实现居中*/
    .img-box  img {
        transform: scale(1) rotate(0deg);
        margin-left: 0px;
        margin-top: 0px;
        max-height: 100%;
        max-width: 100%;
        overflow-clip-margin: content-box;
        overflow: clip;
    }
    .img-view .btn-box{
        position: absolute;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        width: 282PX;
        height: 44PX;
        padding: 0 23px;
        background-color: #606266;
        border-color: #fff;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        opacity: .8;
        cursor: pointer;
    }
    .img-view .btn-box i{
        font-size: 30PX;
        color: #ffffff;
    }

</style>

** v-dragImage自定义指令如下**

const dragImage = {
    // 指令的定义
    bind: function (el) {
        let  tOffsetX=0,
            tOffsetY= 0;
        let dragBox = el;   //获取当前元素
        dragBox.onmousedown = (e) => {
            console.log(e)
            let oEvent = e || event;
            oEvent.stopPropagation();
            let offsetX = tOffsetX;
            let offsetY = tOffsetY;

            let startX = oEvent.pageX;
            let startY = oEvent.pageY;
            document.onmousemove = e => {
                var oEvent = e || event;
                var l = offsetX + oEvent.pageX - startX;
                var t = offsetY + oEvent.pageY - startY;
                tOffsetX = l;
                tOffsetY = t;
                dragBox.style.marginLeft = l+'px';
                dragBox.style.marginTop = t+'px';
            };
            document.onmouseup = (e) => {
                console.log('onmouseup')
                document.onmousemove = null;
                document.onmouseup = null;
                dragBox.releaseCapture && dragBox.releaseCapture();
            };
            dragBox.setCapture && dragBox.setCapture();
            return false;

        };
    }
};
export default (Vue) => {
    Vue.directive('dragImage', dragImage);
}