Компонент Switch — это стилизованный переключатель (toggle) с поддержкой двух вариантов оформления, асинхронного обработчика изменений, индикатора загрузки и состояний блокировки.
- Основное назначение: переключение между двумя состояниями (вкл/выкл).
- Ключевые возможности:
- Два варианта оформления:
basic (с заливкой) и outlined (контурный). - Цветовая палитра.
- Асинхронный обработчик изменений с индикатором загрузки.
- Автоматический откат при ошибке или возврате
false. - Блокированное состояние (
disabled). - Нестилизованный режим (
unstyled). - Встроенная метка (
label) или внешняя. - ARIA-роль
switch. - Событие
error при исключении в асинхронном обработчике.
| Проп | Тип | По умолчанию | Описание |
|---|
modelValue | Boolean | | Текущее состояние переключателя (v-model). |
variant | String | 'basic' | Вариант оформления. Возможные значения: 'basic', 'outlined'. |
color | String | 'primary' | Цвет переключателя. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error'. |
label | String | Number | Object | | Текст метки. Если указан, переключатель оборачивается в <label>. |
labelProps | Object | {} | Дополнительные атрибуты для элемента label. |
disabled | Boolean | false | Блокирует переключатель. |
unstyled | Boolean | false | Убирает все стили по умолчанию. |
className | String | | Дополнительные CSS-классы для поля ввода. |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: label, labelText, input. |
onChange | Function | | Асинхронная функция-обработчик изменения. Принимает новое значение, может вернуть false для отмены. |
role | String | 'switch' | ARIA-роль элемента. |
| Событие | Параметр | Описание |
|---|
update:modelValue | Boolean | Вызывается при успешном изменении состояния. |
error | Error | Вызывается при возникновении ошибки в асинхронном onChange. |
| Метод | Описание |
|---|
focus() | Устанавливает фокус на переключатель. |
blur() | Убирает фокус с переключателя. |
| Атрибут | Значение | Условие |
|---|
data-disabled | 'true' | Переключатель заблокирован или в состоянии загрузки. |
