InputLayout API

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

Props

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

Prop	Значение по умолчанию	Тип	Описание
`value`	`null`	`any`	Значение элемента ввода внутри компоновки.
`isValue`	`false`	`boolean` или `undefined`	Указывает, имеет ли ввод значение.
`mode`	`"outlined"`	`StyleMode` или `undefined`	Стиль компоновки ввода.
`label`	`""`	`string` или `undefined`	Текст метки для ввода.
`labelMode`	`"offsetDynamic"`	`LabelMode` или `undefined`	Режим отображения метки.
`isInvalid`	`false`	`boolean` или `undefined`	Указывает, является ли ввод недействительным.
`messageInvalid`	`""`	`string` или `undefined`	Сообщение об ошибке валидации для ввода.
`required`	`false`	`boolean` или `undefined`	Помечает ввод как обязательный.
`loading`	`false`	`boolean` или `undefined`	Указывает, находится ли ввод в состоянии загрузки.
`disabled`	`false`	`boolean` или `undefined`	Отключает поле ввода.
`help`	`""`	`string` или `undefined`	Дополнительный текст помощи, отображаемый для ввода.
`clear`	`false`	`boolean` или `undefined`	Включает кнопку очистки для ввода.
`width`	`""`	`TWidth` или `undefined`	Ширина компоновки ввода.
`height`	`"38px"`	`THeight` или `undefined`	Высота компоновки ввода.
`animation`	`"transition-all duration-550"`	`"transition-all duration-500"` или `"transition-none"` или `string` или `undefined`	Тип анимации для переходов внутри компоновки.
`classBody`	`"mb-6 rounded-md"`	`StyleClass` или `"mb-6 rounded-md"` или `undefined`	Пользовательский CSS-класс для тела компоновки.
`class`	`""`	`StyleClass` или `undefined`	Пользовательский CSS-класс для контейнера компоновки.

Emits

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

Emit	Payload	Описание
`clear`	`void`	Испускается, когда нажата кнопка очистки.

Слоты

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

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

Expose

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

Expose	Значение	Описание
`input`	`HTMLElement` или `undefined`	Ссылка на элемент ввода внутри компоновки.
`inputBody`	`HTMLElement` или `undefined`	Ссылка на контейнер тела ввода.
`beforeInput`	`HTMLElement` или `undefined`	Ссылка на элемент перед вводом.
`afterInput`	`HTMLElement` или `undefined`	Ссылка на элемент после ввода.
`headerHeight`	`number`	Высота заголовка в компоновке.
`isCopy`	`boolean`	Указывает, скопировано ли значение ввода.
`beforeWidth`	`number` или `null`	Ширина элемента перед вводом.
`afterWidth`	`number` или `null`	Ширина элемента после ввода.
`value`	`InputLayoutProps["value"]`	Текущее значение ввода.
`isValue`	`InputLayoutProps["isValue"]`	Указывает, имеет ли ввод значение.
`mode`	`InputLayoutProps["mode"]`	Текущий стиль компоновки ввода.
`label`	`InputLayoutProps["label"]`	Текущий текст метки для ввода.
`labelMode`	`InputLayoutProps["labelMode"]`	Текущий режим отображения метки.
`labelType`	`InputLayoutProps["labelMode"]`	Тип режима отображения метки, применяемый к компоновке ввода.
`isRequired`	`InputLayoutProps["required"]`	Указывает, является ли ввод обязательным.
`isLoading`	`InputLayoutProps["loading"]`	Указывает, находится ли ввод в состоянии загрузки.
`isDisabled`	`InputLayoutProps["disabled"]`	Указывает, отключен ли ввод.
`isInvalid`	`InputLayoutProps["isInvalid"]`	Указывает, является ли ввод недействительным.
`messageInvalid`	`InputLayoutProps["messageInvalid"]`	Сообщение об ошибке валидации для ввода.
`help`	`InputLayoutProps["help"]`	Текст помощи для ввода.
`width`	`InputLayoutProps["width"]`	Ширина компоновки ввода.
`height`	`InputLayoutProps["height"]`	Высота компоновки ввода.
`animation`	`InputLayoutProps["animation"]`	Анимация, применяемая к компоновке.
`classBody`	`InputLayoutProps["classBody"]`	Пользовательский CSS-класс для тела компоновки.
`class`	`InputLayoutProps["class"]`	Пользовательский CSS-класс для контейнера компоновки.

Методы:

copy(): void - Копирует текущее значение ввода в буфер обмена.