vue-long-click's Introduction

vue-long-click

Vue long click (longpress) directive

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

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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

vue-long-click's People

Contributors

Stargazers

Watchers

vue-long-click's Issues

Click event should be suppressed once longclick has fired

If I have an element with both a @click handler and a v-longclick directive, I would expect that once the longclick event has fired, my click handler won't be called on mouseup – but it is.

At least, I think this should be offered as a configuration option.

Can we use this from CDN?

Can I use this from a CDN without using the Vue CLI?

Import warning

I think that the export is not correct. The ES6 validation give a warning in the import.
import { longClickDirective } from 'vue-long-click'

Maybe you could declare the variable

const longClickDirective = {
    <directive here>
}

and then export it

export default longClickDirective`

export {
  longClickDirective
}

Right-click triggers it?

Long-press works as expected, but also right-click triggers it? Why?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

TensorFlow

An Open Source Machine Learning Framework for Everyone

Django

The Web framework for perfectionists with deadlines.

Laravel

A PHP framework for web artisans

D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

web

Some thing interesting about web. New door for the world.

server

A server is a program made to process requests and deliver data to clients.

Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

Visualization

Some thing interesting about visualization, use data art

Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.

Microsoft

Open source projects and samples from Microsoft.

Google

Google ❤️ Open Source for everyone.

Alibaba

Alibaba Open Source for everyone

D3

Data-Driven Documents codes.

Tencent

China tencent open source team.

ittus / vue-long-click Goto Github PK