hammer-directive-vue
v1.2.5
Published
hammerjs directive for vue3
Downloads
64
Maintainers
Readme
Hammerjs directive for vue3
simple directive for vuejs 3
Installation
Install my-project with npm
npm i hammer-directive-vue
Usage/Examples
method 1
- global register directive
import {hammerVue} from 'hammer-directive-vue';
const app = createApp({});
app.directive('hammer',hammerVue);
method 2
- register in vue component
import {hammerVue} from 'hammer-directive-vue';
...
export default {
...
directives: {
...
'hammer':hammerVue
}
}
Usage
v-hammer:*
for listen to RECOGNIZERS
v-hammer:*.set
for set RECOGNIZERS setting
| RECOGNIZER | desc | | ----- | ---- | | pan | doc | | pinch | doc | | rotate | doc | | press | doc | | swipe | doc | | tap | doc |
<div
v-hammer:press.set="{pointers:2}"
v-hammer:press="(e)=>console.log(e)"
></div>
using name
use hammer directive with diffrent setting in same time
import {hammerVueName} from 'hammer-directive-vue';
...
export default {
...
directives: {
...
'hammerO':hammerVueName('hammerOne'),
'hammerT':hammerVueName('hammerTwo'),
}
}
and then uing in tag like this
<div
v-hammerO:press.set="{pointers:2}"
v-hammerO:press="(e)=>console.log(e)"
v-hammerT:press.set="{pointers:3}"
v-hammerT:press="(e)=>console.log(e)"
></div>