在 Vue 3 中如何实现鼠标长按效果

以一个场景为例：鼠标单击可以加1，鼠标长按可以持续加1。

 

<template>
  <button
    @click="onButtonClick"
    @mousedown="onMouseDown" // 按下鼠标
    @mouseup="onMouseUp"     // 释放鼠标
    @mouseleave="onMouseUp"  // 鼠标指针离开当前元素
    style="margin-right: 20px;">点击加1</button>
  {{ num }}
</template>

<script setup>
import { ref, onUnmounted } from 'vue'

const num = ref(0)
const pressTimer = ref(null)

const onButtonClick = () => {
  num.value++
}

const onMouseDown = () => {
  pressTimer.value = setInterval(() => {
    onButtonClick() // 每隔100ms触发一次
  }, 100)
}
const onMouseUp = () => {
  if (pressTimer.value) {
    clearInterval(pressTimer.value)
  }
}

onUnmounted(() => {
	if (pressTimer.value) {
		clearInterval(pressTimer.value)
	}
})
</script>