Posts Learn Components Snippets Categories Tags Tools new About
/

How to Define Vue Js Click Away Directive

Learn how to define Vue Js click away directive to trigger a function when the user clicks outside of the bound element

Created on Sep 11, 2021

63 views

To define a directive that triggers a function when the user clicks outside of the bound element in Vue Js, you can write it like below. Having this directive is very powerful when creating a model/popper component that has a clickable backdrop to close/hide the particular component.
<template>
  <div v-clickaway="clickOutside">Hide me</div>
</template>

<script>
Vue.directive('clickaway', {
  bind (el, { value }) {
    if (typeof value !== 'function') {
      console.warn(`Expect a function, got ${value}`);

      return;
    }

    document.addEventListener('click', e => el.contains(e.target) || value());
  }
});

export default {
  methods: {
    clickOutside () {
      // your logic here
    }
  }
}
</script>

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Define Vue Js Click Away Directive

)