当前位置：首页 > VUE

vue实现长按删除

2026-03-08 22:22:21VUE

Vue 实现长按删除功能

长按删除功能在移动端或桌面端应用中较为常见，可以通过监听 touchstart 和 touchend（移动端）或 mousedown 和 mouseup（桌面端）事件来实现。以下是具体的实现方法。

监听事件实现长按

在 Vue 中，可以通过自定义指令或直接在组件中绑定事件来实现长按功能。以下是一个基于自定义指令的实现方式：

// 注册全局指令
Vue.directive('longpress', {
  bind: function (el, binding) {
    let pressTimer = null;

    const start = (e) => {
      if (e.type === 'click' && e.button !== 0) return; // 确保是左键点击
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          binding.value(); // 执行传入的函数
        }, 1000); // 长按时间为 1 秒
      }
    };

    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);
    el.addEventListener('touchcancel', cancel);
  },
});

在组件中使用指令

在模板中，可以通过 v-longpress 指令绑定一个方法，该方法会在长按触发时执行：

<template>
  <div>
    <button v-longpress="handleDelete">长按删除</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDelete() {
      console.log('长按触发删除');
      // 执行删除逻辑
    },
  },
};
</script>

直接绑定事件

如果不使用自定义指令，也可以在组件中直接绑定事件：

<template>
  <div>
    <button 
      @mousedown="startPress" 
      @mouseup="cancelPress"
      @touchstart="startPress" 
      @touchend="cancelPress"
    >
      长按删除
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null,
    };
  },
  methods: {
    startPress() {
      this.pressTimer = setTimeout(() => {
        this.handleDelete();
      }, 1000);
    },
    cancelPress() {
      if (this.pressTimer) {
        clearTimeout(this.pressTimer);
        this.pressTimer = null;
      }
    },
    handleDelete() {
      console.log('长按触发删除');
      // 执行删除逻辑
    },
  },
};
</script>

优化用户体验

为了避免误触，可以添加视觉反馈，例如在长按时改变按钮样式：

<template>
  <button 
    v-longpress="handleDelete"
    :class="{ 'active': isPressing }"
  >
    长按删除
  </button>
</template>

<script>
export default {
  data() {
    return {
      isPressing: false,
    };
  },
  methods: {
    handleDelete() {
      console.log('长按触发删除');
      // 执行删除逻辑
    },
  },
};
</script>

<style>
.active {
  background-color: #ff0000;
  color: #ffffff;
}
</style>

移动端和桌面端兼容

如果需要同时支持移动端和桌面端，可以在指令或事件中同时监听 touch 和 mouse 事件：

vue实现长按删除

// 在指令中同时监听 touch 和 mouse 事件
el.addEventListener('mousedown', start);
el.addEventListener('touchstart', start);
el.addEventListener('mouseup', cancel);
el.addEventListener('touchend', cancel);