长按单击事件处理程序Vuejs3

Question

我需要处理长时间按下我的vuejs3应用程序，但我没有找到任何可行的方式，不是从3年前严重的严重漏洞。

我需要这样的东西：

<button @long-click.on="something()" @long-click.off="somethingElse()"> </button>

Answer 1

我想你可以试试这个：https://vueuse.org/core/onlongpress/#onlongpress

<script setup lang="ts">
import { ref } from 'vue'
import { onLongPress } from '@vueuse/core'

const htmlRefHook = ref<HTMLElement | null>(null)
const longPressedHook = ref(false)

const onLongPressCallbackHook = (e: PointerEvent) => {
  longPressedHook.value = true
}
const resetHook = () => {
  longPressedHook.value = false
}

onLongPress(
  htmlRefHook,
  onLongPressCallbackHook,
  { modifiers: { prevent: true } }
)
</script>

<template>
  <p>Long Pressed: {{ longPressedHook }}</p>

  <button ref="htmlRefHook" class="ml-2 button small">
    Press long
  </button>

  <button class="ml-2 button small" @click="resetHook">
    Reset
  </button>
</template>