hammer-directive-vue

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>