Текстовые области v-textarea

v-textarea — это компонент библиотеки Vuetify, предназначенный для ввода многострочного текста. Он расширяет стандартный HTML-элемент <textarea> и добавляет возможности оформления, валидации, управления состоянием и интеграции с системой компонентов.

Текстовые области используются в интерфейсах для:

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

Компонент полностью интегрирован с экосистемой Vue.js и поддерживает реактивную модель данных.

Базовое использование

Минимальный пример текстовой области:

<v-textarea label="Сообщение"></v-textarea>

В этом случае создаётся поле ввода с плавающей подписью.

Чаще всего текстовое поле связывается с реактивными данными через v-model.

<v-textarea
  v-model="message"
  label="Сообщение"
></v-textarea>
export default {
  data() {
    return {
      message: ''
    }
  }
}

Теперь значение текстовой области автоматически синхронизируется с переменной message.

Основные свойства компонента

label

Отображает подпись поля.

<v-textarea
  label="Описание"
></v-textarea>

Подпись автоматически перемещается вверх при фокусе или вводе текста.

placeholder

Отображает подсказку внутри поля.

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

placeholder исчезает после ввода символов.

rows

Определяет начальное количество строк текстовой области.

<v-textarea
  rows="4"
  label="Комментарий"
></v-textarea>

Это задаёт минимальную высоту поля.

auto-grow

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

<v-textarea
  auto-grow
  label="Сообщение"
></v-textarea>

Особенности поведения:

  • высота растёт по мере добавления строк
  • вертикальная прокрутка не появляется
  • интерфейс остаётся адаптивным

counter

Отображает счётчик введённых символов.

<v-textarea
  v-model="text"
  counter
  label="Описание"
></v-textarea>

Можно указать максимальное количество символов:

<v-textarea
  v-model="text"
  counter="200"
  label="Описание"
></v-textarea>

Внизу поля будет отображаться:

54 / 200

Ограничение длины текста

Ограничение вводимых символов задаётся свойством maxlength.

<v-textarea
  v-model="text"
  maxlength="300"
  counter
></v-textarea>

Поведение:

  • ввод ограничивается 300 символами
  • счётчик показывает текущее количество

Отключение текстовой области

disabled

Полностью блокирует поле.

<v-textarea
  label="Комментарий"
  disabled
></v-textarea>

Поле становится неактивным и недоступным для ввода.

readonly

Поле отображает текст, но не позволяет его изменять.

<v-textarea
  v-model="text"
  readonly
></v-textarea>

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

Стили отображения

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

outlined

Контурное поле.

<v-textarea
  outlined
  label="Описание"
></v-textarea>

Характеристики:

  • чёткая рамка
  • современный минималистичный стиль

filled

Заполненный стиль.

<v-textarea
  filled
  label="Комментарий"
></v-textarea>

Особенности:

  • фон внутри поля
  • мягкий визуальный акцент

solo

Самостоятельное поле без стандартной рамки.

<v-textarea
  solo
  label="Сообщение"
></v-textarea>

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

Цветовое оформление

Свойство color определяет основной цвет компонента.

<v-textarea
  label="Описание"
  color="primary"
></v-textarea>

Возможные значения соответствуют теме Vuetify:

  • primary
  • secondary
  • success
  • error
  • warning
  • info

Пример:

<v-textarea
  label="Комментарий"
  color="success"
></v-textarea>

Отображение ошибок

error

Принудительно отображает состояние ошибки.

<v-textarea
  error
  label="Описание"
></v-textarea>

Поле подсвечивается цветом ошибки.

error-messages

Отображает текст ошибки.

<v-textarea
  label="Комментарий"
  error-messages="Поле обязательно"
></v-textarea>

Можно передавать массив сообщений:

<v-textarea
  :error-messages="errors"
></v-textarea>

Валидация

Vuetify позволяет задавать правила проверки через rules.

<v-textarea
  v-model="message"
  :rules="rules"
  label="Сообщение"
></v-textarea>
export default {
  data() {
    return {
      message: '',
      rules: [
        v => !!v || 'Поле обязательно',
        v => v.length >= 10 || 'Минимум 10 символов'
      ]
    }
  }
}

Каждое правило — функция, возвращающая:

  • true — если проверка успешна
  • строку — если произошла ошибка

Очистка текстовой области

Свойство clearable добавляет кнопку очистки.

<v-textarea
  v-model="message"
  clearable
  label="Сообщение"
></v-textarea>

При нажатии на иконку поле очищается.

Подсказки

hint

Добавляет текст подсказки под полем.

<v-textarea
  label="Описание"
  hint="Введите подробное описание"
></v-textarea>

persistent-hint

Подсказка отображается постоянно.

<v-textarea
  hint="Минимум 20 символов"
  persistent-hint
></v-textarea>

Без этого свойства подсказка появляется только при фокусе.

Иконки

prepend-icon

Добавляет иконку перед полем.

<v-textarea
  prepend-icon="mdi-message"
  label="Сообщение"
></v-textarea>

append-icon

Добавляет иконку после поля.

<v-textarea
  append-icon="mdi-send"
></v-textarea>

Автоматическая высота с ограничением

Комбинация auto-grow и rows позволяет контролировать поведение поля.

<v-textarea
  auto-grow
  rows="2"
  label="Комментарий"
></v-textarea>

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

<v-textarea
  auto-grow
  rows="3"
  row-height="24"
></v-textarea>

Работа с событиями

Текстовая область поддерживает стандартные события Vue.

input

Вызывается при изменении текста.

<v-textarea
  v-model="text"
  @input="onInput"
></v-textarea>
methods: {
  onInput(value) {
    console.log(value)
  }
}

focus

Срабатывает при получении фокуса.

<v-textarea
  @focus="onFocus"
></v-textarea>

blur

Срабатывает при потере фокуса.

<v-textarea
  @blur="onBlur"
></v-textarea>

Пример формы обратной связи

<v-form ref="form">
  <v-textarea
    v-model="message"
    label="Сообщение"
    outlined
    auto-grow
    counter="500"
    :rules="rules"
  ></v-textarea>

  <v-btn
    color="primary"
    @click="submit"
  >
    Отправить
  </v-btn>
</v-form>
export default {
  data() {
    return {
      message: '',
      rules: [
        v => !!v || 'Введите сообщение',
        v => v.length >= 20 || 'Минимум 20 символов'
      ]
    }
  },
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        console.log(this.message)
      }
    }
  }
}

Форма выполняет следующие задачи:

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

Практические сценарии применения

Текстовые области используются в большинстве веб-интерфейсов:

Комментарии

Комментарий к статье

Отзывы пользователей

Отзыв о товаре

Описание объектов

Описание проекта
Описание товара
Описание профиля

Формы поддержки

Сообщение в службу поддержки

Компонент v-textarea объединяет функциональность стандартного HTML-элемента <textarea> с системой тем, реактивности и валидации Vuetify, что позволяет создавать масштабируемые и удобные формы ввода текста.

Оглавление