Nuclear Powered Macros

    vue-recognizer
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    vue-recognizer GitHub Actions 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

    Install

    npm i vue-recognizer

    DownloadsWeekly Downloads

    156

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    109 kB

    Total Files

    12

    Last publish

    Collaborators

    • 1000ch