Advanced Click Directive For Vue.js 3

An advanced click directive to handle click, hold, release, press events in applications.

How to use it:

1. Import and register the click plugin.

import { createApp } from 'vue'
import VueClick from 'vue-click'
const app = createApp({})
app.use(VueClick)
app.mount('#app')

2. Usages:

// single click
<button v-click="myFunction" />

// throttle
<button v-click.throttle="myFunction" />
<button v-click.throttle.500ms="myFunction" />

// debounce
<button v-click.debounce="myFunction" />
<button v-click.debounce.20ms="myFunction">

// double click
<button v-click.double="myFunction" />

// time period: 1 second
<button v-click.double.1s="myFunction" />

// double click once
<button v-click.double.once="myFunction" />

// hold
<button v-click.hold="myFunction" />

// time period: 1 second
<button v-click.hold.1s="myFunction" />

// press
<button v-click:press="myFunction" />

// release
<button v-click:release="myFunction" />

Preview:

Advanced Click Directive For Vue.js 3

Changelog:

v2.1.6 (04/25/2021)

  • Update

v2.1.4 (05/12/2021)

  • Fixes disabled button dispatching with touch events

v2.1.3 (03/25/2021)

  • Adds disabled state to css

v2.1.2 (03/23/2021)

  • Fixes documentation

Download Details:

Author: bayssmekanique

Live Demo: https://bayssmekanique.github.io/vue-click/

Download Link: https://github.com/bayssmekanique/vue-click/archive/master.zip

Official Website: https://github.com/bayssmekanique/vue-click

Install & Download:

# NPM
$ npm i vue-click
Tags:

Add Comment