Skip to content

ittus/vue-long-click

Repository files navigation

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