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>

Did you looked on how to make a vanilla JS event listener + seconds time? Also, please share the resource, it may maybe be viable. — kissu, Nov 10 '22 at 14:42
vulnerable resource: https://www.vuescript.com/detect-long-press/ — Devck - DC, Nov 10 '22 at 14:45
Give a try to [that one](https://github.com/javisperez/vuelongpress) or maybe [this one](https://github.com/ittus/vue-long-click). — kissu, Nov 10 '22 at 14:47
No support for both of them? I guess you will need to do that yourself so. Maybe check Vueuse for something similar, probably is something that could help you. https://vueuse.org/ — kissu, Nov 10 '22 at 15:00
That one for example: https://vueuse.org/core/onlongpress/#onlongpress — kissu, Nov 10 '22 at 15:02

score 0 · Answer 1 · answered Nov 12 '22 at 04:15

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>

Long Press Click Event Handler Vuejs3

1 Answers1