Компоненты от А до Я

Naive UI — это современная библиотека компонентов для Vue 3, ориентированная на простоту интеграции и гибкость кастомизации. Она предоставляет полный набор готовых к использованию компонентов: от кнопок и форм до сложных таблиц и модальных окон.

Импорт и регистрация компонентов

Компоненты Naive UI можно импортировать как глобально, так и локально. Глобальная регистрация производится через плагин create:

import { createApp } from 'vue';
import { create, NButton, NInput } from 'naive-ui';
import App from './App.vue';

const naive = create({
  components: [NButton, NInput]
});

const app = createApp(App);
app.use(naive);
app.mount('#app');

Локальный импорт удобен для изоляции компонентов и уменьшения размера бандла:

import { NButton } from 'naive-ui';

export default {
  components: { NButton }
};

Стилизация компонентов

Naive UI использует CSS-in-JS подход, позволяющий управлять стилями через пропсы и тему. Основные методы кастомизации:

  • presetTheme — позволяет задать глобальную цветовую палитру и шрифты.
  • style и class — стандартные пропсы для индивидуальных изменений.
  • theme-overrides — гибкая настройка отдельных параметров компонентов, например:
const myThemeOverrides = {
  Button: {
    borderRadius: '8px',
    color: '#1890ff'
  }
};

Основные компоненты

NButton

Кнопка с множеством вариантов: primary, secondary, success, error, а также режимы loading и disabled.

<NButton type="primary" loading>Отправить</NButton>

Ключевые возможности:

  • size: small, medium, large.
  • ghost: прозрачная кнопка с обводкой.
  • onClick: обработка событий.
NInput

Компонент ввода с поддержкой разных типов: text, password, textarea. Особенности:

  • clearable: кнопка очистки поля.
  • maxlength: ограничение длины текста.
  • size и status: управление визуальным состоянием.
<NInput v-model:value="username" placeholder="Введите имя" clearable />
NSelect

Выпадающий список с поддержкой мультивыбора и фильтрации:

<NSelect v-model:value="selected" :options="options" multiple />

Параметры:

  • filterable — позволяет вводить текст для поиска в списке.
  • remote — подгрузка данных асинхронно.
  • clearable — очистка выбранных значений.

Комплексные компоненты

NDataTable

Таблица данных с поддержкой пагинации, сортировки и кастомных колонок:

<NDataTable :columns="columns" :data="tableData" :pagination="{ pageSize: 10 }" />

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

  • Сортировка по колонкам (sortable).
  • Кастомный рендер ячеек (render).
  • Поддержка вложенных таблиц (expandable).
NModal

Модальное окно с динамическим контентом и кнопками действий:

<NModal v-model:show="isModalVisible" title="Подтверждение">
  <template #footer>
    <NButton @click="isModalVisible = false">Закрыть</NButton>
    <NButton type="primary" @click="submitAction">Сохранить</NButton>
  </template>
</NModal>

Пропсы:

  • show — управление видимостью.
  • maskClosable — закрытие при клике на затемнённый фон.
  • on-close — хук закрытия.

Работа с формами

Naive UI предоставляет мощный компонент NForm, который объединяет поля ввода с валидацией:

<NForm :model="formData" :rules="formRules" ref="formRef">
  <NFormItem label="Email" path="email">
    <NInput v-model:value="formData.email" />
  </NFormItem>
  <NFormItem label="Пароль" path="password">
    <NInput type="password" v-model:value="formData.password" />
  </NFormItem>
</NForm>

Основные моменты:

  • model — объект данных формы.
  • rules — объект правил валидации.
  • ref и методы validate(), reset() позволяют программно проверять форму и сбрасывать поля.

Использование хуков

Naive UI предоставляет хуки для программного управления компонентами, например:

  • useMessage — всплывающие уведомления.
  • useDialog — создание динамических модальных окон.
  • useNotification — системные уведомления с кастомной позицией и длительностью.
import { useMessage } from 'naive-ui';

const message = useMessage();
message.success('Операция выполнена успешно');

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

  • Импортировать только нужные компоненты, чтобы уменьшить размер бандла.
  • Использовать v-model:value вместо двух отдельных пропсов для синхронизации состояния.
  • Применять theme-overrides вместо глобального CSS для точечного управления стилями.

Совместимость и расширяемость

Naive UI легко интегрируется с Vue Router и Pinia, поддерживает TypeScript и динамическую подгрузку компонентов через defineAsyncComponent. Это позволяет строить масштабируемые интерфейсы с минимальной зависимостью от внешних библиотек.

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

Оглавление