https://github.com/ittus/vue-long-click

Long click directive library for VueJS
https://github.com/ittus/vue-long-click

directive longclick longpress vue-directive vue-library vuejs

Last synced: 4 months ago
JSON representation

Long click directive library for VueJS

• Host: GitHub
• URL: https://github.com/ittus/vue-long-click
• Owner: ittus
• License: mit
• Created: 2019-02-13T07:37:45.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:56:16.000Z (almost 3 years ago)
• Last Synced: 2025-07-09T16:13:05.211Z (5 months ago)
• Topics: directive, longclick, longpress, vue-directive, vue-library, vuejs
• Language: JavaScript
• Homepage: https://ittus.github.io/vue-long-click/
• Size: 3.6 MB
• Stars: 60
• Watchers: 3
• Forks: 10
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-long-click - Long click directive library for VueJS ` 📝 2 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-long-click - Long click (long press) directive library for vue, support mobile and desktop. (Components & Libraries / UI Components)
• awesome-vue - vue-long-click - Long click (long press) directive library for vue, support mobile and desktop. (UI Components / Form)

README

          
# vue-long-click

> Vue long click (longpress) directive

[![npm version](https://badge.fury.io/js/vue-long-click.svg)](https://www.npmjs.com/package/vue-long-click)

[![Test and Release](https://github.com/ittus/vue-long-click/actions/workflows/release.yml/badge.svg)](https://github.com/ittus/vue-long-click/actions/workflows/release.yml)

![Size](https://badgen.net/bundlephobia/min/vue-long-click)

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

![DemoGIF](./images/demo.gif)

## Install

```bash

npm install vue-long-click --save

```

```javascript

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

```html

```

and create custom directive to use

```javascript

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

Vue.directive('longclick', longClickInstance)

```

[CDN Demo on codepen](https://codepen.io/ittus/pen/BbeZOQ)

## Usage

```javascript

+

```

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

```bash

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

```