vue 实现长按删除

实现长按删除功能

在Vue中实现长按删除功能，可以通过监听touchstart和touchend事件，结合定时器来实现。以下是一个完整的实现方案：

监听触摸事件

在需要长按删除的元素上绑定touchstart和touchend事件。touchstart事件用于启动计时器，touchend事件用于取消计时器。

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

设置计时器

在startPress方法中设置一个计时器，延迟执行删除操作。通常长按的时间阈值设置为500ms到1s。

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

添加视觉反馈

为了提高用户体验，可以在长按时添加视觉反馈，比如改变背景色或显示提示。

<template>
  <div 
    @touchstart="startPress"
    @touchend="endPress"
    :class="{ 'active': isPressing }"
  >
    长按我删除
  </div>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null,
      isPressing: false
    }
  },
  methods: {
    startPress() {
      this.isPressing = true
      this.pressTimer = setTimeout(() => {
        this.deleteItem()
      }, 1000)
    },
    endPress() {
      this.isPressing = false
      clearTimeout(this.pressTimer)
    }
  }
}
</script>

兼容鼠标事件

如果需要同时支持鼠标操作，可以添加mousedown和mouseup事件。

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

防止误触

为了避免误触，可以在touchend时检查手指移动距离，如果移动过大则取消删除操作。

methods: {
  startPress(e) {
    this.startX = e.touches ? e.touches[0].clientX : e.clientX
    this.startY = e.touches ? e.touches[0].clientY : e.clientY
    this.isPressing = true
    this.pressTimer = setTimeout(() => {
      this.deleteItem()
    }, 1000)
  },
  endPress(e) {
    const endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX
    const endY = e.changedTouches ? e.changedTouches[0].clientY : e.clientY
    const distance = Math.sqrt(Math.pow(endX - this.startX, 2) + Math.pow(endY - this.startY, 2))
    if (distance > 10) {
      clearTimeout(this.pressTimer)
    }
    this.isPressing = false
  }
}

完整示例

以下是一个完整的Vue组件示例：

<template>
  <div 
    @touchstart="startPress"
    @touchend="endPress"
    @mousedown="startPress"
    @mouseup="endPress"
    @mouseleave="endPress"
    :class="{ 'active': isPressing }"
    class="long-press-item"
  >
    长按我删除
  </div>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null,
      isPressing: false,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startPress(e) {
      this.startX = e.touches ? e.touches[0].clientX : e.clientX
      this.startY = e.touches ? e.touches[0].clientY : e.clientY
      this.isPressing = true
      this.pressTimer = setTimeout(() => {
        this.deleteItem()
      }, 1000)
    },
    endPress(e) {
      const endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX
      const endY = e.changedTouches ? e.changedTouches[0].clientY : e.clientY
      const distance = Math.sqrt(Math.pow(endX - this.startX, 2) + Math.pow(endY - this.startY, 2))
      if (distance > 10) {
        clearTimeout(this.pressTimer)
      }
      this.isPressing = false
    },
    deleteItem() {
      alert('删除成功')
    }
  }
}
</script>

<style>
.long-press-item {
  padding: 20px;
  background: #f0f0f0;
  margin: 20px;
}
.long-press-item.active {
  background: #ffeb3b;
}
</style>

通过以上方法，可以在Vue中实现一个完整的长按删除功能，包括触摸和鼠标支持、视觉反馈以及防误触处理。