vue2、vue3 自定义指令实现可移动模态框效果
此效果通过 vue 指令方式实现模态框可拖拽移动。
参考官网指令介绍:
vue2 自定义指定
vue3 自定义指定
-
在 drag.js 文件中使用 Vue.directive() 注册一个全局自定义指令
v-drag
/************* vue2 *************/ import Vue from 'vue'; // 1.参数一:指令的名称,定义时指令前面不需要写v- // 2.参数二:是一个对象,该对象中有相关的操作函数 // 3.在调用的时候必须加v- const drag = Vue.directive('drag', { inserted(el) { el.addEventListener('mousedown', e => { el.style.cursor = 'pointer' let x = e.pageX - el.offsetLeft let y = e.pageY - el.offsetTop const move = (e) => { el.style.left = e.pageX - x + 'px' el.style.top = e.pageY - y + 'px' } document.addEventListener('mousemove', move) window.addEventListener('mouseup', () => { el.style.cursor = '' document.removeEventListener('mousemove', move) }) }) } }) export default drag;
/************* vue3 *************/ const drag = (app: any) => app.directive('drag', { mounted(el: HTMLElement) { el.addEventListener('mousedown', (e: MouseEvent) => { el.style.cursor = 'pointer' let x = e.pageX - el.offsetLeft let y = e.pageY - el.offsetTop const move = (e: MouseEvent) => { el.style.left = e.pageX - x + 'px' el.style.top = e.pageY - y + 'px' } window.addEventListener('mousemove', move) window.addEventListener('mouseup', () => { el.style.cursor = '' window.removeEventListener('mousemove', move) }) }) } }) export default drag;
-
在 main.js 中引入该指令:
/************* vue2 *************/ import './utils/drag'
/************* vue3 *************/ import './utils/drag' const app = createApp(App) drag(app)
-
在需要实现拖拽的元素中,加入指令:
v-drag
注意:
给需要拖拽的元素加上绝对定位,图像、链接需要设置 draggable 为 false。
本文中的拖拽是指模态框等自定义弹框的拖动效果,并非元素属性 draggable 的拖拽效果,有兴趣的小伙伴可以自行研究 draggable文档