Boa tarde Neste artigo, analisarei um método que permite mostrar uma janela modal para nossas necessidades ao alterar o endereço. Eu sei que existe uma solução proprietária para o componente modal
no site oficial . Além disso, existem muitos outros artigos sobre Habré dedicados ao tópico de janelas modais nos VueJs (por exemplo,
este ).
No entanto, na minha opinião, cada um deles tem suas desvantagens, por exemplo:
- no caso dos componentes descritos fora do local, você precisa criar uma variável separada e vincular a ela;
- o segundo artigo discute soluções de terceiros. Nesse caso, você precisa gastar tempo e descobrir como usar esses componentes + dependências extras, na minha opinião, no projeto. E eu mantenho a posição: quanto mais simples, melhor.
Mais uma vez, não sei tudo, portanto, se você tem algo a dizer ou a comentar, estou aberto a críticas construtivas. Além disso, usaremos exclusivamente a funcionalidade padrão das ferramentas que usamos (Vue, VueRouter, Bootstrap Modal). Então, mais perto do ponto ...
Haverá pessoas que dirão: "É melhor conectar dependências npm para modal do que puxar todo o bootstrap + jquery". Camaradas, ninguém está impedindo você de adaptar tudo isso às suas necessidades e ferramentas. As ferramentas acima são apenas um exemplo de implementação.
Opção de trabalho imediato .
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, })
Na verdade, não há nada complicado.
- Ao clicar no nosso link, nosso componente Modal é montado.
- Ao montá-lo, abrimos nossa janela modal e, por meio disso. $ Refs, rastreamos seu fechamento.
- Quando fechado, programaticamente retornamos a pessoa um passo atrás para que nosso componente seja desmontado.
Portanto, essa abordagem e essa estrutura são uma boa solução se você planeja ter muitas janelas modais com sua própria lógica separada:
- fácil personalização;
- Não há necessidade de carregar dependências de terceiros. Para mim, pessoalmente, quanto mais simples, melhor;