Vue.js custom directive detecting click outside element with TypeScript

Question

I am trying to create a custom directive using this example: https://stackoverflow.com/a/42389266/5470563

main.ts file:

import Vue from 'vue';
import HeaderNav from './components/HeaderNav.vue'

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
            // here I check that click was outside the el and his childrens
            if (!(el == event.target || el.contains(event.target))) {
                // and if it did, call method provided in attribute value
                vnode.context[binding.expression](event);
            }
        };
        document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind: function (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent)
    },
});

new Vue({
    el: '#app',
        components: {
            HeaderNav
        }
});

And I get a compile error:

Property 'clickOutsideEvent' does not exist on type 'HTMLElement'.

How do I fix it? Or is there any better solution to bind events on outside element click?

Józef Podlecki · Accepted Answer · 2020-05-11 14:12:02Z

2

You have 2 options

cast el param in bind, unbind function to any.

bind: function (el: any, binding, vnode) {
unbind: function (el: any) {

extend HTMLElement interface.

You can place it before directive declaration.

interface HTMLElement {
  clickOutsideEvent: () => void;
}

answered May 11, 2020 at 14:12

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

The50 Over a year ago

Compile runs fine now, but I get JS error after clicking anywhere: Uncaught TypeError: vnode.context[binding.expression] is not a function at HTMLBodyElement.el.clickOutsideEvent

The50 Over a year ago

Oh it's because I had no function defined as attribute for v-click-outside custom directive. Thank you!

Imtiyaz CHOUJAI · Accepted Answer · 2020-05-11 14:10:59Z

1

Here is an implementation I currently use, hope it helps:

export default {
  bind: function(el, binding, vNode) {
    // Provided expression must evaluate to a function.
    if (typeof binding.value !== "function") {
      const compName = vNode.context.name;
      let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`;
      if (compName) {
        warn += `Found in component '${compName}'`;
      }

      console.warn(warn);
    }
    // Define Handler and cache it on the element
    const bubble = binding.modifiers.bubble;
    const handler = e => {
      if (bubble || (!el.contains(e.target) && el !== e.target)) {
        binding.value(e);
      }
    };
    el.__vueClickOutside__ = handler;
    // add Event Listeners
    document.addEventListener("mousedown", handler);
  },
  unbind: function(el, binding) {
    // Remove Event Listeners
    document.removeEventListener("mousedown", el.__vueClickOutside__);
    el.__vueClickOutside__ = null;
  }
};

Then register the directive in your main file

// Directives
Vue.directive("click-outside", ClickOutside);

answered May 11, 2020 at 14:10

Imtiyaz CHOUJAI

214 bronze badges

2 Comments

Józef Podlecki Over a year ago

OP had typescript error, his javascript code looks fine.

Imtiyaz CHOUJAI Over a year ago

Just suggesting a solution I previously used in case this one didn't work out.

Collectives™ on Stack Overflow

Vue.js custom directive detecting click outside element with TypeScript

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related