@sysvale/vue3-long-click

Long click (longpress) directive library for VueJS
15,709
Install
npm install @sysvale/vue3-long-click
Latest Version:0.2.0
Vue:2
License:MIT
Last Updated:Dec 21, 2022
Links: npm
Maintainer: lucasn4s

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

Related Packages

vue-long-click

Long click (longpress) directive library for VueJS

61,897 61
vue3-delay-watch

vue 3 watcher that waits a minimum delay until the latest state gets passed to t...

3,974 1
vue-interval

A vue mixin to use methods as intervals, show times and values in intervals and...

1,645 10
@nanogiants/vue3-longpress

This package contains a Vue 3 directive which adds the `@longpress` event to an...

2,241 2
vuetify-time-range-picker

A time range picker, made so users can easily pick a one day time interval.

842 3

Version History

Version Released Vue License
0.2.0 ^2.5.22 MIT