element——UI el-dialog弹框拖拽

引入js

Vue.prototype.dropDialog = function (el){
    let dragDom = el.querySelector('.el-dialog');
    let dragDomHeader = el.querySelector('.el-dialog__header');
    let offsetLeft=0;
    let offsetTop=0;
    dragDomHeader.style.cursor = 'move';
    dragDomHeader._isDrag = false;
    // 鼠标按下事件
    // onmousedown事件绑定之所以在el-dialog__header上，是因为绑定在el-dialog时弹框中的表单会无法编辑
    dragDomHeader.onmousedown = (e) => {
        dragDomHeader._isDrag = true;
        // 鼠标相对元素的位置
        dragDomHeader._startX = e.clientX - offsetLeft;
        dragDomHeader._startY = e.clientY - offsetTop;
        e.preventDefault();
    };
    document.onmousemove = (e) => {
        if (dragDomHeader._isDrag) {
            // 鼠标的位置减去鼠标相对元素的位置得到元素的位置
            let _endX = e.clientX - dragDomHeader._startX;
            let _endY = e.clientY - dragDomHeader._startY;
            offsetLeft = _endX
            offsetTop = _endY
            dragDom.style.left = _endX + 'px';
            dragDom.style.top = _endY + 'px';
        }
    };
    document.onmouseup = () => {
        dragDomHeader._isDrag = false;
    };
}

html加上 @open="openDialog" ref="dialog"

 <el-dialog @open="openDialog" ref="dialog" :close-on-click-modal="false" :visible.sync="dialogFormVisible">

methods里调用

openDialog(){//弹框拖拽
                          this.dropDialog(this.$refs.dialog.$el)
                      },