Методы

Данная статья будет поделена на два блока: способы закрытия и способы закрытия модальных окон.

Открытие окна

Для открытия модальных окон используется один из следующих методов: openModal, pushModal, promptModal. Каждый из этих методов будет рассмотрены по отдельности. Однако общими для этих методов являются параметры, которые туда передаются:

• VueComponent или String. Первый обязательный параметр. Указывает компоненту, которая будет отображаться. В случае, если передаваться строка то компонента будет браться из хранилища. Подробную информацию о хранилище можно ознакомиться здесь.
• props. Второй не обязательный параметр. Представляет собой набор параметров, которые будут переданы в компоненту в качестве props.
• options. Третий необязательный параметр. в нём можно указать дополнительные параметры, которые будут влиять на поведение модальных окон. Имеет тип Object со следующими свойствами:
  • namespace. Необязательный параметр с типом string. Указывает к какому namespace будет относиться модальное окно. Если данный параметр не указан, то модальное окно будет открыто в стандартном контейнере. Подробнее про namespace можно прочитать здесь.
  • backgroundClose. Необязательный параметр с типом boolean. По умолчанию использует значение указанное в конфигурации. Если значение установлено в false, то закрытие модального окна нажатием на задний фон будет не возможно.

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()