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

Под префиксом понимается элемент, размещаемый в начале компонента, перед основным содержимым. Суффикс размещается в конце компонента, после основного содержимого.

Этот механизм позволяет:

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

Во многих компонентах Naive UI реализация выполняется через слоты prefix и suffix.

---

Общий принцип работы

В большинстве компонентов Naive UI используются именованные слоты:

• prefix
• suffix

Они позволяют внедрять любой Vue-контент внутрь компонента.

Пример структуры:

<n-component>
  <template #prefix>
    ...
  </template>

  Основное содержимое

  <template #suffix>
    ...
  </template>
</n-component>

Префикс располагается перед основным содержимым, а суффикс — после него.

Внутри слотов можно размещать:

• иконки
• кнопки
• текст
• другие компоненты Naive UI
• кастомные Vue-элементы

---

Префиксы и суффиксы в n-input

Компонент n-input чаще всего используется с префиксами и суффиксами. Они позволяют добавлять иконки, обозначения валют, кнопки очистки и прочие элементы.

Базовый пример

<n-input placeholder="Введите значение">
  <template #prefix>
    $
  </template>

  <template #suffix>
    USD
  </template>
</n-input>

Результат:

$ [ ввод значения ] USD

Здесь:

• $ — префикс
• USD — суффикс

---

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

Префиксы и суффиксы часто применяются для размещения иконок.

<n-input placeholder="Поиск">
  <template #prefix>
    <n-icon>
      <SearchOutline />
    </n-icon>
  </template>
</n-input>

Иконка поиска визуально показывает назначение поля.

---

Кнопки внутри поля ввода

Суффикс может использоваться для размещения интерактивных элементов.

<n-input v-model:value="password" type="password">
  <template #suffix>
    <n-button text>Показать</n-button>
  </template>
</n-input>

Такой подход применяется для:

• показа пароля
• очистки поля
• запуска поиска
• переключения режима ввода

---

Динамические суффиксы

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

<n-input v-model:value="email">
  <template #suffix>
    <n-icon v-if="isValid">
      <CheckmarkCircle />
    </n-icon>
  </template>
</n-input>

Если значение корректно — отображается иконка подтверждения.

---

Префиксы и суффиксы в n-input-number

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

Пример

<n-input-number v-model:value="weight">
  <template #suffix>
    кг
  </template>
</n-input-number>

Отображение:

[ 75 ] кг

Другие типичные единицы:

• %
• px
• ms
• MB
• °C

---

Валютные поля

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

<n-input-number v-model:value="price">
  <template #prefix>
    €
  </template>
</n-input-number>

Интерфейс:

€ [ 120 ]

---

Префиксы и суффиксы в n-select

В селекторах префикс часто используется для отображения иконки или категории.

<n-select :options="options">
  <template #prefix>
    <n-icon>
      <FilterOutline />
    </n-icon>
  </template>
</n-select>

Такой подход используется в:

• фильтрах
• панелях поиска
• формах настройки

---

Префиксы и суффиксы в n-button

Хотя кнопки чаще используют слот icon, иногда применяются и префиксы/суффиксы.

Пример кнопки с иконкой

<n-button>
  <template #prefix>
    <n-icon>
      <DownloadOutline />
    </n-icon>
  </template>

  Скачать
</n-button>

Результат:

[ ⬇ Скачать ]

---

Иконка после текста

Суффикс позволяет разместить иконку справа.

<n-button>
  Далее
  <template #suffix>
    <n-icon>
      <ArrowForward />
    </n-icon>
  </template>
</n-button>

Интерфейс:

[ Далее → ]

---

Композиция сложных элементов

Префиксы и суффиксы позволяют создавать более сложные интерфейсные структуры.

Пример: поле поиска

<n-input v-model:value="query" placeholder="Поиск">
  <template #prefix>
    <n-icon>
      <SearchOutline />
    </n-icon>
  </template>

  <template #suffix>
    <n-button text>Найти</n-button>
  </template>
</n-input>

Интерфейс:

? [ поиск ] [Найти]

---

Комбинирование нескольких элементов

В слотах можно размещать несколько элементов.

<n-input>
  <template #suffix>
    <n-space>
      <n-icon><Copy /></n-icon>
      <n-icon><Share /></n-icon>
    </n-space>
  </template>
</n-input>

Так создаются панели действий внутри поля.

---

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

Слоты поддерживают любые Vue-компоненты.

<n-input>
  <template #prefix>
    <user-avatar />
  </template>
</n-input>

Это позволяет внедрять:

• аватары
• индикаторы статуса
• переключатели
• меню действий

---

Управление стилями префиксов и суффиксов

Элементы внутри слотов наследуют стили компонента. Однако иногда требуется дополнительная настройка.

Пример кастомного стиля

<n-input>
  <template #suffix>
    <span class="unit">px</span>
  </template>
</n-input>

CSS:

.unit {
  color: #999;
  font-size: 12px;
}

---

Отступы и выравнивание

Naive UI автоматически управляет:

• внутренними отступами
• вертикальным выравниванием
• размерами элементов

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

Часто используется n-space.

<template #suffix>
  <n-space size="small">
    <n-icon><Edit /></n-icon>
    <n-icon><Delete /></n-icon>
  </n-space>
</template>

---

Доступность (Accessibility)

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

Рекомендации:

• добавлять aria-label
• использовать кнопки вместо обычных div
• обеспечивать фокусировку через клавиатуру

Пример:

<n-button text aria-label="Очистить">
  <n-icon>
    <CloseCircle />
  </n-icon>
</n-button>

---

Производительность

Префиксы и суффиксы являются частью виртуального DOM Vue. Их использование практически не влияет на производительность.

Однако следует избегать:

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

Особенно это важно в больших формах.

---

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

Наиболее частые варианты использования:

1. Иконки

? поиск
? email
? пароль

---

2. Единицы измерения

px
%
kg
MB
ms

---

3. Валюты

$
€
₽
¥

---

4. Кнопки действий

• очистка поля
• показать пароль
• запуск поиска
• копирование текста

---

5. Индикаторы состояния

• проверка валидности
• статус соединения
• уровень сигнала
• загрузка

---

Типичные ошибки

Использование сложной разметки

Префиксы и суффиксы должны оставаться компактными. Сложные структуры ухудшают читаемость интерфейса.

Плохо:

<n-input>
  <template #prefix>
    <div>
      <span>Label</span>
      <button>Action</button>
    </div>
  </template>
</n-input>

---

Неправильные размеры иконок

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

Рекомендуется использовать n-icon.

---

Перегруженность интерфейса

Слишком большое количество элементов в суффиксе делает поле сложным для восприятия.

Лучше ограничиваться:

• одной иконкой
• одной кнопкой
• кратким текстом

---

Архитектурные преимущества

Использование префиксов и суффиксов дает ряд преимуществ:

1. Композиционность

Компоненты остаются универсальными, а дополнительные элементы добавляются через слоты.

2. Гибкость

Можно добавлять любой Vue-контент.

3. Переиспользование

Один и тот же компонент применяется в разных сценариях.

4. Чистота API

Нет необходимости создавать множество специализированных компонентов.

---

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