Как создать многоразовое модальное окно Vue, но с некоторыми расширенными функциями
Вступление
Раньше я писал одну статью о том, как создать многоразовое модальное окно Vue, и это было год назад. Я благодарен за то, что его прочитали многие, хотя он и слишком новичок. Сегодня я хотел бы научить вас, как создавать многоразовые модальные окна Vue, но с некоторыми расширенными функциями.
Мы собираемся создать многоразовый модальный компонент с множественной поддержкой.
- На основе компонентов
- Рендеринг в корневом DOM
- Использование слота для рендеринга контента
- Возможность добавления прокручиваемого контента
- Нажмите клавишу выхода, чтобы выйти из модального окна.
- Переход анимации
Давайте разберемся, как это построить.
Создайте шаблон HTML / CSS
Прежде всего, давайте создадим новый файл для нашего модального компонента и назовем его BaseModal.vue
Поскольку я подготовил шаблон для работы в HTML и CSS, давайте добавим его в наш модальный компонент и отобразим на нашей странице.
Создайте кнопку для запуска модального
Прохладный. Давайте добавим метод для управления видимостью модального окна. Я собираюсь добавить новую кнопку с методами openModal и добавить новый вызов состояния this.isShowModal. Каждый раз, когда пользователь нажимает кнопку, значение isModalOpen меняется на противоположное.
Прохладный. Итак, давайте добавим способ закрыть модальное окно. Мы хотим, чтобы когда пользователь нажимал значок x или кнопку отмены, модальное окно закрывалось.
В модальном компоненте добавьте новый метод с именем handleClose, он запустит родительский элемент, который слушает close слушателя.
В компонент контейнера мы добавим вызов слушателя close, и он запустит метод toggleModal, который мы только что создали.
Использовать портал Vue
Вроде все шло гладко. Чтобы сделать его более гибким, давайте отрендерим это модальное окно вне DOM контейнера. Поскольку мы имеем дело с абсолютной позицией, давайте уменьшим трение для ее рендеринга.
Мы собираемся использовать портал vue с вызовом библиотеки - GitHub - LinusBorg / portal-vue: многофункциональный плагин портала для Vue, для рендеринга DOM вне компонента, в любом месте нашего приложения или всего документа.
Давайте установим vue-portal
npm i portal-vue yarn add portal-vue
Добавьте зависимость в свой main.js
Добавьте портал в то место, где вы хотите отображать модальное окно. В этом случае я собираюсь визуализировать его внутри корневого компонента Vue - App.vue
Чтобы использовать его, оберните наш модальный компонент в <portal-target></portal-target>
Теперь наше модальное окно визуализировано внутри портала. Разве это не круто 😎
Поддержка добавления свойств
Давайте добавим поддержку props в наше модальное окно. Как разработчик, я хочу, чтобы этот модальный компонент мог изменять модальный заголовок и содержимое внутри него.
Давайте добавим аргумент props в наш модальный компонент.
Чтобы использовать его, передайте
Слот
Теперь мы хотим показать содержимое внутри модального тела - так, как мы хотим это сделать, используя слот. Есть два слота; мы собираемся его использовать.
- Модальное тело
- Модальный нижний колонтитул
Мы хотим, чтобы модальное окно показывало любой контент внутри тела и добавляло функциональность для кнопки отправки. Мы будем использовать <slot></slot> для модального тела и <slot name="footer"></slot> для модального нижнего колонтитула.
Чтобы использовать его, мы просто передаем содержимое в компонент <base-modal> следующим образом.
Прокручиваемый
Теперь у нас есть функциональный модальный компонент. Предположим, наша страница с контентом будет длиться так долго. Итак, мы хотим добавить некоторые функции для добавления прокручиваемых параметров.
В модальном компоненте давайте добавим новый вызов свойств scrollable с типом данных Boolean и установим его в качестве значения по умолчанию как false.
Давайте добавим новый стиль для прокручиваемого контента. Я собираюсь добавить этот класс под названием .scrollable
Чтобы использовать его, мы собираемся проверить прокручиваемые свойства. Если scrollable истинно, то мы собираемся добавить этот класс к нашему контенту. Для этого мы собираемся использовать привязку классов.
Прохладный. Теперь мы можем добавить в слот длинный контент с помощью прокручиваемых свойств. Работает правильно 👏🏻.
Привязка клавиатуры
Давайте добавим еще одну функцию мощности. Мы хотим закрыть это модальное окно, если нажали клавишу escape.
Во-первых, нам нужно прослушать событие с нажатой клавиатурой. Итак, давайте добавим модальный компонент в жизненный цикл created и destroyed.
Не забывайте удалять слушателя, когда мы его не использовали. Здесь происходит следующее: всякий раз, когда keyup является триггером, он будет вызываться методом onClose. Давайте добавим этот метод.
Мы можем прочитать событие, используя параметр event. Поскольку escape key button имеет значение 27, мы собираемся его отфильтровать. Если код клавиши равен 27, то он запустит handleClose методы, которые должны закрыть наш модальный файл.
Переход
Давайте добавим красивый переход, когда мы открываем и закрываем модальное окно. К счастью, во Vue уже есть элемент перехода, и мы собираемся его использовать. Просто оберните модальный компонент <transition name=“fade”></transition>
Также добавьте fade CSS в компонент
Таким образом, у вас будет приятный переход при открытии и закрытии.
Исходный код
BaseModal.vue
App.vue
Сообщите мне, есть ли у вас какие-либо функции, которые вы хотите добавить в этот модальный файл, или какие-либо идеи для следующей статьи. Не стесняйтесь обращаться к @jakzaizzat
Полный исходный код доступен здесь - https://github.com/jakzaizzat/blog-snippet
Оригинал опубликован на - https://jakzaizzat.com/vue-modal
