fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.4 KiB
3.4 KiB
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>;