Методы
Данная статья будет поделена на два блока: способы закрытия и способы закрытия модальных окон.
Открытие окна
Для открытия модальных окон используется один из следующих методов: openModal
, pushModal
, promptModal
. Каждый из этих методов будет рассмотрены по отдельности. Однако общими для этих методов являются параметры, которые туда передаются:
- VueComponent или String. Первый обязательный параметр. Указывает компоненту, которая будет отображаться. В случае, если передаваться строка то компонента будет браться из хранилища. Подробную информацию о хранилище можно ознакомиться здесь.
- props. Второй не обязательный параметр. Представляет собой набор параметров, которые будут переданы в компоненту в качестве
props
. - options. Третий необязательный параметр. в нём можно указать дополнительные параметры, которые будут влиять на поведение модальных окон. Имеет тип
Object
со следующими свойствами:- namespace. Необязательный параметр с типом
string
. Указывает к какомуnamespace
будет относиться модальное окно. Если данный параметр не указан, то модальное окно будет открыто в стандартном контейнере. Подробнее про namespace можно прочитать здесь. - backgroundClose. Необязательный параметр с типом
boolean
. По умолчанию использует значение указанное в конфигурации. Если значение установлено вfalse
, то закрытие модального окна нажатием на задний фон будет не возможно.
- namespace. Необязательный параметр с типом
openModal
Метод openModal
используется для отображения компоненты в контейнере модального окна. Перед показом модального окна метод закроет все открытые окна и в случае успеха откроет новое.
Возвращаемое значение
Метод вернётPromise
, который в случае успеха открытия модального окна вернет ModalObject
.
import {openModal} from "jenesius-vue-modal";
import VueComponent from "AnyVueComponent.vue";
const props = {title: "Hello"};
openModal(VueComponent, props) // Promise<ModalObject>
// AnyVueComponent.vue
<template>
<p>{{title}}</p>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
pushModal
Метод pushModal
используется для показа модального окна, но, в отличие от openModal
, он не закрывает ранее открытые модальные окна, а показывает новое поверх остальных. Иными словами данный метод просто добавляет новое окно в очередь.
import {pushModal} from "jenesius-vue-modal"
pushModal(VueComponent) // Promise<ModalObject>
WARNING
Чтобы закрыть только последнее открытое модальное окно - воспользуйтесь методом popModal.
promptModal
Иногда основной задачей модального окна является возвращение данных. В таком случае модальное окно выступает в качестве некой ступени вашего интерфейса. Именно для таких случаев был разработан метод promptModal
.
Главное его отличие от двух предыдущих методов - он не возвращает объект ModalObject
. Возвращаемое значение - Promise
, в случае успешного выполнения вернёт результат, которые вы решили вернуть из вашего модального окна. По сути данные модальные окна можно рассматривать как функции. Вы в них передали значения, они вернули результат.
Также данная функция не закрывает открытые ранее окна, а добавляет новое поверх.
Чтобы вернуть значение из модального окна, воспользуйтесь событием Modal.EVENT_PROMPT
:
import ModalCode from "./ModalCode.vue"
import {promptModal} from "jenesius-vue-modal"
const code = await promptModal(ModalCode);
<!--ModalCode.vue-->
<template>
<button @click="handleClick">Click</button>
</template>
<script>
import {Modal} from "jenesius-vue-modal";
export default {
methods: {
handleClick() {
// Данное событие закроет модальное окно и вернёт Math.random()
// в качестве результата Promise
this.$emit(Modal.EVENT_PROMPT, Math.random());
}
}
}
</script>
В случае, если модальное окно было закрыто без Modal.EVENT_PROMPT
( например клик по заднему фону), то Promise будет выполнен со значением null
.
WARNING
Не нужно вызывать метод закрытия модального окна, когда вы пользуетесь механизмом Modal.EVENT_PROMPT
. Библиотека сделает это за вас.
Закрытие окна
Для закрытия модальных окон вы можете воспользоваться двумя методами: closeModal
и popModal
. Эти методы принимают один необязательный параметр, описывающий настройки закрытия модального она. Опция представляют собой объект со следующими свойствами:
- namespace. Строковое значение, указывающее из какого пространства необходимо удалить. Если значение не задано, то закрывает окно из пространства по умолчанию.
// Закрытия модальных окон без параметра
closeModal();
// Закрытие последнего модальное из
// пространства "notification"
popModal({namespace: "notification"});
closeModal
Метод для закрытия всех модальных окон. Если в параметрах передаётся namespace
, то окна будут закрыты только из нужного пространства.
import {closeModal} from "jenesius-vue-modal"
closeModal()
popModal
Чтобы закрыть только последнее модальное окно, которое было открыто используя pushModal
.
import {popModal} from "jenesius-vue-modal"
popModal()