vue-outside-click

Directive for VueJS, handle click outside target element
5,228 1
vue click directive outside
Install
npm install vue-outside-click
Latest Version:0.1.0
License:MIT
Last Updated:Mar 14, 2021
Links: GitHub  ·  npm
Maintainer: 99percent6

vue-outside-click

It's vue directive for handle click outside target element

Installation

$ npm install vue-outside-click

or

$ yarn add vue-outside-click

Example

<template>
  <div v-outside-click="{handler: hideMenu, additionalIds: ['header-menu-btn-catalog']}" class="example">
      Content
  </div>
</template>

<script>
import outsideClick from 'vue-outside-click'

export default {
  directives: {
    outsideClick
  },
  methods: {
    hideMenu () {
      // some actions
    }
  }
}
</script>

Additional info

If you want another element to have a similar behavior when clicking, you can add the id of this element to prop 'additionalIds' (string array).

Related Packages

v-click-outside-x

Vue directive to react on clicks outside an element.

792,715 7
click directive outside vue
v3-click-outside

Vue3 directive to react on clicks outside an element. Its simple to use. And can...

22,256 4
click directive outside vue3
vue-clickoutside

A Vue directive about listener a click outside an element.

9,169 10
click directive outside vue
vue-click-outside-of

Vue 3 directive and hook for detecting click outside an element

18,967 1
click directive outside vue click outside hook vue3
vue-click-helper

A Vue directive to distinguish between click and double click

3,059 10
click directive vue dblclick double click

Version History

Version Released License
0.1.0 MIT