Vue Directive For Long-press Event On Any Element or Component

Long press – Vue directive is a Vue.js directive to detect and handle the long press event of an element or component.

vue long click event stackblitz, vue 3 touch events, vue press and hold, touch vue, vue touchstart, long press event in javascript, vue touch events, vue double click

How to make use of it:

Install & Download:

# NPM
$ npm install vue-directive-long-press --save

1. Import the LongPress.

import LongPress from 'vue-directive-long-press'

2. Use the directive.

<template>
  <button
    v-long-press="500"
    @long-press-start="onLongPressStart"
    @long-press-stop="onLongPressStop">
    Click and Hold for 500ms</button>
</template>
export default {
  directives: {
    'long-press': LongPress
  },
  methods: {
    onLongPressStart () {
      // do something
    },
    onLongPressStop () {
      // do something
    }
  }
}

detect long press in vue js, Long Press Vue directive Plugin/Github


See Demo And Download

Official Website(FeliciousX): Click Here

This superior jQuery/javascript plugin is developed by FeliciousX. For extra advanced usage, please go to the official website.

Related Posts

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…

free-angular-wysiwyg-editor

WYSIWYG Rich Text Editor For Angular Using ProseMirror

NgxEditor WYSIWYG¬†Rich Text Editor for Angular using ProseMirror. Based on the iconic font Ngx-Bootstrap and Font Awesome. ngx-editor is a simple rich text editor for Angular applications…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….