Home
Other
Handling & Bind Touch Events In Vue 3

Handling & Bind Touch Events In Vue 3

robinrodricks Last Updated: 3 weeks ago

A library that handles and binds multiple touch events (such as tap, swipe, hold, drag, mouse down, etc.) in your Vue 3 applications.

How to use it:

1. Import and register the touch events plugin.

import Vue from "vue";
import Vue3TouchEvents from "vue3-touch-events";
Vue.use(Vue3TouchEvents);

2. Bind touch events using the v-touch directive.

<!-- bind a tap event -->
<span v-touch:tap="touchHandler">Tap Me</span>

<!-- tap is the default event, you can omit it -->
<span v-touch="touchHandler">Tap Me</span>

<!-- bind the swipe event, no matter direction -->
<span v-touch:swipe="swipeHandler">Swipe Here</span>

<!-- only when swipe left can trigger the callback -->
<span v-touch:swipe.left="swipeHandler">Swipe Left Here</span>

<!-- bind a long tap event -->
<span v-touch:longtap="longtapHandler">Long Tap Event</span>

<!-- bind a start and end event -->
<span v-touch:press="startHandler" v-touch:release="endHandler">Press and Release Events</span>

<!-- bind a move and moving event -->
<span v-touch:drag.once="movedHandler">Triggered once when starting to move and tapTolerance is exceeded</span>
<span v-touch:drag="movingHandler">Continuously triggered while dragging</span>

<!-- touch and hold -->
<span v-touch:hold="touchHoldHandler">Touch and hold on the screen for a while</span>

<!-- you can even mix multiple events -->
<span v-touch:tap="tapHandler" v-touch:longtap="longtapHandler" v-touch:swipe.left="swipeLeftHandler" v-touch:press="startHandler" v-touch:release="endHandler" v-touch:swipe.right="swipeRightHandler">Mix Multiple Events</span>

<!-- using different options for specified element -->
<span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active', swipeTolerance: 80, touchHoldTolerance: 300}">Different options</span>

<!-- customize touch effects by CSS class -->
<span v-touch:tap="tapHandler" v-touch-class="active">Customize touch class</span>
<!-- or -->
<span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active'}">Customize touch class</span>

3. Available events.

  • v-on:click
  • v-on:mousedown
  • v-on:mousemove
  • v-on:mouseup
  • v-on:mouseenter
  • v-on:mouseleave
  • v-on:touchstart
  • v-on:touchmove
  • v-on:touchcancel
  • v-on:touchend

4. Global options.

Vue.use(Vue3TouchEvents, {
  disableClick: false,
  tapTolerance: 10,  // px
  swipeTolerance: 30,  // px
  touchHoldTolerance: 400,  // ms
  longTapTimeInterval: 400,  // ms
  touchClass: '',
  dragFrequency: 100, // ms
  rollOverFrequency: 100, // ms
});

Preview:

Handling & Bind Touch Events In Vue 3

Changelog:

v4.1.2 (02/26/2023)

  • Bugfix

Download Details:

Author: robinrodricks

Live Demo: https://github.com/robinrodricks/vue3-touch-events

Download Link: https://github.com/robinrodricks/vue3-touch-events/archive/refs/heads/master.zip

Official Website: https://github.com/robinrodricks/vue3-touch-events

Install & Download:

# Yarn
$ yarn add vue3-touch-events

# NPM
$ npm i vue3-touch-events

Related Posts

Add Comment