Программный вызов

В библиотеке Naive UI программный вызов компонентов позволяет создавать, управлять и динамически изменять элементы интерфейса без необходимости их прямого включения в шаблон Vue. Такой подход особенно полезен для динамических модальных окон, уведомлений, диалогов подтверждения и интерактивных панелей. Основная идея заключается в том, что компонент создается и монтируется через функцию API, а не через обычный <template>.

Создание программных экземпляров компонентов

Naive UI предоставляет несколько ключевых функций для программного вызова компонентов:

  1. useDialog — для диалоговых окон
  2. useMessage — для уведомлений и информационных сообщений
  3. useNotification — для системных уведомлений
  4. useLoadingBar — для отображения индикатора загрузки

Все эти функции возвращают объект, содержащий методы управления компонентом, например open, close, destroy и конфигурационные опции.

Пример базового вызова диалога:

import { useDialog } from 'naive-ui'
import { createApp } from 'vue'

const dialog = useDialog()

dialog.info({
  title: 'Информационное окно',
  content: 'Это программно созданное окно с информацией.',
  positiveText: 'Ок',
  negativeText: 'Отмена'
})

В этом примере dialog.info создаёт программный экземпляр информационного окна, который автоматически монтируется и отображается на странице. После закрытия экземпляр уничтожается, что освобождает память.

Управление жизненным циклом

Программные компоненты управляются через методы, предоставляемые Naive UI. Основные методы включают:

  • open() — отображает компонент, если он ещё не показан.
  • close() — закрывает компонент.
  • destroy() — полностью удаляет компонент из DOM и освобождает ресурсы.

Использование destroy особенно важно при создании большого количества динамических компонентов, чтобы избежать утечек памяти.

Пример использования методов жизненного цикла:

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

dialogInstance.open()

// Закрытие через 3 секунды
setTimeout(() => {
  dialogInstance.close()
  dialogInstance.destroy()
}, 3000)

Конфигурация и кастомизация

Каждая функция программного вызова принимает объект конфигурации. Основные параметры включают:

  • title — заголовок окна
  • content — содержимое (может быть строкой или VNode)
  • positiveText / negativeText — текст кнопок
  • onPositiveClick / onNegativeClick — обработчики событий
  • style / class — кастомизация внешнего вида

Можно также передавать динамические слоты через render:

dialog.create({
  title: 'Динамический контент',
  render: () => h('div', { style: { color: 'red' } }, 'Содержимое через render')
})

Использование render позволяет внедрять сложные компоненты и интерактивные элементы в программно созданное окно.

Программные уведомления и сообщения

Для сообщений используется useMessage. Пример базового вызова:

import { useMessage } from 'naive-ui'

const message = useMessage()

message.success('Операция выполнена успешно!')
message.error('Произошла ошибка!')
message.warning('Внимание: проверьте данные!')

Методы success, error, warning и info позволяют быстро создавать уведомления с предопределённой стилизацией. Уведомления автоматически исчезают через стандартное время отображения, которое можно настроить через параметр duration.

Пример с кастомизацией:

message.info({
  content: 'Обновление завершено',
  duration: 5000,
  closable: true
})

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

Функция useNotification предоставляет расширенные возможности для уведомлений, включая позиционирование, кастомные иконки и пользовательские действия:

import { useNotification } from 'naive-ui'

const notification = useNotification()

notification.info({
  title: 'Системное уведомление',
  content: 'Новое событие в системе',
  duration: 10000,
  onClick: () => console.log('Нажата нотификация')
})

Позиционирование можно задать через placement:

notification.success({
  title: 'Готово',
  content: 'Загрузка завершена',
  placement: 'bottom-right'
})

Работа с индикатором загрузки

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

import { useLoadingBar } from 'naive-ui'

const loadingBar = useLoadingBar()

loadingBar.start() // Запуск индикатора
setTimeout(() => loadingBar.finish(), 2000) // Завершение через 2 секунды

Методы управления:

  • start() — начинает загрузку
  • update(percent) — обновляет прогресс
  • finish() — завершает загрузку и скрывает индикатор
  • error() — отображает индикатор ошибки

Индикатор автоматически интегрируется в верхнюю часть приложения, без необходимости вручную добавлять его в DOM.

Интеграция с Composition API

Все программные вызовы легко интегрируются с Composition API. Это позволяет создавать динамический интерфейс на лету и управлять состоянием через реактивные переменные:

import { ref } from 'vue'

const isDialogOpen = ref(false)
const dialog = useDialog()

function showDialog() {
  isDialogOpen.value = true
  dialog.info({
    title: 'Reactive dialog',
    content: 'Состояние контролируется через ref',
    onPositiveClick: () => (isDialogOpen.value = false)
  })
}

Рекомендации по использованию

  • Для одноразовых модальных окон и сообщений использовать стандартные методы (info, success и т.д.), чтобы не создавать лишние экземпляры.
  • Для повторного использования компонентов — использовать create() и сохранять ссылку на экземпляр, управляя жизненным циклом через open, close, destroy.
  • Всегда очищать экземпляры после закрытия, чтобы избежать утечек памяти.
  • Использовать render для сложного контента вместо статической строки, если требуется динамическая визуализация.

Программный вызов в Naive UI обеспечивает гибкость и контроль над интерфейсом, позволяя создавать динамичные и отзывчивые элементы без перегрузки шаблонов Vue.

Оглавление