当前位置：首页 > VUE

vue 实现长按

2026-03-07 11:22:40VUE

实现长按功能的步骤

在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() {
      this.pressTimer = setTimeout(() => {
        this.handleLongPress()
      }, 1000) // 1秒后触发长按
    },
    endPress() {
      clearTimeout(this.pressTimer)
    },
    handleLongPress() {
      console.log('长按事件触发')
    }
  }
}
</script>

方法二：使用自定义指令

创建一个自定义指令v-longpress来封装长按逻辑，方便复用。

vue 实现长按

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

<script>
export default {
  directives: {
    longpress: {
      bind(el, binding) {
        let pressTimer = null
        const handler = binding.value

        const start = (e) => {
          if (pressTimer === null) {
            pressTimer = setTimeout(() => {
              handler()
            }, 1000)
          }
        }

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

        el.addEventListener('mousedown', start)
        el.addEventListener('touchstart', start)
        el.addEventListener('mouseup', cancel)
        el.addEventListener('touchend', cancel)
        el.addEventListener('mouseleave', cancel)
      }
    }
  },
  methods: {
    handleLongPress() {
      console.log('长按事件触发')
    }
  }
}
</script>