Advanced Click Directive For Vue.js 3

Install & Download:

# NPM
$ npm i vue-click

Description:

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" />