Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.