当前位置：首页 > VUE

vue实现长按事件

2026-02-11 05:32:03VUE

在 Vue 中实现长按事件

使用原生事件监听

可以通过组合 mousedown 和 mouseup 事件来实现长按效果。在 mousedown 时启动计时器，mouseup 时清除计时器。

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

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

使用自定义指令

封装一个可复用的长按指令，方便在多个组件中使用。

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

<script>
export default {
  directives: {
    longpress: {
      bind(el, binding) {
        let timer = null;
        el.addEventListener('mousedown', () => {
          timer = setTimeout(() => {
            binding.value();
          }, 1000);
        });
        el.addEventListener('mouseup', () => {
          clearTimeout(timer);
        });
      }
    }
  },
  methods: {
    handleLongPress() {
      console.log('长按指令触发');
    }
  }
}
</script>

处理触摸事件

移动端需要监听 touchstart 和 touchend 事件。

<template>
  <button @touchstart="startTouch" @touchend="endTouch">触摸长按</button>
</template>

<script>
export default {
  methods: {
    startTouch() {
      this.touchTimer = setTimeout(() => {
        console.log('触摸长按触发');
      }, 1000);
    },
    endTouch() {
      clearTimeout(this.touchTimer);
    }
  }
}
</script>

使用第三方库

如果项目复杂度较高，可以使用 vue-touch 或 hammer.js 等库简化实现。

安装 vue-touch：

npm install vue-touch@next

使用示例：

vue实现长按事件

import VueTouch from 'vue-touch'
Vue.use(VueTouch)

<template>
  <v-touch @press="onPress">库实现长按</v-touch>
</template>

<script>
export default {
  methods: {
    onPress() {
      console.log('按压事件触发');
    }
  }
}
</script>