QInput для текстовых полей

QInput — один из базовых компонентов Quasar, предназначенный для создания текстовых полей с широкими возможностями настройки. Он является оберткой над стандартным <input> HTML, но добавляет множество встроенных функций, таких как валидация, маски ввода, иконки действий, стилизация и взаимодействие с темой приложения.

Основные свойства QInput

  • v-model Связывает значение поля с переменной в компоненте Vue. Изменение значения в поле автоматически обновляет переменную, и наоборот.

  • type Определяет тип поля ввода: text, password, number, email, tel и др. Пример:

    <q-input v-model="email" type="email" label="Электронная почта" />

  • label Отображает текстовую подсказку для поля ввода. Поддерживает плавающие лейблы при фокусе.

  • placeholder Отображает временный текст внутри поля, пока пользователь не ввел значение.

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

Валидация и правила

QInput поддерживает встроенную валидацию через свойство rules, которое принимает массив функций или выражений. Каждая функция должна возвращать true, если значение корректное, или строку с сообщением об ошибке, если нет.

Пример:

<q-input
  v-model="username"
  label="Имя пользователя"
  :rules="[val => val.length >= 3 || 'Имя должно содержать минимум 3 символа']"
/>
  • Множественные правила выполняются последовательно.
  • Встроенные правила можно комбинировать с кастомными функциями для гибкой проверки.

Маски и форматирование

Свойство mask позволяет ограничить формат ввода. Маски используют символы:

  • # — цифра
  • A — буква
  • * — любая буква или цифра

Пример для номера телефона:

<q-input
  v-model="phone"
  mask="+7 (###) ###-##-##"
  label="Телефон"
/>

fill-mask можно использовать, чтобы автоматически подставлять символы маски в поле ввода.

Иконки и слоты

QInput поддерживает добавление иконок слева и справа:

  • prepend-icon — иконка перед полем.
  • append-icon — иконка после поля, можно использовать для очистки или действий.

Пример:

<q-input
  v-model="search"
  label="Поиск"
  prepend-icon="search"
  @append="searchData"
/>

Дополнительно доступны слоты:

  • before и after — позволяют вставлять произвольный HTML или компоненты.
  • hint и counter — отображают подсказку и счетчик символов.

Счетчики символов

Свойство counter отображает текущую длину текста и позволяет ограничивать максимальное количество символов:

<q-input
  v-model="comment"
  label="Комментарий"
  counter
  :maxlength="200"
/>

Если требуется показывать только лимит без счетчика текущих символов, используется max-length без counter.

Работа с фокусом и событиями

QInput поддерживает события:

  • @focus — поле получило фокус.
  • @blur — потеря фокуса.
  • @input — каждое изменение текста.
  • @keyup, @keydown — перехват клавиш.

Пример:

<q-input
  v-model="email"
  label="Email"
  @blur="validateEmail"
/>

Методы компонента позволяют управлять состоянием:

  • focus() — программное наведение фокуса.
  • select() — выделение текста.
  • reset() — очистка значения.

Стили и оформление

  • dense — компактное поле.
  • outlined — обводка вокруг поля.
  • filled — заливка фона.
  • standout — выделение цветом для уведомления пользователя.

Пример комбинирования:

<q-input
  v-model="name"
  label="ФИО"
  outlined
  dense
  :rules="[val => val.length > 0 || 'Поле обязательно']"
/>

QInput автоматически наследует цвет темы Quasar, поддерживает динамическое изменение цвета подсказок и рамок через свойства color и text-color.

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

QInput легко интегрируется с QForm, поддерживает валидацию всей формы и сброс значений:

<q-form ref="form" @submit="submitForm">
  <q-input v-model="username" label="Имя" :rules="[val => val !== '' || 'Введите имя']"/>
  <q-btn type="submit" label="Отправить"/>
</q-form>
  • Метод this.$refs.form.validate() проверяет все поля с правилами.
  • Метод this.$refs.form.reset() очищает форму.

Масштабируемость и расширения

QInput можно использовать как основу для сложных кастомных компонентов:

  • комбинирование с QSelect, QDate, QTime для создания сложных форм;
  • использование слотов для добавления динамических кнопок или индикаторов состояния;
  • создание собственных масок или фильтров для специфических данных.

QInput предоставляет все необходимые инструменты для построения профессиональных интерфейсов с гибкой настройкой, встроенной валидацией и визуально аккуратным оформлением.

Оглавление