How to close the pop-up window by vuejs

This article mainly shows you "vuejs how to close the pop-up window", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vuejs how to close the pop-up window" this article.

Vuejs closes the pop-up window: 1, create the html code structure; 2, determine whether the clicked area is in ".mask _ popup"; 3, close the pop-up window through "hideMaskPopup (e) {...}".

This article operating environment: windows7 system, vue2.5.17 version, DELL G3 computer.

How does vuejs close the pop-up window?

Vue.js clicks outside the pop-up window to close the pop-up window

Click the area outside the popup window to close the code structure of the popup window.

Html:

Content code.

Js:

Data () {showMaskPopup:false}, methods: {hideMaskPopup (e) {let mask = document.querySelector (".mask _ popup"); if (mask) {if (! mask (e.target)) {/ / determine whether the clicked area is in .mask _ popup this.showMaskPopup = false }}

Achieve results:

The above is all the contents of the article "how to close the pop-up window in vuejs". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!