Input и его модификации

Компонент Input в библиотеке Naive UI представляет собой стандартное поле ввода текста, которое поддерживает все базовые функции HTML <input>, но при этом предоставляет расширенные возможности кастомизации и интеграции с Vue 3. Наиболее важные свойства компонента:

  • v-model:value – связывает значение поля с переменной во Vue. Позволяет получать и изменять текст в реальном времени.
  • placeholder – задаёт текст-заполнитель для пустого поля.
  • type – определяет тип ввода: text, password, email, number и другие.
  • disabled – делает поле неактивным.
  • clearable – добавляет кнопку для очистки поля.
  • maxlength – ограничивает количество символов.
  • size – управляет размером поля (small, medium, large).

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

<n-input v-model:value="username" placeholder="Введите имя пользователя" clearable />

Здесь создаётся поле ввода с возможностью очистки текста и связью с переменной username.

Валидация и контроль ввода

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

  • onUpdate:value – срабатывает при каждом изменении текста.
  • onBlur и onFocus – позволяют отслеживать фокус поля.
  • onEnter – срабатывает при нажатии Enter.

Пример с валидацией:

<n-input
  v-model:value="email"
  placeholder="Введите email"
  @blur="validateEmail"
/>

<script>
export default {
  data() {
    return { email: '' }
  },
  methods: {
    validateEmail() {
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!regex.test(this.email)) {
        console.warn('Неверный формат email')
      }
    }
  }
}
</script>

Модификации Input

Password Input

Компонент поддерживает ввод пароля с возможностью переключения видимости:

<n-input
  v-model:value="password"
  type="password"
  placeholder="Введите пароль"
  show-password
/>

Свойство show-password добавляет кнопку для временного отображения текста, что улучшает UX без необходимости писать собственный контрол.

Input с иконками

На поле можно навесить иконки слева или справа с помощью слотов:

<n-input
  v-model:value="searchQuery"
  placeholder="Поиск..."
>
  <template #prefix>
    <n-icon><search-icon /></n-icon>
  </template>
  <template #suffix>
    <n-icon><close-icon @click="searchQuery = ''" /></n-icon>
  </template>
</n-input>

Использование слотов prefix и suffix позволяет добавлять интерактивные элементы, не нарушая структуру поля.

Input с автодополнением

Для создания динамического списка подсказок используется сочетание Input и Dropdown:

<n-input
  v-model:value="city"
  placeholder="Введите город"
  @input="updateSuggestions"
/>
<n-dropdown :options="citySuggestions" v-if="citySuggestions.length" />

Метод updateSuggestions фильтрует список доступных значений в зависимости от текущего текста, создавая эффект автодополнения.

Input Number

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

Свойства:

  • min и max – устанавливают границы допустимых значений.
  • step – шаг увеличения/уменьшения.
  • precision – количество десятичных знаков.
  • controls – отображение кнопок управления значением.

Пример:

<n-input-number
  v-model:value="age"
  :min="0"
  :max="120"
  :step="1"
  controls
/>

Input с маской

Для ограничений формата ввода можно использовать маски через слот formatter:

<n-input
  v-model:value="phone"
  placeholder="Телефон"
>
  <template #formatter="{ value }">
    {{ value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3') }}
  </template>
</n-input>

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

Стилизация и размеры

Поле ввода поддерживает несколько размеров через size:

  • small – компактное поле.
  • medium – стандартное поле.
  • large – увеличенное поле, удобное для форм с большим количеством информации.

Также доступна настройка состояния через классы и свойства:

  • status="error" – отображение поля с ошибкой.
  • status="success" – визуальная индикация успешного ввода.
  • bordered – контроль видимости границы поля.
  • round – скругление углов.

Пример:

<n-input
  v-model:value="username"
  placeholder="Имя пользователя"
  size="large"
  status="error"
  round
/>

Input с автоподстановкой и тегами

Для сложных сценариев, например ввода множества тегов, используется компонент Input в сочетании с динамическими элементами:

<n-input
  v-model:value="tags"
  placeholder="Добавьте теги"
  @enter="addTag"
/>
<div class="tags-list">
  <n-tag
    v-for="tag in tags"
    :key="tag"
    closable
    @close="removeTag(tag)"
  >
    {{ tag }}
  </n-tag>
</div>

Методы addTag и removeTag управляют массивом тегов, позволяя создавать интерфейс наподобие e-mail или фильтров с множественным выбором.

Динамическая настройка поведения

С помощью Vue реактивности и событий Input можно создавать продвинутые формы:

  • Автофокус: autofocus
  • Автозаполнение: autocomplete="off|on"
  • Дебаунсинг ввода для уменьшения количества вычислений:
<n-input
  v-model:value="query"
  placeholder="Поиск"
  @input="debouncedSearch"
/>

Где debouncedSearch реализует задержку между вызовами, например через lodash.debounce.

Итоговые рекомендации по использованию Input

  • Использовать v-model для двусторонней связи значения.
  • Применять слоты prefix и suffix для расширенных элементов управления.
  • Комбинировать Input с Dropdown или Tag для автодополнений и множественного выбора.
  • Использовать InputNumber и форматтеры для числовых и структурированных данных.
  • Настраивать визуальные состояния через status, size и round для улучшения UX.

Такая гибкость делает компонент Input в Naive UI универсальным инструментом для создания любых форм и интерактивных элементов интерфейса.

Оглавление