Newtonian Particle Motion

    vue-tap-away

    0.2.0 • Public • Published

    vue-tap-away

    Reusable tap-away directive to detect taps/clicks outside an element. Works with touch devices!

    Environments

    This plugin supports Vue version 2 and is written in ES6. You will need a transpiler to run this plugin on older browsers.

    Installation

    yarn add vue-tap-away
    npm install vue-tap-away
    
    // This package requires: hammerjs, lodash and propagating-hammerjs
    

    Usage

    import Vue from 'vue';
    import { TapAway, TapStop } from 'vue-tap-away';
     
    Vue.directive('tap-away', TapAway);
    Vue.directive('tap-stop', TapStop);

    v-tap-away:

    <template>
        <div
            v-if="show"
            v-tap-away="hideMe"
        >
            Aw ye
        </div>
    </template>
     
    <script>
    export default {
        data: () => ({
            show: true,
        }),
        methods: {
            hideMe() {
                this.show = false;
            }
        },
    };
    </script>

    v-tap-stop:

    <template>
        <div v-tap-stop>
            Taps on this element won't propagate!    
        </div>
    </template>

    Also possible to have v-tap-stop conditionally apply:

    <template>
        <div v-tap-stop="false">
            Taps on this element WILL propagate
        </div>
    </template>

    Install

    npm i vue-tap-away

    DownloadsWeekly Downloads

    10

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    22

    Last publish

    Collaborators

    • aariacarterweir