FeliciousX/vue-directive-long-press

Vue Directive for Long Press

Long Press - Vue directive

expose long press event on any element or component

Getting Started

npm install vue-directive-long-press

<template>
  <button
    v-long-press="300"
    @long-press-start="onLongPressStart"
    @long-press-stop="onLongPressStop">
    Click and Hold for 300ms</button>
</template>
<script>
import LongPress from 'vue-directive-long-press'

export default {
  directives: {
    'long-press': LongPress
  },
  methods: {
    onLongPressStart () {
      // triggers after 300ms of mousedown
    },
    onLongPressStop () {
     // triggers on mouseup of document
    }
  }
}
</script>

To use directive globally

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

Vue.directive('long-press', LongPress)

Demo

View and edit the demo at StackBlitz here!

Running the tests

npm run test

License

This project is licensed under the MIT License - see the LICENSE.md file for details