Текстовое поле

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

Применение

A simple text field with placeholder and/or label.

API

v-text-field
Имя
append-icon
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
append-outer-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
autofocus
По умолчанию
false
Тип
boolean

Включить автофокусировку

Имя
background-color
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
box
По умолчанию
false
Тип
boolean

Применяет стиль ввода альтернативного ввода

Имя
browser-autocomplete
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
clear-icon
По умолчанию
'$vuetify.icons.clear'
Тип
string

Components.TextFields.

Имя
clearable
По умолчанию
false
Тип
boolean

Добавить функциональные возможности ввода, значок по умолчанию - Material Icons *clear

Имя
color
По умолчанию
'primary'
Тип
string

Применяет заданный цвет к элементу управления

Имя
counter
По умолчанию
undefined
Тип
boolean | number | string

Создаёт счётчик для входной длины. Если номер не указан, по умолчанию он равен 25. Не применяется какая-либо проверка.

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
disabled
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
dont-fill-mask-blanks
По умолчанию
false
Тип
boolean

Отключает автоматическое отображение символов при наборе текста

Имя
error
По умолчанию
false
Тип
boolean

Вставляет состояние ошибки в ввод вручную

Имя
error-count
По умолчанию
1
Тип
number | string

Components.TextFields.

Имя
error-messages
По умолчанию
[]
Тип
string | array

Вставляет состояние ошибки в ввод и передаёт пользовательские сообщения об ошибках. Будет сочетаться с любыми валидациями, которые возникают из rules. Это поле не инициирует проверку

Имя
flat
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
full-width
По умолчанию
false
Тип
boolean

Сбрасывает тип ввода как полную ширину

Имя
height
По умолчанию
undefined
Тип
number | string

Установка высоты компонента

Имя
hide-details
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
hint
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
label
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
loading
По умолчанию
false
Тип
boolean | string

Components.TextFields.

Имя
mask
По умолчанию
undefined
Тип
object | string

Примените специальную маску на вход. Для получения дополнительной информации см. Таблицу масок выше

Имя
messages
По умолчанию
[]
Тип
string | array

Components.TextFields.

Имя
outline
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
persistent-hint
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
placeholder
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
prefix
По умолчанию
undefined
Тип
string

Отображает префиксный текст

Имя
prepend-icon
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
prepend-inner-icon New in — v1.1
По умолчанию
undefined
Тип
string

Components.TextFields.

Имя
readonly
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
return-masked-value
По умолчанию
false
Тип
boolean

Возвращает неизмененную строку в маске

Имя
reverse New in — v1.1
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
rules
По умолчанию
[]
Тип
array

Массив функций, возвращающих True или String с сообщением об ошибке

Имя
single-line
По умолчанию
false
Тип
boolean

Ярлык не перемещается на фокус/dirty

Имя
solo
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
solo-inverted
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
success New in — v1.1
По умолчанию
false
Тип
boolean

Components.TextFields.

Имя
success-messages New in — v1.1
По умолчанию
[]
Тип
string | array

Components.TextFields.

Имя
suffix
По умолчанию
undefined
Тип
string

Отображает суффикс-текста

Имя
type
По умолчанию
'text'
Тип
string

Устанавливает тип ввода

Имя
validate-on-blur
По умолчанию
false
Тип
boolean

Задержка проверки до размытия

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Дополнительный

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

Примеры

Однострочная светлая тема

Однострочные текстовые поля не всплывают на метки с фокусом или с данными.

Disabled and readonly

Text fields can be disabled or readonly.

С иконкой

Иконки могут быть указаны как присоединённые или добавленные.

Clearable

When clearable, you can customize the clear icon with clear-icon.

Icon events

click:prepend, click:append, click:append-outer, and click:clear will be emitted when you click on the respective icon. Note that these events will not be fired if the slot is used instead.

Icon slots

Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality.

Label slot

Text field label can be defined in label slot - that will allow to use HTML content

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

Используйте счётчик, чтобы проинформировать пользователя о значении лимита. Счётчик не выполняет никакой проверки самостоятельно. Вам необходимо соединить его либо с внутренней системой проверки, либо с библиотекой сторонних разработчиков.

Ввод пароля

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

Валидация

Vuetify включает в себя простую проверку с помощью rules. Подпрограмма принимает массив обратных вызовов. При проверке правил текущее значение v-model будет передано на обратный вызов. Этот обратный вызов должен возвращать либо true, либо String, сообщение об ошибке.

Текстовое поле полной ширины с символьным счётчиком

Полные текстовые поля позволяют создавать безграничные вводы. В этом примере мы используем v-divider для разделения полей.

Текст подсказки

Свойство hint в текстовых полях добавляет предоставленную строку под текстовым полем. Использование persistent-hint сохраняет подсказку, когда текстовое поле не фокусируется.

Префиксы и суффиксы

Свойство prefix и suffix позволяет добавлять и добавлять встроенный немодифицируемый текст рядом с текстовым полем

Пользовательская проверка

Хотя встроенный в v-form или сторонний плагин, такой как vuelidate или vee-validation может помочь упростить процесс проверки, вы можете просто контролировать его самостоятельно.

Стиль бокса

Текстовые поля могут использоваться с альтернативным дизайном бокса. Добавленная и присоединённая иконка перед именем реквизита не поддерживается в этом режиме.

Solo style

Text-fields can be used with an alternative solo design.

Outline style

Text fields can be used with an alternative outline design.

Пользовательские цвета

Вы можете при необходимости изменить текстовое поле на любой цвет в палитре Design Material. Ниже приведён пример реализации пользовательской формы с проверкой.

Маски

Текстовые поля могут проверять маски символов. Используя либо готовые, либо настраиваемые правила, вы можете форматировать и проверять конкретные наборы символов.

Progress bar

Вместо нижней строки можно отобразить индикатор выполнения. Вы можете использовать неопределённый прогресс по умолчанию, имеющий тот же цвет, что и текстовое поле, или назначить пользовательский, используя слот progress

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore