In this lesson, let's create a directive that's going to solve a real-world problem. Here on the right-hand side, I've got a box with some text in it. And when I click outside of it, I want to be able to run some custom function. This is a really common feature when it comes to closing menu items or closing tooltips.
You want to be able to click outside of it in order to close it. So what I have here on the left-hand side is the Markup for that box, and it would be nice if I could add a vClickOutside directive to it, and then run some arbitrary function whenever we click outside. My handleClickedOutside function is defined up above, and it just alerts you clicked outside. Cool.
Let's get our directive working. In Script Setup, I'll define the directive using the object syntax. I've chosen the object syntax so that I can execute code on both the mounted and unmounted hooks. Now inside of mounted, we have access to the element and the binding.
Inside of mounted, I'll start by listening to the click event on the body, and that will of course receive the event. Next, we can check if the element that the directive is bound to is the same as the event target, or if the event target is one of the children of the element. And if it's not, then we want to run the function that is passed as the value to the directive. Optionally, we could also give this function the event itself so that it has more information to work with.
For our use case though, it's not really necessary, but it's still good practice to provide. Next, I'll move my callback function to a property on the element. That way I can remove it inside of unmounted. Perfect.
Now all that's left is to actually remove it inside of the unmounted hook. Now over on the right hand side, I should be able to click inside my box with no alert. But we actually get the alert. I think that's because I forgot the parentheses around our conditional here.
So that should be not either one of those things like that. Let's give it a try again now. A click inside gives no alert. And then the click outside shows the alert.
Awesome. In this lesson, let's create a directive that's going to solve a real-world problem. Here on the right-hand side, I've got a box with some text in it. And when I click outside of it, I want to be able to run some custom function.
This is a really common feature when it comes to closing menu items or closing tooltips. You want to be able to click outside of it in order to close it. So what I have here on the left-hand side is the Markup for that box, and it would be nice if I could add a vClickOutside directive to it, and then run some arbitrary function whenever we click outside. My handleClickedOutside function is defined up above, and it just alerts you clicked outside.
Cool. Let's get our directive working. In Script Setup, I'll define the directive using the object syntax. I've chosen the object syntax so that I can execute code on both the mounted and unmounted hooks.
Now inside of mounted, we have access to the element and the binding. Inside of mounted, I'll start by listening to the click event on the body, and that will of course receive the event. Next, we can check if the element that the directive is bound to is the same as the event target, or if the event target is one of the children of the element. And if it's not, then we want to run the function that is passed as the value to the directive.
Optionally, we could also give this function the event itself so that it has more information to work with. For our use case though, it's not really necessary, but it's still good practice to provide. Next, I'll move my callback function to a property on the element. That way I can remove it inside of unmounted.
Perfect. Now all that's left is to actually remove it inside of the unmounted hook. Now over on the right hand side, I should be able to click inside my box with no alert. But we actually get the alert.
I think that's because I forgot the parentheses around our conditional here. So that should be not either one of those things like that. Let's give it a try again now. A click inside gives no alert.
And then the click outside shows the alert. Awesome.