Textarea

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

Свойства компонента

  • value / v-model – двустороннее связывание данных. Позволяет получать и обновлять текущее содержимое textarea.

    <n-textarea v-model="textValue" placeholder="Введите текст" />

  • placeholder – отображаемый текст, когда поле пустое.

  • rows – начальное количество видимых строк. По умолчанию 2.

  • autosize – автоматическое изменение высоты поля в зависимости от текста. Может быть булевым значением или объектом с параметрами minRows и maxRows.

    <n-textarea
  v-model="textValue"
  :autosize="{ minRows: 3, maxRows: 10 }"
/>

  • disabled – блокирует ввод текста и изменяет стиль компонента.

  • readonly – делает поле доступным только для чтения без возможности редактирования.

  • maxlength – ограничение на количество символов. При достижении лимита ввод блокируется.

  • show-count – отображение счетчика символов рядом с полем.

    <n-textarea
  v-model="textValue"
  maxlength="200"
  show-count
/>

  • status – визуальное состояние поля: "error", "warning", "success". Используется для отображения ошибок или подтверждения правильного ввода.

  • clearable – добавляет кнопку очистки содержимого поля.

  • resize – управляет возможностью изменения размера textarea пользователем. Значения: "none", "both", "horizontal", "vertical".

События

Компонент Textarea поддерживает стандартные события ввода и специфические для Naive UI:

  • on-update:value – вызывается при изменении содержимого.
  • on-input – стандартное событие ввода текста.
  • on-focus / on-blur – фокусировка и потеря фокуса.
  • on-clear – срабатывает при использовании кнопки очистки.
  • on-change – вызывается после завершения изменения значения (например, при потере фокуса).

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

<n-textarea
  v-model="textValue"
  @on-focus="handleFocus"
  @on-blur="handleBlur"
  @on-clear="textValue = ''"
/>

Стилизация и кастомизация

  • size – регулирует размер поля: "small", "medium", "large".
  • bordered – включение/отключение рамки.
  • placeholder-style – индивидуальная стилизация текста placeholder.
  • style / class – стандартные CSS-свойства для внешней стилизации компонента.

Пример кастомизации:

<n-textarea
  v-model="textValue"
  size="large"
  bordered
  style="background-color: #f5f5f5; font-size: 16px;"
/>

Интеграция с формами

Textarea полностью совместим с компонентом Form из Naive UI. Это позволяет:

  • Использовать v-model для двустороннего связывания с формой.
  • Применять валидацию через правила формы.
  • Управлять статусом поля на основе результатов проверки.

Пример формы с textarea:

<n-form :model="formData" :rules="rules">
  <n-form-item label="Комментарий" path="comment">
    <n-textarea v-model="formData.comment" show-count maxlength="300" />
  </n-form-item>
</n-form>

Автоматическая подстройка высоты

Использование autosize позволяет избежать появления скроллбаров и делает интерфейс более удобным для ввода больших объемов текста. Настройка minRows и maxRows гарантирует контроль над внешним видом и предотвращает чрезмерное разрастание поля.

Управление состояниями и валидацией

Использование свойства status позволяет визуально обозначать состояние поля:

  • "error" – красная рамка, указывает на ошибку ввода.
  • "warning" – желтая рамка, предупреждение.
  • "success" – зеленая рамка, подтверждение корректного ввода.

Пример динамического изменения статуса:

<n-textarea
  v-model="textValue"
  :status="textValue.length > 100 ? 'warning' : ''"
/>

Резюме ключевых возможностей

  • Поддержка двустороннего связывания (v-model).
  • Автоматическая подстройка высоты через autosize.
  • Ограничение символов и отображение счетчика (maxlength, show-count).
  • Управление доступностью (disabled, readonly).
  • Стилизация размеров и внешнего вида (size, bordered, style).
  • Интеграция с формами и валидацией.
  • События для отслеживания ввода, фокуса и очистки.

Компонент Textarea в Naive UI обеспечивает гибкость и удобство при работе с многострочными текстовыми полями, сочетая функциональность стандартного HTML <textarea> с расширенными возможностями управления и стилизации.

Оглавление