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

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

全局组件BigImg如下

** 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);
}