外包做网站不满意,机关网站建设 方案,wordpress对接steam,wordpress网站的优化通过自定义拖拽指令实现
实现效果
拖动顶部#xff0c;可对整个弹窗实施拖拽#xff08;如果需要拖动底部、中间内容实现拖拽#xff0c;把下面的ant-modal-header对应改掉就行#xff09; 代码实现
编写自定义指令
新建一个ts / js文件#xff0c;用ts举例
import V…通过自定义拖拽指令实现
实现效果
拖动顶部可对整个弹窗实施拖拽如果需要拖动底部、中间内容实现拖拽把下面的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(); // 捕获鼠标或键盘事件使得即使鼠标移出元素范围或失去焦点元素仍然可以接收这些事件};});
});
使用方式
使用
a-modalv-drag-modal:visiblevisible:destroyOnClosetrue...选择性添加destroyoncLose属性添加此属性则弹窗每次打开会回到初始位置
引入
import /common/utils/drag-modal;
