Selamat siang Pada artikel ini saya akan menganalisis metode yang memungkinkan Anda menunjukkan jendela modal untuk kebutuhan kita saat mengubah alamat. Saya tahu bahwa ada solusi eksklusif untuk komponen modal
di situs web resmi . Selain itu, ada banyak artikel lain tentang Habré yang membahas topik modal windows di VueJs (misalnya, yang
ini ).
Namun, menurut saya, masing-masing memiliki kekurangan, misalnya:
- dalam hal komponen yang dijelaskan di luar situs, Anda perlu membuat variabel terpisah dan mengikatnya;
- artikel kedua membahas solusi pihak ketiga. Dalam hal ini, Anda perlu menghabiskan waktu dan mencari cara untuk menggunakan komponen ini + tambahan, menurut pendapat saya, dependensi dalam proyek. Dan saya memegang posisi: semakin sederhana semakin baik.
Sekali lagi, saya tidak bisa tahu segalanya, karena itu, jika Anda memiliki sesuatu untuk dikatakan atau dicatat, maka saya terbuka untuk kritik yang membangun. Selanjutnya kita akan menggunakan fungsionalitas standar eksklusif dari alat yang kita gunakan (Vue, VueRouter, Bootstrap Modal). Jadi, lebih dekat ke intinya ...
Akan ada orang yang mengatakan: "Lebih baik untuk menghubungkan dependensi npm untuk modal daripada menarik seluruh bootstrap + jquery." Kawan-kawan, tidak ada yang menghentikan Anda dari menyesuaikan semua ini dengan kebutuhan dan alat Anda. Alat-alat di atas hanyalah contoh implementasi.
Opsi segera bekerja .
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, })
Sebenarnya tidak ada yang rumit.
- Saat mengklik tautan kami, komponen Modal kami sudah terpasang.
- Saat memasangnya, kami membuka jendela modal kami dan melalui ini. $ Referensi kami melacak penutupannya.
- Ketika ditutup, secara terprogram kami mengembalikan orang itu satu langkah ke belakang sehingga komponen kami dilepas.
Dengan demikian, pendekatan dan struktur seperti itu adalah solusi yang baik jika Anda berencana untuk memiliki banyak modal windows dengan logika Anda sendiri yang terpisah:
- kustomisasi mudah;
- Tidak perlu memuat dependensi pihak ketiga. Bagi saya pribadi, semakin sederhana semakin baik;