stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/onLongPress.md

category

category
Sensors

onLongPress

Listen for a long press on an element.

Function provides modifiers in options

• stop
• once
• prevent
• capture
• self

Usage

<script setup lang="ts">
import { onLongPress } from '@vueuse/core';
import { shallowRef, useTemplateRef } from 'vue';

const htmlRefHook = useTemplateRef('htmlRefHook');
const longPressedHook = shallowRef(false);

function onLongPressCallbackHook(e: PointerEvent) {
  longPressedHook.value = true;
}
function 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>

Component Usage

<script setup lang="ts">
import { OnLongPress } from '@vueuse/components';
import { shallowRef } from 'vue';

const longPressedComponent = shallowRef(false);

function onLongPressCallbackComponent(e: PointerEvent) {
  longPressedComponent.value = true;
}
function resetComponent() {
  longPressedComponent.value = false;
}
</script>

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

  <OnLongPress as="button" class="ml-2 button small" @trigger="onLongPressCallbackComponent">
    Press long
  </OnLongPress>

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

Directive Usage

<script setup lang="ts">
import { vOnLongPress } from '@vueuse/components';
import { shallowRef } from 'vue';

const longPressedDirective = shallowRef(false);

function onLongPressCallbackDirective(e: PointerEvent) {
  longPressedDirective.value = true;
}
function resetDirective() {
  longPressedDirective.value = false;
}
</script>

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

  <button v-on-long-press.prevent="onLongPressCallbackDirective" class="ml-2 button small">
    Press long
  </button>

  <button
    v-on-long-press="[onLongPressCallbackDirective, { delay: 1000, modifiers: { stop: true } }]"
    class="ml-2 button small"
  >
    Press long (with options)
  </button>

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

Type Declarations

export interface OnLongPressOptions {
  /**
   * Time in ms till `longpress` gets called
   *
   * @default 500
   */
  delay?: number | ((ev: PointerEvent) => number);
  modifiers?: OnLongPressModifiers;
  /**
   * Allowance of moving distance in pixels,
   * The action will get canceled When moving too far from the pointerdown position.
   * @default 10
   */
  distanceThreshold?: number | false;
  /**
   * Function called when the ref element is released.
   * @param duration how long the element was pressed in ms
   * @param distance distance from the pointerdown position
   * @param isLongPress whether the action was a long press or not
   */
  onMouseUp?: (duration: number, distance: number, isLongPress: boolean) => void;
}
export interface OnLongPressModifiers {
  stop?: boolean;
  once?: boolean;
  prevent?: boolean;
  capture?: boolean;
  self?: boolean;
}
export declare function onLongPress(
  target: MaybeElementRef,
  handler: (evt: PointerEvent) => void,
  options?: OnLongPressOptions,
): () => void;
export type UseOnLongPressReturn = ReturnType<typeof onLongPress>;