当前位置：首页 > VUE

vue 实现长按删除

2026-03-10 04:24:33VUE

实现长按删除功能

在Vue中实现长按删除功能，可以通过监听鼠标或触摸事件来实现。以下是两种常见的实现方式：

使用原生事件监听

通过@mousedown和@mouseup或@touchstart和@touchend来检测长按动作。

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

<script>
export default {
  data() {
    return {
      pressTimer: null,
      pressDuration: 1000 // 长按时间阈值，单位毫秒
    }
  },
  methods: {
    startPress(e) {
      this.pressTimer = setTimeout(() => {
        this.deleteItem()
      }, this.pressDuration)
    },
    endPress() {
      clearTimeout(this.pressTimer)
    },
    deleteItem() {
      // 执行删除逻辑
      console.log('删除操作')
    }
  }
}
</script>

使用自定义指令

封装一个v-longpress指令可以更方便地在多个地方复用。

// 注册全局指令
Vue.directive('longpress', {
  bind: function(el, binding) {
    let pressTimer = null
    const handler = binding.value
    const duration = binding.arg || 1000

    const start = (e) => {
      if (e.type === 'click' && e.button !== 0) return

      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, duration)
      }
    }

    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }

    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  }
})

使用自定义指令：

vue 实现长按删除

<template>
  <button v-longpress:1500="deleteItem">长按1.5秒删除</button>
</template>

<script>
export default {
  methods: {
    deleteItem() {
      // 删除逻辑
    }
  }
}
</script>