0.2.0 • Published 4 years ago
vue-tap-away v0.2.0
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>