当前位置：首页 > VUE

vue 实现长按

2026-02-10 11:32:16VUE

实现长按功能的思路

在 Vue 中实现长按功能，通常需要监听 mousedown 或 touchstart 事件，并在一定时间后触发长按回调。如果在时间到达前触发了 mouseup 或 touchend 事件，则取消长按。

vue 实现长按

使用自定义指令

Vue 的自定义指令是封装长按逻辑的常见方式：

vue 实现长按

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

    const start = (e) => {
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          binding.value();
        }, 1000); // 1秒触发长按
      }
    };

    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);
    el.addEventListener('touchcancel', cancel);
  }
});

在组件中使用

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

<script>
export default {
  methods: {
    handleLongPress() {
      console.log('长按触发');
    }
  }
};
</script>

使用事件监听

如果不使用自定义指令，可以在组件内直接监听事件：

<template>
  <button 
    @mousedown="startPress"
    @mouseup="cancelPress"
    @touchstart="startPress"
    @touchend="cancelPress"
  >
    长按我
  </button>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null
    };
  },
  methods: {
    startPress() {
      this.pressTimer = setTimeout(() => {
        console.log('长按触发');
      }, 1000);
    },
    cancelPress() {
      clearTimeout(this.pressTimer);
      this.pressTimer = null;
    }
  }
};
</script>