feliciousx / vue-directive-long-press Goto Github PK

View Code? Open in Web Editor NEW

22.0 1.0 9.0 841 KB

Vue Directive for Long Press

License: MIT License

TypeScript 72.76% Vue 19.34% HCL 7.90%

vue-directive-long-press's Introduction

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

vue-directive-long-press's People

Contributors

Stargazers

Watchers

Forkers

naeramarth7 kiyui rndmerle m5ultra 640kb-limited skintillion dmonterde mik13

vue-directive-long-press's Issues

possible to add event

in vue i want to get the mouse (or finger) position of the long press. i wanted to do this by adding the event, but this gives undefined:

`
@long-press-start="onLongPressStart(e)"

onLongPressStart (e) {
console.log(e);
},
`

Include typescript definitions in package

Right now the typescript definitions file that should be alongside index.js in the dist folder simply isn't there. This makes it unnecessarily painful to use this package in a typescript project.

I added an "on scroll" prevention on desktop and mobile if you want to merge it. There's no configuration for it, it will just cancel the timeout if you scroll while long pressing. Found it a problem on mobile mostly.

https://github.com/Skintillion/vue-directive-long-press

I can make a PR if that would help.

long-press-start is triggered but long-press-stop not while touch move

Need a way to prevent @click event

At the moment, it doesn't seem possible to combine @click with @long-press-start.
Therefor, every time the long press event fires, the click event also fires.

Need something like @long-press-start.prevent where the click event won't fire.

why touch move will emit "long-press-start"

Error with Nuxt

With Nuxt, using from a component or from a plugin, I get CustomEvent is not defined in the file node_modules/vue-directive-long-press/dist/index.js.

Use directive as a plugin

Breaking change

allow export default to be a plugin and spread export to use directive locally per component

Need a way to determine right or left click

I'm working on a PWA that is used both on touch devices and computers. When right clicking a event that has a longpress-event binded to it, then "long-press-start" is triggered, but "long-press-stop" is never trigered, not until one click with the left button and the regular event cycle kicks in.

I solved this manually by listening for "window.oncontextmenu" to detect if the click is right or left, and the discard the long press event if the right button was used.

Would this be something that the longpress should detect, whether the right or left mouse button is clicked?

Long Press does not work on Safari

I am testing long Press on Safari Version 12.1.1 (14607.2.6.1.1) and it does not work.