vue3自定义指令实现ant-design的modal组件的拖拽

793次阅读

antd-vue的modal组件不能拖拽移动位置，于是我通过vue的自定义组件实现了拖拽

// main.js

// main.js
const app = createApp(App);

// 定义指令，实现modal拖拽
     }
    }
});

app.use(Antd).mount('#app');

接下来就可以使用定义好的v-drag-modal指令了：

const app = createApp(App);

// 定义指令，实现modal拖拽
app.directive('drag-modal', (el) => {
    let mouseDownEvt;

    if (mouseDownEvt) {
        return;
    }

    const moveModal = (e) => {
        const modal = el.parentNode.parentNode.parentNode;
        let offsetX = el.offsetLeft;    // padding和maring造成的偏移
        let offsetTop = e.clientY - mouseDownEvt.offsetY;
        let offsetLeft = e.clientX - mouseDownEvt.offsetX - offsetX;
        let maxOffsetTop = window.innerHeight - modal.clientHeight;
        let maxOffsetLeft = window.innerWidth - modal.clientWidth;

        // 避免移动到窗口外面去
        if (offsetTop < 0) offsetTop = 0;
        if (offsetLeft < 0) offsetLeft = 0; if (offsetTop > maxOffsetTop) offsetTop = maxOffsetTop;
        if (offsetLeft > maxOffsetLeft) offsetLeft = maxOffsetLeft;

        modal.style.right = "auto";
        modal.style.left = offsetLeft + 'px';
        modal.style.top = offsetTop + 'px';
    }

    el.onmousedown = (evt) => {
        mouseDownEvt = evt;
        document.onmousemove = moveModal;
        document.onmouseup = (e) => {
            document.onmousemove = null;
        }
    }
})

这里只贴了关键代码，需要补全缺少的变量才能运行。

发表于：Javascript/前端、技术分享

2023-04-11

# Vue