javascript – So schließen Sie das Modal, indem Sie auf eine andere Stelle in Vue klicken

Question

Wie im Bild gezeigt, wie kann ich diese Popup-Ebene schließen, indem ich auf eine andere Stelle klicke? Es ist sehr einfach, mit jquery zu arbeiten. Ich möchte wissen, was die Idee ist, diese Funktion in Vue zu implementieren.

Answer 1

当弹出modal的时候，在modal下面写一个遮罩层overlay, css样式为position: fixed; top: 0; right: 0; bottom: 0; left: 0;并在其上面绑定一个点击事件关闭modal

Answer 2

可以在全局绑定一个点击事件，在这个弹出层上阻止点击事件的冒泡，就可以达到你想要的效果。

Answer 3

如果引入jquery的话，就用jquery的写法在当前组件上面写，否则就自己写原生事件了。
可以参考element.ui 的popover组件的相关写法63行。