Vue ist eines der beliebtesten JavaScript-Frameworks, über das dynamische Webanwendungen implementiert werden können. In Vue gehören Popup-Fenster zu den am häufigsten verwendeten Komponenten und können zur Anzeige von Warnungen, Erfolgsmeldungen, Fehlermeldungen usw. verwendet werden. Vue stellt uns mehrere Methoden zur Implementierung von Popup-Komponenten zur Verfügung. In diesem Artikel werden einige davon vorgestellt.

Methode 1: Verwenden Sie die integrierte Komponente von Vue.js

Vue.js enthält eine Komponente, die Modalbox (Modal), mit der der Popup-Effekt erzielt wird. Die Implementierung der Modalbox erfordert die Verwendung einiger Anweisungen von Vue.js und CSS-Stilen.

Wir müssen zuerst die Komponente in die Vue-Komponente einführen:

In der Vorlage umgeben wir die Komponente, die angezeigt werden soll, in einem-Tag,@close< /code >Hören Sie sich das Abschlussereignis der Komponente modalan und setzen Sie die VariableshowModalauffalse. Zu diesem Zeitpunkt können Sie die Komponentemodalschließen, indem Sie auf einen leeren Bereich klicken oder die Esc-Taste drücken.标签中，@close监听modal组件关闭事件，将showModal变量设为false。此时，点击空白区域或者按下esc键都可以关闭modal组件。