vue-clickout-handler

Description

This is a simple directive to react when a click happens outside of a certain element.

Installation

npm install vue-clickout-hanlder --save

yarn add vue-clickout-hanlder

Basic Usage

// main.js
 
import { VueClickOut } from 'vue-clickout-handler';
 
Vue.directive('click-out', VueClickOut)

You can pass just a callback and it will be used as handler

<template>
  <div v-click-out="onClickOut">
    ...
  </div>
</template>
 
<script>
  export default {
    methods: {
      onClickOut () {
        // do something
      }
    }
  }
</script>

Or you can pass an object to include more options:

<template>
  <div id="my-div">
  </div>
  <div v-click-out="{ handler: onClickOut, excluded: ['#my-div'], disabled: disabled}">
    ...
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        disabled: false
      }
    },
    methods: {
      onClickOut () {
        // do something
      }
    }
  }
</script>

Options

Option	Type	Required	Description
handler	Function	true	The function invoked on click-outside event.
excluded	Array	false	A list of excluded elements, the handler will not be executed if any of these elements are clicked.
disabled	boolean	false	If true the handler will never be executed.