VueUse

Swipe

usePointerSwipe

Reactive swipe detection based on PointerEvents.

Usage
















<template>
  <div ref="el">
    Swipe here
  </div>
</template>

<script>
  setup() {
    const el = ref(null)
    const { isSwiping, direction } = usePointerSwipe(el)

    return { el, isSwiping, direction }
  } 
</script>

Type Declarations

export interface PointerSwipeOptions {
  /**
   * @default 50
   */
  threshold?: number
  /**
   * Callback on swipe start
   */
  onSwipeStart?: (e: PointerEvent) => void
  /**
   * Callback on swipe move
   */
  onSwipe?: (e: PointerEvent) => void
  /**
   * Callback on swipe end
   */
  onSwipeEnd?: (e: PointerEvent, direction: SwipeDirection) => void
}
export interface PointerPosition {
  x: number
  y: number
}
export interface PointerSwipeReturn {
  readonly isSwiping: Ref<boolean>
  direction: Readonly<Ref<SwipeDirection | null>>
  readonly posStart: PointerPosition
  readonly posEnd: PointerPosition
  distanceX: Readonly<Ref<number>>
  distanceY: Readonly<Ref<number>>
  stop: () => void
}
/**
 * Reactive swipe detection based on PointerEvents.
 *
 * @see /usePointerSwipe
 * @param target
 * @param options
 */
export declare function usePointerSwipe(
  target: MaybeRef<HTMLElement | null | undefined>,
  options?: PointerSwipeOptions
): PointerSwipeReturn

Source

Source • Demo • Docs