vtouchdir

A mobile vue3 touch api custom directive for swipe direction

Installation

npm

npm install --save-dev vtouchdir

pnpm

pnpm add vtouchdir -D

Docs

touchDir

Description

A function can be passed in, which will be called after the element slides, and can receive three parameters.

Usage

<script setup lang="ts">
import vTouchdir from "vtouchdir"

const handler = (
  direction: Direction,
  e: TouchEvent,
  rangeParams: {
    startPageX: number
    startPageY: number
    endPageX: number
    endPageY: number
    deltaX: number
    deltaY: number
  }
) => {}
</script>

<template>
  <div v-touchdir="handler" />
</template>

Supports the same event modifiers as vue except for passive, .self has the highest priority

<script setup lang="ts">
import vTouchdir from "vtouchdir"

function handler(dir: "left" | "right" | "up" | "down") {}
</script>

<template>
  <div v-touchdir.once.stop.prevent="handler" />
</template>

The default swipe range is 10, and the handler will be triggered only when the swipe exceeds 10. You can specify a range parameter to customize the range

<script setup lang="ts">
import vTouchdir from "vtouchdir"

function handler(dir: "left" | "right" | "up" | "down") {}
</script>

<template>
  <div v-touchdir.once.stop.prevent="{ handler, range: 0 }" />
</template>

Typescript

If you use ts, you can export the Direction enum

// vtouchdir
export enum Direction {
  LEFT = "left",
  RIGHT = "right",
  UP = "up",
  DOWN = "down",
}

// use
import vTouchdir, { Direction } from "vtouchdir"