Как использовать Bootstrap Modals с Vue JS

Вы будете зарабатывать больше денег и заслужите больше уважения, если будете предоставлять качественный код быстрее. Laranerds.dev поможет вам сделать именно это. Подпишитесь, чтобы получать уведомления о публикации новых ресурсов.

Модалы популярны не просто так — это отличный способ дать пользователю возможность сделать что-то, не прерывая контекст текущей страницы.

Почти наверняка вам придется подключить более нескольких модалов в своем приложении, поэтому стоит освоить их.

Продолжайте читать, если вы хотите получить простое объяснение того, как использовать Bootstrap-модалы в вашем приложении Vue3.

Простые шаги для открытия и закрытия модала

Все шаги ниже демонстрируются с использованием синтаксиса Vue3 Composition API.

1. Скопируйте/вставьте код Bootstrap для вашего модала в шаблон приложения.
2. В хуке onMounted() запросите dom для вашего модального HTML-элемента и инициализируйте модальный объект с помощью библиотеки Bootstrap.
3. Вызовите show() и hide() для вашего модального объекта по мере необходимости.

Модальный HTML

Прямо из документации Bootstrap:

<template>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

По мере того как вы будете размещать все больше и больше модалов в своем шаблоне, вам захочется придумать какое-то последовательное соглашение об именовании, чтобы было легче находить модалы в коде. Мне нравится переименовывать идентификаторы модалов в соответствии с их назначением.

В моем видео ниже я назвал модал modal_demo. В других видео я называю свои модалы modal_client_form или modal_client_delete_confirm.

Используйте любое удобное для вас соглашение.

Инициализируйте ваш модал в onMounted() Hook

<script setup>

import { reactive, onMounted } from 'vue'

const state = reactive({
    modal_demo: null,
})

onMounted(() => {
    state.modal_demo = new bootstrap.Modal('#modal_demo', {})
})

function openModal()
{
    state.modal_demo.show()
}

function closeModal()
{
    state.modal_demo.hide()
}



</script>

Открытие и закрытие модала

1. Измените атрибут id в модале так, чтобы он соответствовал id, запрошенному в onMounted()
2. удалите атрибут data- из двух кнопок закрытия, а вместо него добавьте директиву Vue @click.

<template>

<!-- Button trigger modal -->
<button 
    type="button" 
    class="btn btn-primary" 
    @click="openModal" 
>
    Launch demo modal
</button>



<!-- Modal -->
<div class="modal fade" id="modal_demo" tabindex="-1" aria-labelledby="modal_demo_label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_demo_label">Modal title</h5>
        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

Вот и все!

Если вы добавите новые модалы, возможно, вам захочется изменить функции openModal и closeModal на что-то более конкретное, например modal_demo_open() и modal_demo_close(). Конечно, вы захотите обрабатывать открытие и закрытие каждого модала отдельно.

Вы можете увидеть все вышеописанное в действии здесь: