Posts Learn Components Snippets Categories Tags Tools 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

100 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

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours
)