当前位置：首页 > VUE

vue实现长按事

2026-02-18 19:06:32VUE

在Vue中实现长按事件可以通过自定义指令或组合式API实现。以下是两种常见方法：

使用自定义指令

注册一个全局或局部指令处理长按逻辑：

vue实现长按事

Vue.directive('longpress', {
  bind(el, binding) {
    let pressTimer = null
    const start = (e) => {
      if (e.button !== 0) return
      pressTimer = setTimeout(() => {
        binding.value()
      }, 800) // 800ms触发长按
    }
    const cancel = () => {
      clearTimeout(pressTimer)
    }

    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    el.addEventListener('mouseup', cancel)
    el.addEventListener('mouseleave', cancel)
    el.addEventListener('touchend', cancel)
  }
})

模板中使用：

vue实现长按事

<button v-longpress="handleLongPress">长按我</button>

使用组合式API

在setup函数中封装可复用的长按逻辑：

import { ref } from 'vue'

export function useLongPress(callback, duration = 800) {
  const timer = ref(null)

  const start = (e) => {
    timer.value = setTimeout(() => {
      callback(e)
    }, duration)
  }

  const clear = () => {
    if (timer.value) {
      clearTimeout(timer.value)
      timer.value = null
    }
  }

  return {
    onMouseDown: start,
    onMouseUp: clear,
    onMouseLeave: clear,
    onTouchStart: start,
    onTouchEnd: clear
  }
}

组件中使用：

<template>
  <button 
    @mousedown="longPress.onMouseDown"
    @mouseup="longPress.onMouseUp"
    @mouseleave="longPress.onMouseLeave"
    @touchstart="longPress.onTouchStart"
    @touchend="longPress.onTouchEnd"
  >长按我</button>
</template>

<script setup>
import { useLongPress } from './longPress'
const handleLongPress = () => console.log('长按触发')
const longPress = useLongPress(handleLongPress)
</script>