vue实现长按事件
实现长按事件的基本思路
在Vue中实现长按事件，可以通过监听mousedown和touchstart事件开始计时，在mouseup、mouseleave或touchend事件中清除计时。当按住时间超过设定阈值时触发长按回调。
使用自定义指令实现
创建自定义指令v-longpress，封装长按逻辑：
Vue.directive('longpress', {
bind(el, binding) {
let pressTimer = null;
const handler = binding.value;
const threshold = binding.arg || 1000; // 默认1秒
const start = (e) => {
if (pressTimer === null) {
pressTimer = setTimeout(() => {
handler(e);
}, threshold);
}
};
const cancel = () => {
if (pressTimer !== null) {
clearTimeout(pressTimer);
pressTimer = null;
}
};
el.addEventListener('mousedown', start);
el.addEventListener('touchstart', start);
el.addEventListener('mouseup', cancel);
el.addEventListener('mouseleave', cancel);
el.addEventListener('touchend', cancel);
}
});在组件中使用指令
<template>
<button v-longpress:1500="handleLongPress">长按我</button>
</template>
<script>
export default {
methods: {
handleLongPress() {
console.log('长按事件触发');
}
}
}
</script>使用修饰符扩展功能
可以通过修饰符实现不同功能，例如添加.prevent修饰符阻止默认事件：
Vue.directive('longpress', {
bind(el, binding) {
// ...之前的代码...
if (binding.modifiers.prevent) {
el.addEventListener('touchmove', (e) => {
e.preventDefault();
}, { passive: false });
}
}
});处理移动端兼容性
移动端需要特别处理touch事件，并考虑passive事件监听器：
const start = (e) => {
if (e.type === 'touchstart') {
e.preventDefault();
}
// ...计时逻辑...
};解绑事件监听器
在unbind钩子中移除事件监听，防止内存泄漏：
unbind(el) {
el.removeEventListener('mousedown', start);
el.removeEventListener('touchstart', start);
// ...其他事件...
}使用第三方库
对于更复杂的需求，可以考虑使用现成的库：
vue-long-click：专门为Vue设计的长按库hammer.js：提供丰富的手势识别功能
安装vue-long-click：
npm install vue-long-click使用示例：
import VueLongClick from 'vue-long-click'
Vue.use(VueLongClick, {
delay: 1000,
interval: 50
})<button v-longclick="handleLongPress">长按</button>
