vue自定义事件 div 拖拽方法缩小

 

  在main.js  引用

// 引入拖动js
import dragMove from "./utils/dragMove.js"

 创建 drawmove.js 

export default (app) => {
    app.directive('dragMove', (el, binding) => {

        const DragVindow = el.querySelector(binding.value.DragVindow)

        // 按下鼠标处理事件
        const DragButton = el.querySelector(binding.value.DragButton)

        // 放大缩小dom
        const dragIcon = el.querySelector(binding.value.dragIcon)



        DragButton.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - DragButton.offsetLeft
            const disY = e.clientY - DragButton.offsetTop
            document.onmousemove = (e) => {
                // 通过事件委托，计算移动的距离
                let left = e.clientX - disX
                let top = e.clientY - disY


                // 设置当前元素
                DragVindow.style.cssText += `;left:${left}px;top:${top}px;`
            }
            document.onmouseup = () => {
                document.onmousemove = null
                document.onmouseup = null
            }
        }

        //用let 会报错
        var disX = 0; //鼠标按下时光标的X值

        var disY = 0; //鼠标按下时光标的Y值

        var disW = 0; //拖拽前div的宽

        var disH = 0; // 拖拽前div的高
        dragIcon.onmousedown = function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var ev = ev || window.event;

            disX = ev.clientX; // 获取鼠标按下时光标x的值

            disY = ev.clientY; // 获取鼠标按下时光标Y的值

            disW = DragButton.offsetWidth; // 获取拖拽前div的宽

            disH = DragButton.offsetHeight; // 获取拖拽前div的高
            // console.log(disW, disY, "111");
            document.onmousemove = function (ev) {
                var ev = ev || window.event;

                //拖拽时为了对宽和高 限制一下范围，定义两个变量

                var W = ev.clientX - disX + disW;

                var H = ev.clientY - disY + disH;

                if (W < 100) {
                    W = 100;
                }

                if (W > 1800) {
                    W = 1800;
                }

                if (H < 100) {
                    H = 100;
                }

                if (H > 1000) {
                    H = 1000;
                }

                DragButton.style.width = W + "px"; // 拖拽后物体的宽

                DragButton.style.height = H + "px"; // 拖拽后物体的高
            };

            document.onmouseup = function () {
                document.onmousemove = null;

                document.onmouseup = null;
            };
        };
    })
}

完整vue代码  （可能有一些其他带啊吗）