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: 5 days 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 (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:56:16.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T01:47:35.355Z (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: 57
- Watchers: 4
- Forks: 11
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
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
```