vue中pc端鼠标点击和长按事件

在 Vue 中，可以使用 @click 和 @mousedown 事件来实现鼠标点击和长按事件的监听。

例如，监听鼠标点击事件：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("点击了按钮");
    }
  }
};
</script>

监听鼠标长按事件：

<template>
  <button @mousedown="handleMouseDown" @mouseup="handleMouseUp">长按我</button>
</template>

<script>
export default {
  data() {
    return {
      pressTimer: null
    };
  },
  methods: {
    handleMouseDown() {
      this.pressTimer = setTimeout(() => {
        console.log("长按了按钮");
      }, 500); // 设置长按时间
    },
    handleMouseUp() {
      clearTimeout(this.pressTimer);
    }
  }
};
</script>

以上代码中，我们使用了 @mousedown 和 @mouseup 事件来监听鼠标的按下和松开事件，并使用 setTimeout 来实现长按的监听。当鼠标按下时，启动计时器，并在指定时间内未松开鼠标，则触发长按事件；当鼠标松开时，清除计时器。