javascript - How to close the modal by clicking elsewhere in vue

Question

As shown in the picture, how to close this pop-up layer by clicking elsewhere? It is very simple to operate with jquery. I would like to know what is the
idea to implement this function in vue?

Answer 1

When the modal pops up, write a mask layer overlay under the modal, the css style is position: fixed; top: 0; right: 0; bottom: 0; left: 0; and bind a click event to it to close the modal

Answer 2

You can bind a click event globally and prevent the click event from bubbling on this pop-up layer to achieve the effect you want.

Answer 3

If jquery is introduced, use jquery writing method to write on the current component, otherwise you will write native events yourself.
You can refer to line 63 of the related writing method of the popover component of element.ui.