onLongPress

类别

Sensors

导出大小

1.02 kB

最近修改

2 days ago

监听元素的长按操作。返回一个停止函数。

🌐 Listen for a long press on an element. Returns a stop function.

示例

源代码在线运行

Long Pressed: false

Clicked: false

用法

🌐 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>

自定义延迟

🌐 Custom Delay

默认情况下，处理程序会在500毫秒后触发。你可以通过 delay 选项自定义它。它可以是一个数字，也可以是接收 PointerEvent 的函数。

🌐 By default, the handler fires after 500ms. You can customize this with the delay option. It can be a number or a function that receives the PointerEvent.

import { onLongPress } from '@vueuse/core'

// Fixed delay
onLongPress(target, handler, { delay: 1000 })

// Dynamic delay based on event
onLongPress(target, handler, {
  delay: ev => ev.pointerType === 'touch' ? 800 : 500,
})

距离阈值

🌐 Distance Threshold

如果指针移动超过阈值（默认：10像素），长按将被取消。设置为 false 可禁用移动检测。

🌐 The long press will be canceled if the pointer moves more than the threshold (default: 10 pixels). Set to false to disable movement detection.

import { onLongPress } from '@vueuse/core'

// Custom threshold
onLongPress(target, handler, { distanceThreshold: 20 })

// Disable movement detection
onLongPress(target, handler, { distanceThreshold: false })

鼠标释放回调

🌐 On Mouse Up Callback

你可以提供一个 onMouseUp 回调，以在指针被释放时收到通知。

🌐 You can provide an onMouseUp callback to be notified when the pointer is released.

import { onLongPress } from '@vueuse/core'

onLongPress(target, handler, {
  onMouseUp(duration, distance, isLongPress) {
    console.log(`Held for ${duration}ms, moved ${distance}px, long press: ${isLongPress}`)
  },
})

修饰符

🌐 Modifiers

以下修饰符可用：

🌐 The following modifiers are available:

修饰符	描述
stop	调用 event.stopPropagation()
once	第一次触发后移除事件监听器
prevent	调用 event.preventDefault()
capture	使用捕获模式的事件监听器
self	仅在目标是元素本身时触发

onLongPress(target, handler, {
  modifiers: {
    prevent: true,
    stop: true,
  },
})

组件用法

🌐 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>