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;
}
}
})
这里只贴了关键代码,需要补全缺少的变量才能运行。