Input

Input - это расширение стандартного элемента ввода с типизацией.

Базовый

Компонент Input используется для сбора пользовательского ввода. Он поддерживает различные режимы и опции настройки.

<Input v-model="value"/>

Базовое использование компонента Input включает привязку свойства данных с использованием директивы v-model. Эта директива автоматически синхронизирует значение ввода с указанным свойством данных, обеспечивая двустороннюю привязку данных.

Тип

Свойство type позволяет вам указать тип поля ввода. Доступные типы: "text", "number", "email" и "password".

Текст

Число

Электронная почта

Пароль

<Input type="text" v-model="value"/>
<Input type="number" v-model="value"/>
<Input type="email" v-model="value"/>
<Input type="password" v-model="value"/>

AutoFocus

Свойство autoFocus автоматически фокусирует поле ввода при монтировании компонента.

<Input autoFocus v-model="value"/>

Placeholder

Свойство placeholder предоставляет подсказку для ожидаемого ввода, отображая текст-заменитель внутри поля ввода.

<Input placeholder="Введите ваш текст здесь" v-model="value"/>

Autocomplete

Свойство autocomplete управляет функцией автозаполнения браузера. Оно может быть установлено в "on" или "off".

Вкл

Выкл

<Input autocomplete="on" v-model="value"/>
<Input autocomplete="off" v-model="value"/>

Mask

Свойство maskInput позволяет вам применять маски ввода для специальных форматов, таких как "phone", "number" или "price". Вы также можете определять пользовательские маски в виде строк.

Число

Цена

Телефон

<Input maskInput="number" v-model="value"/>
<Input maskInput="price" v-model="value"/>
<Input maskInput="phone" v-model="value"/>

Ограничения длины

Свойства lengthInteger и lengthDecimal устанавливают максимальную длину для целой и десятичной частей значения ввода соответственно. Эти свойства полезны для вводов, требующих числовых значений с определенным форматированием.

<Input maskInput="number" :lengthInteger="7" :lengthDecimal="2" v-model="value"/>

Пользовательский CSS-класс

Свойство classInput позволяет вам применять пользовательские CSS-классы к элементу ввода, давая вам возможность стилизовать его в соответствии с вашими требованиями к дизайну.

Текст


<template>
  <Input label="text" classInput="text-theme-700 dark:text-theme-300">
  <template #before>
    <Icons type="bi:body-text"/>
  </template>
  </Input>
</template>