onLongPress

分类

传感器

导出大小

1.04 kB

上次更改

2 个月前

监听元素的长时间按压事件。

函数在选项中提供修饰符

stop
once
prevent
capture
self

演示

源代码演练场 (beta)

已长按: false

已点击: false

用法

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>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

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>

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法。

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-pr
ess.
prevent
="onLongPressCallbackDirective
"
    class
="ml-2 button small"
  >
    Press long
  </button
>

  <button

    v-on-long-pr
ess="[
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>

类型声明

显示类型声明

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
>