Input API

Эта страница предоставляет обзор API компонента Input, детализируя его props, emits, слоты и открытые методы/состояния.

Props

Компонент Input принимает следующие props:

Prop	Значение по умолчанию	Тип	Описание
`type`	`"text"`	`"text"` или `"number"` или `"email"` или `"password"`	Тип поля ввода.
`autoFocus`	`false`	`boolean`	Автоматически фокусирует поле ввода при монтировании.
`placeholder`	`""`	`string`	Текст-заменитель для поля ввода.
`autocomplete`	`"on"`	`"on"` или `"off"`	Поведение автозаполнения для поля ввода.
`maskInput`	`""`	`"phone"` или `"number"` или `"price"` или `string`	Тип маски для значения ввода.
`lengthInteger`	`null`	`number`	Максимальная длина для целой части значения ввода.
`lengthDecimal`	`null`	`number`	Максимальная длина для десятичной части значения ввода.
`classInput`	`""`	`StyleClass`	Пользовательский CSS-класс для элемента ввода.
`id`	`undefined`	`string`	Уникальный идентификатор для элемента ввода.
`modelValue`	`undefined`	`string` или `number` или `null` или `undefined`	Текущее значение поля ввода.

Emits

Компонент Input испускает следующие события:

Emit	Payload	Описание
`clear`	`string`	Испускается, когда ввод очищается.
`focus`	`FocusEvent`	Испускается, когда ввод получает фокус.
`blur`	`FocusEvent`	Испускается, когда ввод теряет фокус.
`update:modelValue`	`string`	Испускается, когда `modelValue` обновляется.
`change:modelValue`	`string`	Испускается, когда `modelValue` изменяется.
`update:isInvalid`	`boolean`	Испускается, когда состояние недействительности ввода обновляется.
`isActive`	`boolean`	Испускается, когда ввод становится активным.

Слоты

Компонент Input предоставляет следующие слоты:

Слот	Payload	Описание
`default`	`VNode[]`	Слот по умолчанию для пользовательского контента внутри компонента ввода.
`before`	`VNode[]`	Слот для контента, который будет отображаться перед полем ввода.
`after`	`VNode[]`	Слот для контента, который будет отображаться после поля ввода.

Expose

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

Expose	Значение	Описание
`layout`	`InputLayoutExpose` или `undefined`	Ссылка на состояние компоновки ввода.
`isActiveInput`	`boolean`	Указывает, активен ли ввод.
`classLayout`	`InputProps["class"]`	Пользовательский CSS-класс для компоновки ввода.
`id`	`InputProps["id"]`	Текущий `id` поля ввода.
`type`	`InputProps["type"]`	Текущий тип поля ввода.
`mask`	`InputProps["maskInput"]`	Текущий тип маски, примененной к полю ввода.
`modelValue`	`InputProps["modelValue"]`	Текущее значение поля ввода.
`autoFocus`	`InputProps["autoFocus"]`	Указывает, включено ли автофокусирование.
`placeholder`	`InputProps["placeholder"]`	Текущий текст-заменитель поля ввода.
`autocomplete`	`InputProps["autocomplete"]`	Текущая настройка автозаполнения поля ввода.
`lengthInteger`	`InputProps["lengthInteger"]`	Максимальная длина для целой части значения ввода.
`lengthDecimal`	`InputProps["lengthDecimal"]`	Максимальная длина для десятичной части значения ввода.
`isValue`	`InputLayoutProps["isValue"]`	Указывает, имеет ли ввод значение.
`mode`	`InputProps["mode"]`	Текущий режим ввода.
`isDisabled`	`InputProps["disabled"]`	Указывает, отключен ли ввод.
`isLoading`	`InputProps["loading"]`	Указывает, находится ли ввод в состоянии загрузки.
`isInvalid`	`InputProps["isInvalid"]`	Указывает, является ли ввод недействительным.
`messageInvalid`	`InputProps["messageInvalid"]`	Сообщение об ошибке валидации для поля ввода.
`classBaseInput`	`InputProps["class"]`	CSS-класс для контейнера базы ввода.

Методы:

toMask(baseValue: string | number): string - Применяет маску к значению ввода.
inputModelValue(valueResult: any): void - Обновляет значение модели ввода.
changeModelValue(valueResult: any): void - Изменяет значение модели ввода и запускает связанное событие.
clear(): void - Очищает значение ввода.
focus(eventFocus: FocusEvent): void - Фокусирует поле ввода.
blur(eventFocus: FocusEvent): void - Убирает фокус с поля ввода.