Using Custom Events

[Zag42]

Hello,

First of all, thanks for this wrapper!

I am trying to add two custom events (single and double tap gestures) by using the "customEvents" property of VueHammer, but i have the following error:

[Vue warn]: Error in directive hammer bind hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_hammerjs___default.a[that.capitalize(...)] is not a constructor"

found in

---> <PdfPageView> at src/components/pdf/PdfPageView.vue

This property is not documented in your readme, is it supported/working? Or am i doing this all wrong ? Thanks

Here is what i have:

// ... my other  imports
import { VueHammer } from 'vue2-hammer'
import Hammer from 'hammerjs'
// ...
var singleTap = new Hammer.Tap({event: 'singletap'})
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2})
VueHammer.customEvents = {
  'singletap': singleTap,
  'doubletap': doubleTap
}
Vue.use(VueHammer)

In my template:

<template>
<div class="adr_fullpagecontainer" :id="this.fullpageId">
  <transition v-bind:name="transitionName" id="adr_slide_transition" style="height:100%">
    <canvas 
    v-hammer:pinch="onPinch"
    v-hammer:pinchend="onPinchEnd"
    v-hammer:pinchstart="onPinchStart"
    v-hammer:panstart="onPanStart"
    v-hammer:pan.all="onPanMove"
    v-hammer:panend="onPanEnd"
    v-hammer:singletap="onTap"
    v-hammer:doubletap="onDoubleTap"
    class="adr_fullcanvas" :id="this.canvasId" height="100%" ></canvas>
  </transition>
</div>
</template>

And in my component methods :

onTap(e) {
      console.log('onTap count: ' + e.tapCount)
    },
    onDoubleTap(e) {
      console.log('onDoubleTap count: ' + e.tapCount)
    },

[vesper8]

having similar issue.. did you figure it out by any chance?

[bsdfzzzy]

Yes, for now, this is not supported. But I'll add it into next big version.

[inspirity]

missing double tap too...

[lzx-cvte]

// just like that
import { VueHammer } from 'vue2-hammer'
// ...
const doubleTap = { type: 'Tap', event: 'doubletap', taps: 2 };
VueHammer.customEvents = {
  'doubletap': doubleTap
}
Vue.use(VueHammer)

// Use
<div v-hammer:doubletap="onDoubleTap"></div>

[bapman81]

Big thanks to @lzx-cvte, this should be part of the official doc!