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 | `` | Иконка в начале: имя из спрайта или URL. См. SwIcon. |
after | String | `` | Иконка в конце: имя из спрайта или URL. См. SwIcon. |
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 не обязательно. #suffix - вставка при отсутствии after не обязательно.
Модель / Model
model - значение поля ввода
События / Events
prefix - клик иконке before suffix - клик иконке after focusInput - focus на поле ввода
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const model = ref('')
</script>
<sw-input
v-model="model"
name="input"
class="custom-class"
size="large"
type="phone"
before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/phone.svg"
placeholder="Your phone"
label="Телефон"
@prefix="console.log('before')"
>
<template #suffix>#</template>
</sw-input>