vue-long-click

Long click (longpress) directive library for VueJS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-long-click
57220.1.03 years ago5 years agoMinified + gzip package size for vue-long-click in KB

Readme

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/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