ConfigProvider продвинутое

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

Подключение и базовая структура

Импорт ConfigProvider осуществляется напрямую из библиотеки:

import { createApp, h } from 'vue';
import { NConfigProvider, NButton } from 'naive-ui';

const app = createApp({
  render: () =>
    h(NConfigProvider, { theme: { common: { primaryColor: '#42b983' } } }, [
      h(NButton, { type: 'primary' }, { default: () => 'Кнопка' })
    ])
});

app.mount('#app');

Ключевой момент: все дочерние компоненты автоматически наследуют переданные параметры, что упрощает поддержку стиля и поведения интерфейса.

Настройка темы

Темы в Naive UI строятся на основе объектов theme с разделением на common и self.

  • common — общие переменные, используемые для всех компонентов (цвета, размеры, тени).
  • self — индивидуальные параметры компонента (например, отступы, радиус скругления, цвет фона конкретного элемента).

Пример глобальной темы:

h(NConfigProvider, {
  theme: {
    common: {
      primaryColor: '#ff4d4f',
      fontSize: '16px'
    },
    self: {
      button: {
        borderRadius: '8px',
        padding: '10px 20px'
      }
    }
  }
})

Эта структура позволяет одновременно управлять единым стилем приложения и отдельными настройками компонентов.

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

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

import { zhCN, enUS } from 'naive-ui';

h(NConfigProvider, {
  locale: zhCN
})

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

Управление размерами компонентов

Для унификации размеров используется свойство componentProps. Оно позволяет устанавливать значения по умолчанию для всех компонентов определённого типа.

h(NConfigProvider, {
  componentProps: {
    NButton: { size: 'large', round: true },
    NInput: { clearable: true }
  }
})

Таким образом, все кнопки будут большими и с закруглёнными краями, а все поля ввода — с возможностью очистки содержимого одним кликом.

Кастомизация поведения

ConfigProvider позволяет управлять поведением компонентов через глобальные функции и настройки, например, форматирование сообщений в уведомлениях:

h(NConfigProvider, {
  notificationProvider: {
    placement: 'top-right',
    duration: 3000,
    render: (msg) => `Важное сообщение: ${msg}`
  }
})

В этом примере уведомления будут появляться в верхнем правом углу, длиться 3 секунды и содержать кастомный префикс.

Глобальная конфигурация для модальных и всплывающих элементов

Для компонентов типа Dialog и Popover можно задавать поведение по умолчанию:

h(NConfigProvider, {
  dialog: {
    width: '600px',
    maskClosable: false
  },
  popover: {
    trigger: 'hover',
    showArrow: true
  }
})

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

Динамическая смена конфигурации

ConfigProvider можно использовать для динамического изменения параметров без перезагрузки приложения. Для этого используется реактивное состояние Vue:

import { reactive } from 'vue';

const config = reactive({
  theme: { common: { primaryColor: '#42b983' } }
});

h(NConfigProvider, { theme: config.theme }, [
  h(NButton, { type: 'primary' }, { default: () => 'Кнопка' })
]);

// Динамическое изменение цвета
config.theme.common.primaryColor = '#ff4d4f';

Все компоненты автоматически обновят стиль при изменении реактивного объекта.

Советы по продвинутому использованию

  1. Комбинирование настроек: можно объединять темы, локали и componentProps в один объект для передачи в ConfigProvider.
  2. Переопределение на уровне компонента: локальные свойства компонента имеют приоритет над глобальными настройками.
  3. Оптимизация производительности: при больших приложениях рекомендуется минимизировать частую смену глобальных объектов, чтобы избежать лишнего рендеринга.

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

Оглавление