ittus / vue-long-click

Long click directive library for VueJS

vue-long-click

Vue long click (longpress) directive

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

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/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-long-click@0.0.4/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