当前位置：首页 > VUE

vue实现长按事件

2026-03-08 05:12:57VUE

vue实现长按事件的方法

在Vue中实现长按事件可以通过原生事件监听或自定义指令完成。以下是几种常见方法：

使用原生事件监听

通过@mousedown和@mouseup（或触摸设备的@touchstart和@touchend）结合定时器实现：

<template>
  <button 
    @mousedown="startPress"
    @mouseup="endPress"
    @touchstart="startPress"
    @touchend="endPress"
  >长按触发</button>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null
    }
  },
  methods: {
    startPress(e) {
      this.pressTimer = setTimeout(() => {
        this.handleLongPress(e)
      }, 1000) // 1秒触发长按
    },
    endPress() {
      clearTimeout(this.pressTimer)
    },
    handleLongPress(e) {
      console.log('长按事件触发', e)
    }
  }
}
</script>

自定义指令实现

封装为可复用的指令：

// main.js或单独指令文件
Vue.directive('longpress', {
  bind(el, binding) {
    let timer = null
    const handler = binding.value

    el.addEventListener('mousedown', (e) => {
      timer = setTimeout(() => {
        handler(e)
      }, 1000)
    })

    el.addEventListener('mouseup', () => {
      clearTimeout(timer)
    })

    // 触摸设备支持
    el.addEventListener('touchstart', (e) => {
      timer = setTimeout(() => {
        handler(e)
      }, 1000)
    })

    el.addEventListener('touchend', () => {
      clearTimeout(timer)
    })
  }
})

// 使用方式
<template>
  <button v-longpress="onLongPress">指令方式</button>
</template>

使用第三方库

如vue-long-click库：

vue实现长按事件

npm install vue-long-click

import VueLongClick from "vue-long-click"
Vue.use(VueLongClick, {
  delay: 700,
  interval: 50
})

<template>
  <button v-longclick="handleLongClick">库实现</button>
</template>