当前位置：首页 > VUE

vue实现长按

2026-01-12 22:29:13VUE

Vue 实现长按功能的方法

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

使用原生事件监听

通过 mousedown 和 mouseup 或 touchstart 和 touchend 事件组合实现长按判定：

vue实现长按

<template>
  <button @mousedown="startPress" @mouseup="endPress">长按按钮</button>
</template>

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

移动端需替换为 touchstart 和 touchend 事件。

vue实现长按

使用自定义指令

封装可复用的长按指令：

// main.js
Vue.directive('longpress', {
  bind(el, binding) {
    let pressTimer = null;

    const start = (e) => {
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          binding.value(e);
        }, 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);
  }
});

// 使用方式
<button v-longpress="handleLongPress">长按指令</button>

第三方库方案

使用 vue-touch 或 hammer.js 等手势库：

npm install hammerjs

import Hammer from 'hammerjs';

export default {
  mounted() {
    const hammer = new Hammer(this.$el);
    hammer.on('press', () => {
      console.log('长按事件');
    });
  }
}