Modal компонент

Компонент Modal в библиотеке Naive UI используется для отображения всплывающих диалоговых окон, которые могут содержать информацию, формы или подтверждения действий пользователя. Modal обеспечивает высокий уровень кастомизации и управляется как через программный вызов, так и через директивное использование в шаблоне.

Импорт и базовое использование

Для начала работы с Modal необходимо импортировать соответствующие функции и компоненты:

import { createDiscreteApi, NButton } from 'naive-ui'

Для динамического отображения модального окна часто используется createDiscreteApi:

const { dialog } = createDiscreteApi(['dialog'])

dialog.info({
  title: 'Информация',
  content: 'Это простое информационное окно.'
})

Ключевые моменты:

dialog.info — отображает информационное модальное окно.
dialog.success — окно с визуальным оформлением успешной операции.
dialog.warning и dialog.error — для предупреждений и ошибок.
title и content — основные свойства для заголовка и контента окна.
Можно передавать слоты, если требуется более сложная разметка внутри окна.

Управление состоянием через шаблон

Modal можно использовать и декларативно, через компонент <n-modal>:

<template>
  <n-button @click="show = true">Открыть окно</n-button>
  <n-modal v-model:show="show" title="Пример модального окна">
    <p>Содержимое модального окна</p>
    <template #footer>
      <n-button @click="show = false">Закрыть</n-button>
    </template>
  </n-modal>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

Особенности:

v-model:show управляет видимостью окна.
Слот footer позволяет полностью кастомизировать нижнюю панель кнопок.
Можно добавлять любые Vue-компоненты внутрь n-modal.

Настройка внешнего вида и поведения

Modal поддерживает множество параметров для настройки:

maskClosable — закрытие окна при клике на затемнённый фон.
escClosable — закрытие окна по нажатию клавиши Escape.
width — ширина окна.
showIcon — отображение стандартного значка (для alert/confirm окон).
closable — возможность отображения кнопки закрытия в правом верхнем углу.

dialog.warning({
  title: 'Предупреждение',
  content: 'Вы уверены, что хотите удалить этот элемент?',
  positiveText: 'Да',
  negativeText: 'Нет',
  maskClosable: false
})

Работа с асинхронными операциями

Modal удобно использовать для подтверждения действий с асинхронными запросами:

const result = await dialog.confirm({
  title: 'Подтверждение действия',
  content: 'Вы хотите выполнить это действие?'
})

if (result) {
  await api.deleteItem(itemId)
}

dialog.confirm возвращает Promise<boolean> — true, если пользователь подтвердил действие.
Можно использовать асинхронные функции в onPositiveClick и onNegativeClick для обработки логики до закрытия окна.

Пользовательские слоты и кастомные компоненты

Modal поддерживает полное использование Vue-слотов:

<n-modal v-model:show="show">
  <template #header>
    <h3>Кастомный заголовок</h3>
  </template>
  <template #default>
    <form @submit.prevent="submitForm">
      <input v-model="formData.name" placeholder="Имя" />
      <input v-model="formData.email" placeholder="Email" />
    </form>
  </template>
  <template #footer>
    <n-button @click="show = false">Отмена</n-button>
    <n-button @click="submitForm">Отправить</n-button>
  </template>
</n-modal>

#header — кастомизация заголовка.
#default — основной контент окна.
#footer — кнопки и действия.

Дополнительные возможности

Автозакрытие: можно задать свойство duration для автоматического закрытия окна через указанное время.
Различные режимы: кроме dialog доступны типы окон drawer, popover, которые можно комбинировать с modal-подходом.
События жизненного цикла: onBeforeLeave, onAfterLeave позволяют запускать логику при закрытии или анимации окна.
Анимации: встроенная анимация появления/скрытия модального окна, настраиваемая через CSS-переменные и кастомные классы.