Модальное хранилище

В старых версиях этой библиотеки открытие модального окна было возможно только путем передачи компонента. Подход остаётся основным и на текущий день, т.к. дает вам больше контроля и порядка в вашем коде. Однако существует много ситуаций, когда этот подход не удобен. Например, при разработке библиотеки возникает вопрос: как переопределить открытие модальных окон (как заменить модальное окно). Здесь на помощь приходит хранилище.

Инициализация

Для начала необходимо инициализировать хранилище (сохранить в нем нужные нам модальные окна). Все это делается с помощью функции конфигурации:

import {config} from "jenesius-vue-modal";
import ModalConfirm from "./ModalConfirm";
import ModalAlert from "./ModalAlert"

config({
    store: {
        confirm: ModalConfirm,
        alert: {
			component: "ModalAlert"
        }
    }
})

В этом примере мы добавили в хранилище два модальных окна:

• передав напрямую компоненты
• во втором случае, мы указали объект с установленным свойством component, это необходимо для установления некоторых свойств конкретно для данной компоненты.

Теперь его можно открыть по имени, передав туда ключ:

openModal('confirm');
openModal('alert');

Конечно, методы pushModal и promptModal также поддерживают эту функциональность.

Проверка модального окна

Если вы пишете библиотеку, для лучшей совместимости добавлена функция, проверяющая наличие модального окна в хранилище:

import {getComponentFromStore} from "jenesius-vue-modal";
getComponentFromStore('alert') // undefined
getComponentFromStore('confirm') // Component

Возвращает компонент VueComponent, если он был ранее инициализирован в хранилище, в противном случае undefined.

Расширенная передача компоненты

В данной артикле рассмотрим случай, когда мы вместе компоненты передаём целый объект с описанным свойством component. В таком случае мы также можем указать следующие свойства:

• backgroundClose
• draggable
• beforeEach

Все эти свойства соответствуют параметром из конфигурации.

config({
    store: {
		confirm: {
			component: ModalConfirm,
			draggable: true,
			backgroundClose: false,
			beforeEach() {
				Logger.write('Попытка открыть окно подтверждения.')
			}
		}
    }
})