Переключатели v-switch

Компонент v-switch библиотеки Vuetify представляет собой интерактивный переключатель, предназначенный для управления булевыми значениями. Он используется в интерфейсах для включения и отключения параметров, настройки функций приложения и изменения состояния различных опций.

Переключатели визуально отображают два состояния:

  • включено (true)
  • выключено (false)

В отличие от чекбоксов, переключатели ориентированы на быстрое изменение состояния без необходимости подтверждения. Они часто применяются в настройках приложений, формах конфигурации, панелях управления и мобильных интерфейсах.

Компонент v-switch основан на той же логике управления состоянием, что и другие элементы ввода Vuetify, включая использование v-model для двустороннего связывания данных.

Базовое использование

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

<template>
  <v-switch v-model="enabled"></v-switch>
</template>

<script>
export default {
  data() {
    return {
      enabled: false
    }
  }
}
</script>

В этом примере:

  • enabled хранит текущее состояние переключателя.
  • при изменении состояния интерфейса автоматически обновляется значение переменной.

Когда пользователь активирует переключатель, значение становится true, при выключении — false.

Добавление подписи (label)

Для пояснения назначения переключателя используется свойство label.

<v-switch
  v-model="notifications"
  label="Уведомления"
/>

Подпись отображается рядом с элементом управления и помогает понять назначение настройки.

Подпись может содержать:

  • простой текст
  • HTML-разметку
  • динамические данные

Использование слотов для подписи

Вместо свойства label можно использовать слот label, позволяющий создавать более сложную разметку.

<v-switch v-model="darkMode">
  <template v-slot:label>
    <span>Темная тема интерфейса</span>
  </template>
</v-switch>

Слоты позволяют:

  • добавлять иконки
  • использовать стили
  • внедрять дополнительные элементы интерфейса

Управление значениями через true-value и false-value

По умолчанию переключатель работает с булевыми значениями. Однако возможно задать собственные значения при помощи свойств:

  • true-value
  • false-value
<v-switch
  v-model="status"
  :true-value="'active'"
  :false-value="'inactive'"
  label="Статус"
/>

В этом случае:

Состояние Значение
включено "active"
выключено "inactive"

Это особенно полезно при интеграции с API, где используются строковые или числовые значения.

Использование массива значений

Компонент может работать с массивом, добавляя или удаляя элементы из него.

<v-switch
  v-model="selectedFeatures"
  value="analytics"
  label="Аналитика"
/>
data() {
  return {
    selectedFeatures: []
  }
}

Логика работы:

  • при включении "analytics" добавляется в массив
  • при выключении значение удаляется

Этот механизм позволяет использовать переключатели для множественного выбора.

Цвет переключателя

Цвет активного состояния регулируется через свойство color.

<v-switch
  v-model="wifi"
  label="Wi-Fi"
  color="green"
/>

Vuetify поддерживает множество встроенных цветов:

  • primary
  • secondary
  • success
  • error
  • warning
  • info

Также можно использовать кастомные цвета темы.

Отключение переключателя

Свойство disabled блокирует взаимодействие с компонентом.

<v-switch
  v-model="feature"
  label="Экспериментальная функция"
  disabled
/>

Особенности поведения:

  • переключатель визуально становится неактивным
  • пользователь не может изменить его состояние
  • значение остается доступным программно

Режим только для чтения

Свойство readonly запрещает изменение состояния пользователем, но визуально компонент остается активным.

<v-switch
  v-model="policyAccepted"
  label="Политика безопасности"
  readonly
/>

Отличие от disabled:

Свойство Взаимодействие Визуальное состояние
disabled запрещено неактивный вид
readonly запрещено обычный вид

Инверсия расположения подписи

Свойство inset изменяет визуальное расположение переключателя.

<v-switch
  v-model="compact"
  label="Компактный режим"
  inset
/>

Этот режим делает компонент более компактным и часто применяется в списках настроек.

Скрытие вспомогательных деталей

По умолчанию Vuetify может отображать дополнительные элементы:

  • сообщения
  • подсказки
  • счетчики

Свойство hide-details скрывает эти элементы.

<v-switch
  v-model="logging"
  label="Журналирование"
  hide-details
/>

Это полезно в интерфейсах, где требуется минималистичный дизайн.

Отображение сообщений

Свойство messages выводит текст под переключателем.

<v-switch
  v-model="sync"
  label="Синхронизация"
  messages="Данные будут синхронизироваться автоматически"
/>

Сообщения применяются для:

  • пояснений
  • подсказок
  • статусов

Отображение ошибок

При использовании форм можно показывать ошибки валидации.

<v-switch
  v-model="agreement"
  label="Согласие"
  :error="hasError"
  error-messages="Необходимо подтвердить согласие"
/>

Поведение:

  • переключатель выделяется цветом ошибки
  • под компонентом отображается текст сообщения

Использование правил валидации

Компонент поддерживает систему rules, используемую во всех полях формы Vuetify.

<v-switch
  v-model="terms"
  label="Принять условия"
  :rules="[v => !!v || 'Необходимо принять условия']"
/>

Массив rules содержит функции проверки.

Если функция возвращает строку, она отображается как сообщение ошибки.

Плотный режим (density)

В Vuetify 3 доступно свойство density, позволяющее изменять плотность интерфейса.

<v-switch
  v-model="compactMode"
  label="Компактный режим"
  density="compact"
/>

Доступные варианты:

  • default
  • comfortable
  • compact

Этот параметр помогает адаптировать интерфейс под различные устройства.

Иконки состояния

Переключатель может отображать разные иконки в зависимости от состояния.

<v-switch
  v-model="security"
  label="Защита"
  true-icon="mdi-lock"
  false-icon="mdi-lock-open"
/>

Это делает интерфейс более наглядным.

События компонента

Компонент генерирует события при изменении состояния.

Основное событие:

update:modelValue

Пример обработки:

<v-switch
  v-model="enabled"
  @update:modelValue="handleChange"
/>
methods: {
  handleChange(value) {
    console.log("Новое значение:", value)
  }
}

Использование внутри формы

Переключатели часто применяются в составе компонента v-form.

<v-form ref="form">
  <v-switch
    v-model="subscribe"
    label="Подписка на рассылку"
  />
</v-form>

При вызове form.validate() будут проверяться правила валидации переключателя.

Работа с Composition API

Переключатели удобно использовать вместе с ref.

<script setup>
import { ref } from 'vue'

const darkTheme = ref(false)
</script>

<template>
  <v-switch
    v-model="darkTheme"
    label="Темная тема"
  />
</template>

ref обеспечивает реактивность состояния.

Группировка переключателей

Несколько переключателей можно объединять для управления набором настроек.

<v-switch
  v-model="settings.notifications"
  label="Уведомления"
/>

<v-switch
  v-model="settings.autoSave"
  label="Автосохранение"
/>

<v-switch
  v-model="settings.analytics"
  label="Сбор аналитики"
/>
data() {
  return {
    settings: {
      notifications: true,
      autoSave: false,
      analytics: false
    }
  }
}

Такой подход упрощает структуру данных настроек.

Динамическое создание переключателей

Часто настройки формируются из массива конфигурации.

<v-switch
  v-for="option in options"
  :key="option.key"
  v-model="option.value"
  :label="option.label"
/>
data() {
  return {
    options: [
      { key: 1, label: "Звук", value: true },
      { key: 2, label: "Уведомления", value: false },
      { key: 3, label: "Автообновление", value: true }
    ]
  }
}

Такой подход используется при генерации интерфейсов настроек.

Оптимизация интерфейсов настроек

Переключатели часто используются в интерфейсах конфигурации. Для удобства восприятия рекомендуется:

  • группировать связанные настройки
  • добавлять поясняющие сообщения
  • использовать единый цвет для логически связанных опций
  • избегать чрезмерного количества переключателей на одном экране

Типичные сценарии применения

Компонент v-switch широко используется в интерфейсах:

Настройки приложения

Темная тема
Уведомления
Автосохранение

Функции системы

Режим разработчика
Журналирование
Отладка

Параметры пользователя

Публичный профиль
Получать письма
Разрешить геолокацию

Распространённые ошибки использования

Использование переключателя для множественного выбора

Если требуется выбрать один вариант из нескольких, следует использовать:

  • v-radio-group

Для множественного выбора более подходит:

  • v-checkbox

Переключатель предназначен исключительно для включения или выключения функции.

Отсутствие пояснений

Без подписи пользователю может быть непонятно назначение переключателя.

Плохой пример:

[ переключатель ]

Хороший пример:

[ переключатель ] Автоматическое обновление

Перегруженность интерфейса

Большое количество переключателей на одной странице ухудшает восприятие. В таких случаях рекомендуется:

  • разбивать настройки по разделам
  • использовать карточки (v-card)
  • группировать элементы (v-list)

Интеграция с Vuex или Pinia

Переключатели могут напрямую управлять состоянием глобального хранилища.

Пример с Pinia:

<v-switch
  v-model="settingsStore.darkMode"
  label="Темная тема"
/>

Таким образом изменение состояния сразу отражается во всей системе приложения.

Роль v-switch в интерфейсах Material Design

Переключатель соответствует паттернам Material Design и используется для управления мгновенными настройками. Его ключевые особенности:

  • мгновенное применение изменения
  • визуальная ясность состояния
  • компактность
  • высокая скорость взаимодействия

Благодаря этим свойствам компонент v-switch является одним из основных элементов пользовательских интерфейсов, реализованных с использованием библиотеки Vuetify.

Оглавление