Хабрахабр

VueJs + VueRouter + modal. Очередной велосипед

Добрый день. В этой статье я разберу способ, который позволяет при смене адреса показывать модальное окно для наших нужд. Я знаю, что есть собственное решение для компонента «modal» на официальном сайте. Вдобавок к этому на Хабре есть много других статей, посвященных теме модальных окон во VueJs (например, вот эта).

Однако, на мой взгляд, каждый из них имеет свои минусы, например:

  • в случае изложенном на офф сайте компоненты нужно создавать отдельную переменную и привязываться к ней;
  • во второй статье рассматриваются решения сторонних разработчиков. В этом случае нужно потратить время и разобраться как использовать эти компоненты + лишние, на мой взгляд, зависимости в проект. А я придерживаюсь позиции: чем проще, тем лучше.

Опять же, я всего знать не могу, поэтому, если если у вас есть что сказать или отметить, то я открыт к конструктивной критике. Далее мы будем использовать исключительно стандартный функционал инструментов, которые используем (Vue, VueRouter, Bootstrap Modal). Итак, ближе к делу…
Найдутся люди, которые скажут: «лучше подключить npm-зависимости для modal, чем тянуть весь bootstкap + jquery.». Товарищи, вам никто не мешает все это дело адаптировать под ваши нужды и инструменты.

Сразу рабочий вариант.

HTML

<div id="app"> <nav> <router-link :to="" 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,
})

Собственно, здесь нет ничего сложного.

  1. При переходе по нашей ссылке, монтируется наш компонент Modal.
  2. При его монтировании мы открываем наше модальное окно и через this.$refs отслеживаем его закрытие.
  3. При его закрытии мы программно возвращаем человека на шаг назад, чтобы наш компонент отмонтировался.

Таким образом, такой подход и такая структура неплохое решение, если у вас в проекте планируется много модальных окон со своей отдельной логикой:

  • легкая кастомизация;
  • не нужно подгружать сторонние зависимости. Лично для меня чем проще, тем лучше;
Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть