Главная

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

2019-08-04 в 15:10, admin, рубрики: javascript, mod dialog, vuejs, vuejs2

Добрый день. В этой статье я разберу способ, который позволяет при смене адреса показывать модальное окно для наших нужд. Я знаю, что есть собственное решение для компонента «modal» на офф сайте (https://ru.vuejs.org/v2/examples/modal.html). Вдобавок к этому на хабре есть много других статей, посвященных теме модальных окон во VueJs (например, https://habr.com/en/post/350232/).

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

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

Опять же, я всего знать не могу, поэтому, если если у вас есть что сказать или отметить, то я открыт к конструктивной критике. Далее мы будем использовать исключительно стандартный функционал инструментов, которые используем (Vue, VueRouter, Bootstrap Modal). Итак, ближе к делу…

Найдутся люди, которые скажут: «лучше подключить npm-зависимости для modal, чем тянуть весь bootstкap + jquery.». Товарищи, вам никто не мешает все это дело адаптировать под ваши нужды и инструменты.

Сразу рабочий вариант: https://jsfiddle.net/9jtx67gw/6/.

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,
})

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

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

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