Vue V2 directive to react on clicks outside an element.
$ npm install --save v-click-outside-x$ yarn add v-click-outside-ximport Vue from 'vue';
import * as vClickOutside from 'v-click-outside-x';
Vue.use(vClickOutside);<script>
export default {
methods: {
onClickOutside(event) {
console.log('Clicked outside. Event: ', event);
},
},
};
</script>
<template>
<div v-click-outside="onClickOutside"></div>
</template><script>
export default {
directives: {
clickOutside: vClickOutside.directive,
},
methods: {
onClickOutside(event) {
console.log('Clicked outside. Event: ', event);
},
},
};
</script>
<template>
<div v-click-outside="onClickOutside"></div>
</template>It is not a very common need to call event.preventDefault(), event.stopPropagation() or
event.stopImmediatePropagation() for click outside event handlers.
Care should be taken when using these!
The need for capture though, is reasonably common when you want menus or dropdown to behave more like their native elements.
<template>
<!-- the click event´s propagation will be stopped -->
<div v-click-outside.stop="doThis"></div>
<!-- the click event´s default will be stopped -->
<div v-click-outside.prevent="doThat"></div>
<!-- modifiers can be chained -->
<div v-click-outside.stop.prevent="doThat"></div>
<!-- use capture mode when adding the event listener -->
<div v-click-outside.capture="doThis"></div>
</template>By default, if no argument is supplied then click will be used. You can specify
the event type being bound by supplying an arguments, i.e. pointerdown.
<script>
export default {
methods: {
onClickOutside(event) {
console.log('Clicked outside. Event: ', event);
},
},
};
</script>
<template>
<div v-click-outside:pointerdown="onClickOutside"></div>
</template>For support of the PointerEvent API, consider loading the Pointer Events Polyfill.
<script>
export default {
methods: {
onClickOutside1(event) {
console.log('Clicked outside 1. Event: ', event);
},
onClickOutside2(event) {
console.log('Clicked outside 2. Event: ', event);
},
onClickOutside3(event) {
console.log('Clicked outside 3. Event: ', event);
},
},
};
</script>
<template>
<div
v-click-outside.capture="onClickOutside1"
v-click-outside:click="onClickOutside2"
v-click-outside:pointerdown.capture="onClickOutside3"
></div>
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent