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:
Changelog:
v2.1.7 (11/21/2021)
- Updates dependencies
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