当前位置：首页 > VUE

vue 实现长按删除

2026-01-17 22:41:12VUE

实现长按删除功能

在Vue中实现长按删除功能可以通过监听touchstart和touchend事件，或者mousedown和mouseup事件来实现。以下是具体实现方法：

方法一：使用事件监听

vue 实现长按删除

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

<script>
export default {
  data() {
    return {
      pressTimer: null
    }
  },
  methods: {
    startPress() {
      this.pressTimer = setTimeout(() => {
        this.deleteItem()
      }, 1000) // 1秒长按触发
    },
    endPress() {
      clearTimeout(this.pressTimer)
    },
    deleteItem() {
      // 执行删除操作
      console.log('删除操作')
    }
  }
}
</script>

方法二：使用自定义指令

可以创建一个自定义指令v-longpress来复用长按逻辑：

vue 实现长按删除

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

    const start = (e) => {
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          binding.value()
        }, 1000)
      }
    }

    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="deleteItem">长按删除</button>
</template>

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

注意事项

移动端和PC端需要同时处理touch和mouse事件
清除定时器时要确保所有可能的事件都处理了（如mouseleave）
长按时间可以根据需求调整，通常1-2秒比较合适
可以考虑添加触觉反馈（如震动）提升用户体验

优化版本

<template>
  <div 
    @mousedown="startPress"
    @mouseup="cancelPress"
    @mouseleave="cancelPress"
    @touchstart="startPress"
    @touchend="cancelPress"
    @touchcancel="cancelPress"
  >
    {{ pressProgress }}%
  </div>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null,
      pressStartTime: 0,
      pressProgress: 0
    }
  },
  methods: {
    startPress() {
      this.pressStartTime = Date.now()
      this.pressTimer = setInterval(() => {
        const elapsed = Date.now() - this.pressStartTime
        this.pressProgress = Math.min(Math.floor(elapsed / 10), 100)
        if (elapsed >= 1000) {
          this.deleteItem()
          this.cancelPress()
        }
      }, 16)
    },
    cancelPress() {
      clearInterval(this.pressTimer)
      this.pressProgress = 0
    },
    deleteItem() {
      // 删除逻辑
    }
  }
}
</script>

这个优化版本添加了进度显示功能，让用户能看到长按的进度，提升交互体验。

标签: vue