Long Press Click Event Handler Vuejs3

Question

I need to handle an long press click on my vuejs3 app, but I have not found any viable way that is not from 3 years ago with critical severity vulnerability

I need something like:

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

Answer 1

i think you can give this one a try: 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>