Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-recognizer with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. var vueRecognizer = require("vue-recognizer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-recognizer v1.1.3

Vue.js plugin to recognize touch, mouse, pointer events using hammerjs

vue-recognizer Build Status

Vue.js plugin to recognize touch, mouse, pointer events using Hammer.js.

Install

npm install --save vue-recognizer

Usage

Import vue-recognizer and install it.

import Vue from 'vue';
import VueRecognizer from 'vue-recognizer';

Vue.use(VueRecognizer);
<template>
  <div
    v-recognizer:pan="onPan"
    v-recognizer:pan.right="onPanRight"
  >
    Lorem ipsum
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    onPan(e: HammerInput) {...},
    onPanRight(e: HammerInput) {...}
  }
});
</script>

As Nuxt plugin

Prepare plugin file to install this plugin as below. Then name it such as vue-recognizer.ts and put it into plugins folder.

import Vue from 'vue';
import VueRecognizer from 'vue-recognizer';

Vue.use(VueRecognizer);

To load it, configure nuxt.config.js or nuxt.config.ts as below.

const config = {
  plugins: [
    {
      src: '~/plugins/vue-recognizer.ts',
      ssr: false
    }
  ]
};

export default config;

API

Pan

  • v-recognizer:pan="onPan"
  • v-recognizer:pan.start="onPanStart"
  • v-recognizer:pan.move="onPanMove"
  • v-recognizer:pan.end="onPanEnd"
  • v-recognizer:pan.cancel="onPanCancel"
  • v-recognizer:pan.left="onPanLeft"
  • v-recognizer:pan.right="onPanRight"
  • v-recognizer:pan.up="onPanUp"
  • v-recognizer:pan.down="onPanDown"

Pinch

  • v-recognizer:pinch="onPinch"
  • v-recognizer:pinch.start="onPinchStart"
  • v-recognizer:pinch.move="onPinchMove"
  • v-recognizer:pinch.end="onPinchEnd"
  • v-recognizer:pinch.cancel="onPinchCancel"
  • v-recognizer:pinch.in="onPinchIn"
  • v-recognizer:pinch.out="onPinchOut"

Press

  • v-recognizer:press="onPress"
  • v-recognizer:press.up="onPressUp"

Rotate

  • v-recognizer:rotate="onRotate"
  • v-recognizer:rotate.start="onRotateStart"
  • v-recognizer:rotate.move="onRotateMove"
  • v-recognizer:rotate.end="onRotateEnd"
  • v-recognizer:rotate.cancel="onRotateCancel"

Swipe

  • v-recognizer:swipe="onSwipe"
  • v-recognizer:swipe.left="onSwipeLeft"
  • v-recognizer:swipe.right="onSwipeRight"
  • v-recognizer:swipe.up="onSwipeUp"
  • v-recognizer:swipe.down="onSwipeDown"

Tap

  • v-recognizer:tap="onTap"
  • v-recognizer:doubletap="onDoubleTap"

License

MIT © Shogo Sensui

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free