vue3-all-click-away
v1.0.0
Published
Vue 3.0 Compatible Click Away Directive, also including right clicks
Downloads
63
Maintainers
Readme
Vue All Click Away
Vue 3.0 Compatible Click Away Directive
Overview
Detect if a click event happened outside of an element, even right clicks. Compatible with Vue 3.x.
Requirements
- Vue 3.x
Installation
npm i -s vue3-all-click-away
yarn add vue3-all-click-away
Usage
By default the module exports a plugin, but you can also use this as a mixin which is documented below or as a directive.
import { createApp } from "vue";
import App from "./App.vue";
import VueAllClickAway from "vue3-all-click-away";
const app = createApp(App);
app.use(VueAllClickAway) // Makes 'v-all-click-away' directive usable in every component
app.mount('#app')
With Options API
<template>
<div v-all-click-away="onClickAway">
...
</div>
</template>
<script>
export default {
methods: {
onClickAway(event) {
console.log(event)
}
}
}
</script>
or with Vue Composition API & Typescript
<template>
<div v-all-click-away="onClickAway">
...
</div>
</template>
<script>
export default {
setup() {
const onClickAway = (event) => {
console.log(event)
}
return { onClickAway }
}
}
</script>
Directive
<template>
<div v-all-click-away="onClickAway">
...
</div>
</template>
import { directive } from "vue3-all-click-away";
export default {
directives: {
ClickAway: directive
},
methods: {
onClickAway(event) {
console.log(event);
}
}
}
Mixin
<template>
<div v-all-click-away="onClickAway">
...
</div>
</template>
import { mixin as VueAllClickAway } from "vue3-all-click-away";
export default {
mixins: [VueClickAway],
methods: {
onClickAway(event) {
console.log(event);
}
}
}