Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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: about 2 months ago
JSON representation

Long click directive library for VueJS

Lists

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

```