1.介绍
在 web 开发中,有时我们需要让用户能够拖拽页面上的元素。Vue 提供了一个强大的机制,允许我们创建自定义指令来实现这种功能。自定义指令可以直接操作 DOM 元素,使其具有更强的灵活性和可控性
2. 实现自定义指令
javascript
export default {
bind(el, binding) {
let startX, startY, initialX, initialY;
function onMouseDown(e) {
startX = e.clientX;
startY = e.clientY;
initialX = el.offsetLeft;
initialY = el.offsetTop;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mouseleave', onMouseLeave);
e.preventDefault();
}
function onMouseMove(e) {
const moveX = e.clientX - startX;
const moveY = e.clientY - startY;
const elRect = el.getBoundingClientRect();
const elementWidth = elRect.width;
const elementHeight = elRect.height;
let newLeft = initialX + moveX;
let newTop = initialY + moveY;
const maxRight = window.innerWidth - elementWidth;
const maxBottom = window.innerHeight - elementHeight - 1;
if (binding.value?.axisy) {
newLeft = maxRight;
} else {
newLeft = Math.max(0, Math.min(newLeft, maxRight));
}
if (binding.value?.axisx) {
newTop = maxBottom;
} else {
newTop = Math.max(110, Math.min(newTop, maxBottom)); // 防止溢出,并且不让顶部少于 110px
}
el.style.left = `${newLeft}px`;
el.style.top = `${newTop}px`;
if (binding.value?.callback) {
binding.value.callback({
top: newTop,
bottom: maxBottom - newTop,
left: newLeft,
right: maxRight - newLeft,
});
}
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mouseleave', onMouseLeave);
}
function onMouseLeave() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mouseleave', onMouseLeave);
}
el.addEventListener('mousedown', onMouseDown);
el._cleanup = () => {
el.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mouseleave', onMouseLeave);
};
},
unbind(el) {
el._cleanup();
},
};
3.代码说明
bind
方法:这个方法在指令绑定到元素时调用。我们在这里初始化了一些变量,并定义了鼠标事件处理函数- 事件处理函数 :
onMouseDown
、onMouseMove
、onMouseUp
和onMouseLeave
分别处理鼠标按下、移动、抬起和离开事件。 - 事件监听器管理 :在
bind
方法中添加事件监听器,并在unbind
方法中移除它们,以确保指令解绑时不会留下多余的事件监听器。
4. 使用指令
你可以在组件中使用这个指令:
javascript
<template>
<div v-drag="{ axisx: false, axisy: false, callback: onDrag }" style="position: absolute;">
拖拽我
</div>
</template>
<script>
import drag from './directives/drag';
export default {
directives: {
drag,
},
methods: {
onDrag(pos) {
console.log('拖拽位置:', pos);
},
},
};
</script>
在这个示例中,我们将
v-drag
指令应用到一个div
元素上,通过设置axisx
和axisy
来控制拖拽方向,并在拖拽时调用callback
处理函数。