记一下vue3中使用element-plus的弹框dialog组件实现拖拽效果

使用hook封装拖拽方法

let draging = false;
let dragDom: HTMLElement | null;
let dragpoint: { x: number, y: number };
function handleMouseUp() {
    draging = false;
    dragDom = null;
}
function handleMousemove(ev: MouseEvent) {
    if (draging) {
        let _dragdom = dragDom as HTMLElement;
        let sty = window.getComputedStyle(_dragdom, null);
        _dragdom.style.marginLeft = `${parseFloat(sty.marginLeft) + ev.clientX - dragpoint.x}px`;
        _dragdom.style.marginTop = `${parseFloat(sty.marginTop) + ev.clientY - dragpoint.y}px`;
        dragpoint = {
            x: ev.clientX,
            y: ev.clientY
        }
    }
}
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMousemove);
function bind(el: HTMLElement) {
    
    let dialogHeaderEl = el.querySelector('.el-dialog__header') as HTMLElement;
    dialogHeaderEl.addEventListener('mousedown', (ev: MouseEvent) => {
        let target = ev.target as HTMLElement;
        if (target.classList.contains('el-dialog__close')) {
            return;
        }
        draging = true;
        dragDom = el;
        dragpoint = {
            x: ev.clientX,
            y: ev.clientY
        }
    });
}
export default {
    bind
}

再使用dialog组件的页面

import dragDialog from "../../Hook/dragDialog";//引入封装的拖拽方法
  let dialogRef:any = ref("");//创建ref在dialog组件上通过ref="dialogRef"定义ref
    onMounted(() => {
      dragDialog.bind(dialogRef.value.dialogRef);//绑定该拖拽方法
    });