Dynamic Input

В библиотеке Naive UI компонент n-dynamic-input предназначен для работы с динамическими списками элементов ввода. Он позволяет создавать интерфейсы, где количество полей ввода может изменяться во время работы приложения, добавляться или удаляться пользователем. Этот компонент особенно полезен для форм, где нужно вводить переменное количество значений, например, список email-адресов, тегов или параметров конфигурации.

Импорт и базовая настройка

Для использования компонента необходимо импортировать его из библиотеки и зарегистрировать в вашем компоненте Vue:

import { NDynamicInput } from 'naive-ui';

export default {
  components: {
    NDynamicInput
  }
}

Базовая структура компонента выглядит следующим образом:

<n-dynamic-input
  v-model:value="items"
  :placeholder="'Введите значение'"
  :add-button-text="'Добавить элемент'"
  :delete-button-text="'Удалить элемент'"
/>

v-model:value — массив значений, синхронизируемых с компонентом.
placeholder — текст подсказки для каждого поля ввода.
add-button-text — текст кнопки добавления нового поля.
delete-button-text — текст кнопки удаления существующего поля.

Управление данными

Основным способом работы с динамическими полями является использование массива в v-model. Например:

export default {
  data() {
    return {
      items: ['Первое значение', 'Второе значение']
    };
  }
}

Компонент автоматически отобразит два поля ввода с указанными значениями. Добавление нового элемента происходит при клике на кнопку добавления, и новый элемент добавляется в массив items. Удаление элемента удаляет соответствующую запись из массива.

Настройка поведения

1. Ограничение количества элементов

Можно ограничить минимальное и максимальное количество элементов:

<n-dynamic-input
  v-model:value="items"
  :min-count="1"
  :max-count="5"
/>

min-count — минимальное количество полей, ниже которого удаление запрещено.
max-count — максимальное количество полей, выше которого добавление запрещено.

2. Кастомизация кнопок

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

<n-dynamic-input v-model:value="items">
  <template #add>
    <button class="custom-add">Добавить</button>
  </template>
  <template #remove="{ index, remove }">
    <button class="custom-remove" @click="remove(index)">Удалить</button>
  </template>
</n-dynamic-input>

Слот add отвечает за внешний вид кнопки добавления, а слот remove предоставляет объект с индексом и функцией удаления remove.

3. Валидация полей

Для проверки данных внутри n-dynamic-input можно использовать события или встроенные методы:

<n-dynamic-input
  v-model:value="emails"
  @update:value="validateEmails"
/>

methods: {
  validateEmails(newValue) {
    this.emails = newValue.map(email => email.trim());
    this.errors = this.emails.map(email => !this.isValidEmail(email));
  },
  isValidEmail(email) {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
}

Стилизация и адаптация

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

CSS классы: class и style для каждого поля.
Слоты для поля ввода: позволяет полностью заменить стандартный input кастомным компонентом.

Пример замены стандартного input на компонент n-input с иконкой:

<n-dynamic-input v-model:value="tags">
  <template #input="{ value, onChange }">
    <n-input v-model:value="value" placeholder="Введите тег" @update:value="onChange">
      <template #suffix>
        <i class="icon-tag"></i>
      </template>
    </n-input>
  </template>
</n-dynamic-input>

Работа с объектами

Помимо массивов строк, n-dynamic-input поддерживает массивы объектов, если требуется хранить несколько свойств:

items: [
  { name: 'Параметр 1', value: 'Значение 1' },
  { name: 'Параметр 2', value: 'Значение 2' }
]

В этом случае через слот input можно определить кастомный рендер для каждого свойства:

<n-dynamic-input v-model:value="items">
  <template #input="{ value, onChange }">
    <div class="dynamic-row">
      <n-input v-model:value="value.name" @update:value="v => onChange({ ...value, name: v })" placeholder="Имя"/>
      <n-input v-model:value="value.value" @update:value="v => onChange({ ...value, value: v })" placeholder="Значение"/>
    </div>
  </template>
</n-dynamic-input>

События и реактивность

Ключевые события компонента:

update:value — срабатывает при изменении любого поля.
add — при добавлении нового элемента.
remove — при удалении элемента.

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

this.items.push('Новое значение');
this.items.splice(0, 1);