vue实现长按删除
Vue 实现长按删除功能
在 Vue 中实现长按删除功能可以通过监听 touchstart 和 touchend 或 mousedown 和 mouseup 事件来实现。以下是两种常见的实现方式：
使用原生事件监听
通过 setTimeout 和 clearTimeout 来检测长按时间。
<template>
<div
@touchstart="startPress"
@touchend="endPress"
@mousedown="startPress"
@mouseup="endPress"
>
长按删除
</div>
</template>
<script>
export default {
data() {
return {
pressTimer: null,
pressDuration: 1000, // 长按时间阈值（毫秒）
};
},
methods: {
startPress(e) {
// 阻止默认行为，避免触发其他事件
e.preventDefault();
this.pressTimer = setTimeout(() => {
this.deleteItem();
}, this.pressDuration);
},
endPress() {
clearTimeout(this.pressTimer);
},
deleteItem() {
console.log("删除操作");
// 执行删除逻辑
},
},
};
</script>使用自定义指令
封装为自定义指令可以复用逻辑。
// main.js 或单独指令文件
Vue.directive('longpress', {
bind(el, binding) {
let pressTimer = null;
const pressDuration = binding.value || 1000;
const startPress = (e) => {
e.preventDefault();
if (pressTimer === null) {
pressTimer = setTimeout(() => {
binding.value();
}, pressDuration);
}
};
const endPress = () => {
clearTimeout(pressTimer);
pressTimer = null;
};
el.addEventListener('touchstart', startPress);
el.addEventListener('touchend', endPress);
el.addEventListener('mousedown', startPress);
el.addEventListener('mouseup', endPress);
},
});在组件中使用自定义指令：
<template>
<div v-longpress="deleteItem">长按删除</div>
</template>
<script>
export default {
methods: {
deleteItem() {
console.log("删除操作");
},
},
};
</script>优化用户体验
可以添加视觉反馈，例如长按时改变元素样式。
<template>
<div
@touchstart="startPress"
@touchend="endPress"
@mousedown="startPress"
@mouseup="endPress"
:class="{ 'active': isPressing }"
>
长按删除
</div>
</template>
<script>
export default {
data() {
return {
isPressing: false,
pressTimer: null,
};
},
methods: {
startPress() {
this.isPressing = true;
this.pressTimer = setTimeout(() => {
this.deleteItem();
}, 1000);
},
endPress() {
this.isPressing = false;
clearTimeout(this.pressTimer);
},
},
};
</script>
<style>
.active {
background-color: #f0f0f0;
}
</style>注意事项
- 移动端和桌面端事件需要同时处理（
touchstart和mousedown）。 - 清除定时器避免内存泄漏。
- 根据需求调整长按时间阈值（默认 1000 毫秒）。
