SwInput
Компонент SwInput представляет собой поле ввода с возможностью настройки внешнего вида и поведения.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
name | String | required | Обязателен! нужен для связывания через id input и label. |
class | String | sw-input | Добавляет пользовательский CSS-класс к компоненту. |
size | String | `` | Размер поля: 'large', 'small'. |
type | String | text | Тип поля: 'text'- текст, 'phone'- телефон, 'password' - пароль |
inputMode | String | text | Мобильная клавиатура: 'text'- стандартная, 'search'- поиск, 'numeric'- цифры, 'decimal' - числа, 'tel' - телефон, 'url' - адреса, 'email' - почта |
before | String | `` | Название svg в спрайте загружаемое в начале. |
after | String | `` | Название svg в спрайте загружаемое в конце. |
placeholder | String | `` | Текст Placeholder. |
required | Boolean | false | Признак обязательно ли для заполнения. |
label | String | `` | Текст в Label. |
maxlength | Number | 128 | Параметр атрибута max-length. Минимальное количество символов разрешённых в тексте. |
minlength | Number | 1 | Параметр атрибута min-length. Минимальное количество символов разрешённых в тексте. |
inputSize | Number | 60 | Параметр атрибута size - ширина текстового поля. |
Слоты / Slots
#prefix - вставка при отсутствии before не обязательно / Insertion when before is not used (optional). #suffix - вставка при отсутствии after не обязательно / Insertion when after is not used (optional).
Модель / Model
model - значение поля ввода
События / Events
prefix - клик иконке before suffix - клик иконке after focusInput - focus на поле ввода
Пример использования / Example Usage
<sw-input
v-model="model"
name="input"
class="custom-class"
size="large"
type="phone"
before="phone"
placeholder="input"
label="input"
@prefix="console.log('before')"
>
<template #suffix>#</template>
</sw-input>