Shulou(Shulou.com)06/01 Report--

This article will explain in detail how vue can close the target area outside the target area. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Click outside the target area to close the target area solution 1

1. The content in the vue module-- the div whose class is myPanel is the widget we have to deal with.

2. Define click events-add click events directly to the lifecycle hook function mounted (after dom loading is completed), and the corresponding effect can be achieved by judging the class name of the target element.

Mounted () {document.addEventListener ('click', (e) = > {if (e.target.className! =' myPanel') {this.panelShow= false;}}) method 2

1. The content in the vue module-- the div whose class is myPanel is the widget we have to deal with. Among them, the stop modifier is used to prevent the transfer of the function, which simply means that it executes the events bound by itself without affecting the events bound in other locations. There is no processing in the clickPanel function, which is simply used to prevent the click event from being passed to the click event bound to the body.

2. Listen for the value of panelShow via watch, corresponding to the click event bound / unbound in body

Watch: {panelShow (val) {if (val) {document.body.addEventListener ('click', () = > {this.panelShow = false;})} else {document.body.removeEventListener (' click', () = > {});}

Note: you can also bind a click event to body and then determine whether the clicked element is an element that needs to be hidden.

Vue Click outside the component to hide the component itself

When developing a component, it is common to click on the outside of the component to hide the component itself, such as time selection box components, drop-down options, and so on.

Figure: click the outer element to hide the custom license plate selection box

The code is written as shown in the figure

Core

1. Add a @ click.stop to the outermost div (cancel event bubbling) without adding the event name.

2. Add a click event to body in mounted, which triggers the hiding of the component.

Document.body.addEventListener ('click', () = > {this.show = false;}, false); on "how to click on the target area outside the target area can be closed" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.