- PVSM.RU - https://www.pvsm.ru -
Добрый день. В этой статье я разберу способ, который позволяет при смене адреса показывать модальное окно для наших нужд. Я знаю, что есть собственное решение для компонента «modal» на офф сайте (https://ru.vuejs.org/v2/examples/modal.html [1]). Вдобавок к этому на хабре есть много других статей, посвященных теме модальных окон во VueJs (например, https://habr.com/en/post/350232/ [2]).
Однако, на мой взгляд, каждый из них имеет свои минусы, например:
Опять же, я всего знать не могу, поэтому, если если у вас есть что сказать или отметить, то я открыт к конструктивной критике. Далее мы будем использовать исключительно стандартный функционал инструментов, которые используем (Vue, VueRouter, Bootstrap Modal). Итак, ближе к делу…
Найдутся люди, которые скажут: «лучше подключить npm-зависимости для modal, чем тянуть весь bootstкap + jquery.». Товарищи, вам никто не мешает все это дело адаптировать под ваши нужды и инструменты.
Сразу рабочий вариант: https://jsfiddle.net/9jtx67gw/6/ [3].
<div id="app">
<nav>
<router-link :to="{ name: 'modal' }" exact>Open Modal</router-link>
</nav>
<router-view></router-view>
</div>
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,
})
Собственно, здесь нет ничего сложного.
Таким образом, такой подход и такая структура неплохое решение, если у вас в проекте планируется много модальных окон со своей отдельной логикой:
Автор: Дмитрий
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/326006
Ссылки в тексте:
[1] https://ru.vuejs.org/v2/examples/modal.html: https://ru.vuejs.org/v2/examples/modal.html
[2] https://habr.com/en/post/350232/: https://habr.com/en/post/350232/
[3] https://jsfiddle.net/9jtx67gw/6/: https://jsfiddle.net/9jtx67gw/6/
[4] Источник: https://habr.com/ru/post/462429/?utm_source=habrahabr&utm_medium=rss&utm_campaign=462429
Нажмите здесь для печати.