The Wayback Machine - https://web.archive.org/web/20220316161727/https://github.com/ittus/vue-long-click
Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-long-click

Vue long click (longpress) directive

npm version Test and Release Size

Checkout the demo at https://ittus.github.io/vue-long-click/

DemoGIF

Install

npm install vue-long-click --save
import { longClickDirective } from 'vue-long-click'

const longClickInstance = longClickDirective({delay: 400, interval: 50})
Vue.directive('longclick', longClickInstance)

CDN

Include vue-long-click library from cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/libs/vue-long-click.umd.min.js"></script>

and create custom directive to use

const longClickInstance = window['vue-long-click'].longClickDirective({delay: 400, interval: 50})
Vue.directive('longclick', longClickInstance)

CDN Demo on codepen

Usage

<button v-longclick="() => changeValue(1)">+</button>

Config

Prop Type Default Description
delay Integer (milliseconds) 400 Delay until long click function is fired
interval Integer (milliseconds) 50 If value is greater than 0, handler function will be fire every interval milliseconds when component is pressed

Development

## Project setup
npm install

## Compiles and hot-reloads for development
npm run serve

## Build library
npm run build:lib

## Run tests
npm run test

## Lints and fixes files
npm run lint