https://github.com/huangshuwei/vue-click-helper
A Vue directive to distinguish between click and double click
https://github.com/huangshuwei/vue-click-helper
click dblclick doubleclick vue-directive vue2
Last synced: 9 months ago
JSON representation
A Vue directive to distinguish between click and double click
- Host: GitHub
- URL: https://github.com/huangshuwei/vue-click-helper
- Owner: huangshuwei
- License: mit
- Created: 2017-08-18T07:45:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-24T01:50:39.000Z (over 8 years ago)
- Last Synced: 2025-02-24T13:49:04.623Z (10 months ago)
- Topics: click, dblclick, doubleclick, vue-directive, vue2
- Language: JavaScript
- Size: 9.77 KB
- Stars: 11
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-click-helper - A Vue directive to distinguish between click and double click (UI Utilities [🔝](#readme))
- awesome-vue-zh - Vue单击辅助 - 用于处理同一元素上的click事件和dblclick事件的Vue2.x指令. (UI实用程序 / 事件处理)
- awesome-vue - vue-click-helper - Vue2.x directive to handle click event and dblclick event on same element. (Components & Libraries / UI Utilities)
- awesome-vue - vue-click-helper ★6 - Vue2.x directive to handle click event and dblclick event on same element. (UI Utilities / Event Handling)
- awesome-vue - vue-click-helper - Vue2.x directive to handle click event and dblclick event on same element. (UI Utilities / Event Handling)
README
# vue-click-helper
Vue2.x directive to handle click event and dblclick event on same element
## Introduction
By default, two click interval of less than 300 ms will execute double click event, otherwise click events will execute click event
# Installation
```
npm i vue-click-helper -D
```
# Basic Usage
```html
click me
```
```javascript
import Vue from 'vue'
import vueClickHelper from 'vue-click-helper'
export default{
directives: {
'click-helper': vueClickHelper
},
methods:{
clickHelper(e,isDoubleClick){
if (isDoubleClick){
// execute double click logic...
}else{
// execute normal click logic...
}
}
}
}
```
# Advanced
If you want to set, execute double click within 290 milliseconds,just:
```html
click me
```
# License
http://www.opensource.org/licenses/mit-license.php