SwInput
Компонент SwInput представляет собой поле ввода с возможностью настройки внешнего вида и поведения.
Свойства / Properties
| Имя | Тип | По умолчанию | Значения/Описание |
|---|---|---|---|
name | String | required | Обязателен! нужен для связывания через id input и label. |
class | String | sw-input | Добавляет пользовательский CSS-класс к компоненту. |
size | String | `` | Размер поля: 'large', 'small'. |
type | String | text | 'text', 'phone' (маска), 'password' (кнопка показать/скрыть), 'textarea', и др. HTML-типы |
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 — ширина текстового поля. |
clearable | Boolean | false | Кнопка очистки значения. |
rows | Number | 3 | Строки для type="textarea". |
Слоты / Slots
#prefix - вставка при отсутствии before не обязательно. #suffix - вставка при отсутствии after не обязательно.
Модель / Model
model - значение поля ввода
События / Events
prefix - клик иконке before
suffix - клик иконке after
focusInput - focus на поле ввода
clear - очистка через clearable
Пример использования / Example Usage
<script setup>
import { ref } from 'vue'
const inputSmall = ref('')
const inputPassword = ref('')
const inputTextarea = ref('')
const phone = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/phone.svg'
</script>
<sw-input v-model="inputSmall" name="input-small" size="small" :before="phone" label="Small" clearable />
<sw-input v-model="inputPassword" name="input-password" type="password" label="Password" clearable />
<sw-input v-model="inputTextarea" name="input-textarea" type="textarea" label="Комментарий" :rows="4" clearable />