当前位置：首页 > VUE

vue如何实现长按服务

2026-01-21 05:41:09VUE

Vue 实现长按事件的方法

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

使用原生事件绑定

通过 @mousedown 和 @mouseup 或 @touchstart 和 @touchend 组合实现：

vue如何实现长按服务

<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();
      }, 1000); // 1秒触发长按
      e.preventDefault(); // 防止移动端默认行为
    },
    endPress() {
      clearTimeout(this.pressTimer);
    },
    handleLongPress() {
      console.log('长按事件触发');
    }
  }
};
</script>

自定义指令实现

封装为可复用的指令：

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

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

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

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

使用指令：

vue如何实现长按服务

<button v-longpress="longPressAction">长按指令</button>

<script>
export default {
  methods: {
    longPressAction() {
      console.log('自定义指令触发长按');
    }
  }
};
</script>

第三方库

使用 vue-touch 或 hammer.js 等库简化实现：

npm install hammerjs

示例代码：

import Hammer from 'hammerjs';

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