Guten Tag. In diesem Artikel werde ich eine Methode analysieren, mit der Sie beim Ändern der Adresse ein modales Fenster für unsere Anforderungen anzeigen können. Ich weiß, dass es
auf der offiziellen Website eine proprietäre Lösung für die modale Komponente gibt. Darüber hinaus gibt es viele andere Artikel über Habré, die sich mit dem Thema modale Fenster in VueJs befassen (zum Beispiel
diesen ).
Meiner Meinung nach hat jeder von ihnen jedoch seine Nachteile, zum Beispiel:
- Bei den auf der externen Site beschriebenen Komponenten müssen Sie eine separate Variable erstellen und an diese binden.
- Der zweite Artikel beschreibt Lösungen von Drittanbietern. In diesem Fall müssen Sie Zeit aufwenden und herausfinden, wie diese Komponenten verwendet werden + meiner Meinung nach zusätzliche Abhängigkeiten im Projekt. Und ich halte die Position: Je einfacher desto besser.
Auch hier kann ich nicht alles wissen. Wenn Sie also etwas zu sagen oder zu beachten haben, bin ich offen für konstruktive Kritik. Darüber hinaus verwenden wir ausschließlich die Standardfunktionalität der von uns verwendeten Tools (Vue, VueRouter, Bootstrap Modal). Also näher am Punkt ...
Es wird Leute geben, die sagen: "Es ist besser, npm-Abhängigkeiten für modal zu verbinden, als den gesamten Bootstrap + jquery zu ziehen." Genossen, niemand stört Sie, diese ganze Sache an Ihre Bedürfnisse und Werkzeuge anzupassen. Die oben genannten Tools sind nur ein Beispiel für die Implementierung.
Sofort funktionierende Option .
HTML<div id="app"> <nav> <router-link :to="{ name: 'modal' }" exact>Open Modal</router-link> </nav> <router-view></router-view> </div>
Javascript Vue.use(VueRouter) const Modal = { template: `<div class="modal fade" tabindex="-1" role="dialog" ref="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> mounted: function(){ console.log('mounted') var context = this; $(this.$refs.modal).modal('show') $(this.$refs.modal).on('hidden.bs.modal', function(){ context.$router.go(-1); }) } } const routes = [ { path: '/modal', name: 'modal', component: Modal }, ] const router = new VueRouter({ routes, }) // New VueJS instance var app = new Vue({ // CSS selector of the root DOM element el: '#app', // Inject the router into the app router, })
Eigentlich gibt es nichts kompliziertes.
- Wenn Sie auf unseren Link klicken, wird unsere Modal-Komponente gemountet.
- Bei der Montage öffnen wir unser modales Fenster und durch dieses. $ Refs verfolgen wir das Schließen.
- Wenn es geschlossen ist, geben wir die Person programmgesteuert einen Schritt zurück, damit unsere Komponente nicht gemountet wird.
Ein solcher Ansatz und eine solche Struktur sind daher eine gute Lösung, wenn Sie viele modale Fenster mit einer eigenen Logik planen:
- einfache Anpassung;
- Abhängigkeiten von Drittanbietern müssen nicht geladen werden. Für mich persönlich gilt: Je einfacher, desto besser.