Методы компонентов

Компоненты в библиотеке Naive UI обладают рядом встроенных методов, которые позволяют управлять их состоянием, поведением и взаимодействием с пользователем. Эти методы делятся на несколько категорий: управление видимостью, управление состоянием данных, методы взаимодействия с пользователем и вспомогательные утилиты.

Управление видимостью

Многие компоненты Naive UI, такие как NDialog, NDrawer, NPopover или NModal, предоставляют методы для управления их отображением:

  • open() — метод, который открывает компонент. При вызове инициируется визуальная анимация появления и активация всех внутренних обработчиков событий.
  • close() — закрывает компонент, запускает анимацию скрытия и выполняет все связанные коллбэки (on-close, on-after-leave).
  • toggle() — переключает состояние компонента между открытым и закрытым. Полезно для кнопок управления, когда нужно динамически менять видимость.

Пример использования:

const dialogRef = ref(null);

function showDialog() {
  dialogRef.value.open();
}

function hideDialog() {
  dialogRef.value.close();
}

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

Методы управления состоянием данных

Компоненты ввода (NInput, NSelect, NDatePicker) и таблицы (NDataTable) предоставляют методы для чтения и изменения значений без прямой привязки к v-model.

  • setValue(value) — устанавливает значение компонента.
  • getValue() — возвращает текущее значение компонента.
  • reset() — сбрасывает компонент к исходному значению, заданному через default-value или v-model.
  • validate() — запускает проверку валидаторов (если они настроены через rules), возвращает промис с результатом валидации.

Пример для NInput:

const inputRef = ref(null);

function updateInput() {
  inputRef.value.setValue('Новое значение');
}

async function checkInput() {
  const isValid = await inputRef.value.validate();
  console.log('Валидация прошла:', isValid);
}

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

Методы взаимодействия с пользователем

Компоненты, связанные с интерактивностью (NMenu, NMessageProvider, NNotificationProvider), предоставляют методы для программного контроля поведения.

  • show(message, options) — отображает уведомление или сообщение. Используется в компонентах NMessageProvider и NNotificationProvider.
  • closeAll() — закрывает все текущие уведомления или всплывающие элементы.
  • focus() — устанавливает фокус на компонент, например, для NInput, NTextarea.
  • blur() — снимает фокус.

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

const messageProviderRef = ref(null);

function notifyUser() {
  messageProviderRef.value.show('Данные успешно сохранены', { type: 'success' });
}

function clearNotifications() {
  messageProviderRef.value.closeAll();
}

Вспомогательные утилиты компонентов

Некоторые методы позволяют управлять внутренними функциями компонента без прямого изменения состояния, например, методы пагинации, скролла и динамического добавления элементов:

  • scrollTo(index) — для NDataTable или NList позволяет программно прокрутить до конкретного элемента.
  • appendItem(item) — динамически добавляет элемент в список или таблицу.
  • removeItem(index) — удаляет элемент по индексу.
  • refresh() — обновляет внутреннее состояние компонента, перерендеривая содержимое. Часто используется для асинхронных данных.

Пример работы с таблицей:

const tableRef = ref(null);

function goToItem(index) {
  tableRef.value.scrollTo(index);
}

function addNewRow(rowData) {
  tableRef.value.appendItem(rowData);
}

Методы событий жизненного цикла

Некоторые компоненты Naive UI предоставляют методы для управления или отслеживания жизненного цикла:

  • beforeMount() — выполняется перед монтированием компонента.
  • afterMount() — выполняется сразу после монтирования.
  • beforeUnmount() — вызывается перед удалением компонента.
  • afterUnmount() — после демонтажа компонента из DOM.

Эти методы позволяют создавать более сложные сценарии работы с компонентами, включая подключение сторонних библиотек, настройку слушателей событий или таймеров.

Итоговая структура методов компонентов

Для систематизации методы компонентов Naive UI можно разделить на следующие группы:

  1. Видимость — open(), close(), toggle().
  2. Управление данными — setValue(), getValue(), reset(), validate().
  3. Интерактивность — show(), closeAll(), focus(), blur().
  4. Вспомогательные функции — scrollTo(), appendItem(), removeItem(), refresh().
  5. Жизненный цикл — beforeMount(), afterMount(), beforeUnmount(), afterUnmount().

Эффективное использование этих методов позволяет не только оптимизировать работу с компонентами, но и строить сложные динамические интерфейсы, полностью контролируя их состояние и взаимодействие с пользователем.

Оглавление