vue实现a-model弹窗拖拽移动
通过自定义拖拽指令实现
实现效果
拖动顶部,可对整个弹窗实施拖拽(如果需要拖动底部、中间内容实现拖拽,把下面的ant-modal-header对应改掉就行)
代码实现
编写自定义指令
新建一个ts / js文件,用ts举例
import Vue from "vue"; // 自定义指令使弹窗可拖动 Vue.directive("drag-modal", (el, bindings, vnode) => { Vue.nextTick(() => { // 获取弹窗的属性 let { visible, destroyOnClose } = vnode.componentInstance as any; if (!visible) return; let modal: any = el.getElementsByClassName("ant-modal")[0]; let header: any = el.getElementsByClassName("ant-modal-header")[0]; header.style.cursor = "move"; // 移动到顶部时,鼠标变成“移动”图 // 存储上一次拖拽完成时的偏移数据 let left = 0; let top = 0; // 未定义 destroyOnClose 时,dom未被销毁,关闭弹窗再次打开,弹窗会停留在上一次拖动的位置 if (!destroyOnClose) { left = modal.left || 0; top = modal.top || 0; } // top 初始值为 offsetTop // 因为 modal 初始就有垂直偏移,水平方向没有(是用 margin 保证 modal 在中间的) if (typeof modal.left !== "number") { top = top || modal.offsetTop; } header.onmousedown = (e: any) => { let startX = e.clientX; let startY = e.clientY; el.onmousemove = (event) => { let endX = event.clientX; let endY = event.clientY; modal.left = endX - startX + left; // 记录实时偏移量,数字格式 modal.top = endY - startY + top; modal.style.left = modal.left + "px"; // 实时改变modal偏移 modal.style.top = modal.top + "px"; }; el.onmouseup = (event) => { left = modal.left; // 存储偏移量,便于下一次拖拽使用 top = modal.top; el.onmousemove = null; el.onmouseup = null; header.releaseCapture && header.releaseCapture(); // 释放捕捉鼠标或键盘事件 }; header.setCapture && header.setCapture(); // 捕获鼠标或键盘事件,使得即使鼠标移出元素范围或失去焦点,元素仍然可以接收这些事件 }; }); });
使用方式
使用
选择性添加destroyoncLose属性,添加此属性则弹窗每次打开会回到初始位置
引入
import "@/common/utils/drag-modal";
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。