onLongPress
聆听对某个元素的长按。
¥Listen for a long press on an element.
函数在选项中提供修饰符
¥Function provides modifiers in options
stop
once
prevent
capture
self
示例
用法
¥Usage
vue
<script setup lang="ts">
import { onLongPress } from '@vueuse/core'
import { shallowRef, useTemplateRef } from 'vue'
const htmlRefHook = useTemplateRef<HTMLElement>('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
vue
<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
vue
<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>