Modal

Методы openModal, pushModal возвращают Promise, которые в случае успеха вернёт объект Modal. Данный объект является классом модального окна и служит для получения или управления текущим состоянием. На данной странице будут перечислены все доступные методы и свойства.

Свойства

id

Поле является уникальным идентификатором модального окна. Присваивается в момент открытия.

instance

Экземпляр компоненты модального окна. Используется для того, чтобы получить доступ к $data, $props и другим свойствам модального окна.

WARNING

Если вы получаете instance в своем проекте вместе в <script setup>, вам нужно помнить, что в этом случае компонент будет закрыт. Чтобы открыть некоторые свойства, вам нужно прибегнуть к defineExpose.

Если модальная компонента имеет следующий вид:

// modal-component.vue
export default {
    props: {},
    data: () => {
        return {
            insideValue: "Hello"
        }
    }
}

То для получения значение insideValue необходимо обратиться к instance:

const modal = await openModal(Modal);
modal.instance.insideValue; // "Hello"

isRoute

Устанавливается в значение true, если модальное окно было открыто по средствам интеграции с vue-router.

namespace

Строковое значение пространства к которому принадлежит модальное окно. Значение данной опции устанавливает в соответствии со значением переданным в options в методах для открытия модального окна.

openModal(ModalComponent, {}, { namespace: "notification" })

component

Ссылка на компоненту, которая будет использоваться в качестве модального окна

closed

ComputedRef переменная, которая хранит реактивное состояние окна. Установлено в значение false, если модальное окно было открыто и отображается на странице.

props

Ref свойство, которое хранит параметры переданные в качестве props. В самом модальном окне они также получаются через props.

backgroundClose

Устанавливает, можно ли закрывать модальное окно по клику на задний фон. Значение по умолчанию равно true.

onclose

Устанавливает обработчик закрытия модального окна. Более подробно можно прочитать здесь.

ondestroy

Данный метод используется для отлавливания момента, когда модальное окно было закрыто. Отменить(вернув значение false) закрытие модального окна на этом этапе уже не возможно.

const modal = await openModal(Modal)
modal.destroy = () => {
    console.log('Модальное окно было закрыто')
}

Методы

close

Метод используется для закрытия модального окна. Возвращает Promise.

on

Метод используется для прослушивания события из компоненты. В открытом модальном окне события передаваемые через emits будет перехватываться и передаваться в событие on:

const modal = await openModal(ModalComponent);
modal.on("update", () => {
	// ...
})

Static

Статические поля и методы класса Modal.

EVENT_PROMPT

Название события, которое обрабатывается в случае открытия модального окна через promptModal. В таком случае инициализировав данное событие, значение переданное в него будет возвращено в promptModal, а модальное окно будет закрыто:

emits(Modal.EVENT_PROMPT, 100);

Более подробно можно прочитать здесь.

STORE

Свойства имеющее тип Map<ModalId, Modal>. При открытии любого модальное окна, оно будет сохранено в этом хранилище.