Bon après-midi Dans cet article, je vais analyser une méthode qui vous permet d'afficher une fenêtre modale pour nos besoins lors du changement d'adresse. Je sais qu'il existe une solution propriétaire pour le composant modal
sur le site officiel . En plus de cela, il existe de nombreux autres articles sur Habré consacrés au sujet des fenêtres modales dans VueJs (par exemple,
celui-ci ).
Cependant, à mon avis, chacun d'eux a ses inconvénients, par exemple:
- dans le cas des composants décrits sur le site externe, vous devez créer une variable distincte et la lier à celle-ci;
- le deuxième article traite des solutions tierces. Dans ce cas, vous devez passer du temps et comprendre comment utiliser ces composants +, à mon avis, les dépendances supplémentaires dans le projet. Et je tiens la position: le plus simple sera le mieux.
Encore une fois, je ne peux pas tout savoir. Par conséquent, si vous avez quelque chose à dire ou à noter, je suis ouvert à des critiques constructives. De plus, nous utiliserons exclusivement les fonctionnalités standard des outils que nous utilisons (Vue, VueRouter, Bootstrap Modal). Alors, plus près du point ...
Il y aura des gens qui diront: "Il vaut mieux connecter les dépendances npm pour modal que de tirer tout le bootstrap + jquery." Camarades, personne ne vous empêche d'adapter tout cela à vos besoins et à vos outils. Les outils ci-dessus ne sont qu'un exemple de mise en œuvre.
Option fonctionnant immédiatement .
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, })
En fait, il n'y a rien de compliqué.
- En cliquant sur notre lien, notre composant Modal est monté.
- Lors du montage, nous ouvrons notre fenêtre modale et à travers celle-ci. $ Refs nous suivons sa fermeture.
- Lorsqu'il est fermé, nous renvoyons par programme à la personne un pas en arrière afin que notre composant soit démonté.
Ainsi, une telle approche et une telle structure est une bonne solution si vous prévoyez d'avoir de nombreuses fenêtres modales avec votre propre logique distincte:
- personnalisation facile;
- Pas besoin de charger des dépendances tierces. Pour moi personnellement, plus c'est simple, mieux c'est;