Buenas tardes En este artículo analizaré un método que le permite mostrar una ventana modal para nuestras necesidades al cambiar la dirección. Sé que hay una solución patentada para el componente modal
en el sitio web oficial . Además de esto, hay muchos otros artículos sobre Habré dedicados al tema de las ventanas modales en VueJs (por ejemplo,
este ).
Sin embargo, en mi opinión, cada uno de ellos tiene sus inconvenientes, por ejemplo:
- en el caso de los componentes descritos en el sitio externo, debe crear una variable separada y vincularla;
- El segundo artículo discute soluciones de terceros. En este caso, necesita pasar tiempo y descubrir cómo usar estos componentes + adicionales, en mi opinión, dependencias en el proyecto. Y mantengo el puesto: cuanto más simple, mejor.
Nuevamente, no puedo saberlo todo, por lo tanto, si tiene algo que decir o anotar, entonces estoy abierto a críticas constructivas. Además, utilizaremos la funcionalidad estándar exclusiva de las herramientas que usamos (Vue, VueRouter, Bootstrap Modal). Entonces, más cerca del punto ...
Habrá gente que diga: "Es mejor conectar las dependencias npm para modal que extraer todo el bootstrap + jquery". Camaradas, nadie le impide adaptar todo esto a sus necesidades y herramientas. Las herramientas anteriores son solo un ejemplo de implementación.
Opción de trabajo inmediato .
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 realidad, no hay nada complicado.
- Al hacer clic en nuestro enlace, nuestro componente modal está montado.
- Al montarlo, abrimos nuestra ventana modal y a través de esto. $ Refs rastreamos su cierre.
- Cuando está cerrado, regresamos programáticamente a la persona un paso atrás para que nuestro componente se desmonte.
Por lo tanto, este enfoque y tal estructura es una buena solución si planea tener muchas ventanas modales con su propia lógica separada:
- fácil personalización;
- No es necesario cargar dependencias de terceros. Para mí personalmente, cuanto más simple, mejor;