https://github.com/a145789/vtouchdir
vue3 custom direction for mobile development using the touch api, get the direction of slide.
https://github.com/a145789/vtouchdir
directions directive touch vue vue-directive vue3
Last synced: 7 months ago
JSON representation
vue3 custom direction for mobile development using the touch api, get the direction of slide.
- Host: GitHub
- URL: https://github.com/a145789/vtouchdir
- Owner: a145789
- License: mit
- Created: 2022-04-24T03:03:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-05T08:32:24.000Z (over 2 years ago)
- Last Synced: 2025-02-28T11:59:58.693Z (8 months ago)
- Topics: directions, directive, touch, vue, vue-directive, vue3
- Language: TypeScript
- Homepage:
- Size: 76.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vtouchdir
A mobile vue3 touch api custom directive for swipe direction
## Installation
### npm
```bash
npm install --save-dev vtouchdir
```
### pnpm
```bash
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**
```vue
import vTouchdir from "vtouchdir"
const handler = (
direction: Direction,
e: TouchEvent,
rangeParams: {
startPageX: number
startPageY: number
endPageX: number
endPageY: number
deltaX: number
deltaY: number
}
) => {}
```
Supports the same [event modifiers](https://v3.vuejs.org/guide/essentials/event-handling.html#event-modifiers) as `vue` except for `passive`, `.self` has the highest priority
```vue
import vTouchdir from "vtouchdir"
function handler(dir: "left" | "right" | "up" | "down") {}
```
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
```vue
import vTouchdir from "vtouchdir"
function handler(dir: "left" | "right" | "up" | "down") {}
```
**Typescript**
If you use `ts`, you can export the `Direction` enum
```ts
// vtouchdir
export enum Direction {
LEFT = "left",
RIGHT = "right",
UP = "up",
DOWN = "down",
}
// use
import vTouchdir, { Direction } from "vtouchdir"
```