Switch

Компонент Switch в библиотеке Element Plus используется для создания переключателей состояния — включено/выключено. Он является аналогом стандартного HTML-элемента <input type="checkbox">, но предоставляет расширенные возможности кастомизации и интеграции с Vue 3.

<template>
  <el-switch v-model="isActive"></el-switch>
</template>

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

const isActive = ref(false);
</script>
  • v-model связывает состояние переключателя с реактивной переменной.
  • По умолчанию Switch имеет два состояния: true и false.

Свойства компонента

Основные свойства

  • model-value: текущее состояние переключателя (true/false).

  • active-value / inactive-value: задают значения для активного и неактивного состояния.

    <el-switch
  v-model="status"
  :active-value="1"
  :inactive-value="0">
</el-switch>

  • active-text / inactive-text: текст, отображаемый внутри переключателя для соответствующих состояний.

  • active-color / inactive-color: задают цвет фона переключателя при активном и неактивном состоянии.

  • disabled: делает переключатель неактивным.

  • width: ширина компонента в пикселях. По умолчанию 40px.

Дополнительные возможности

  • loading: отображает индикатор загрузки внутри переключателя.
  • name: имя переключателя для формы, передается как атрибут name в скрытый <input>.
  • id: идентификатор элемента.

События

change

Вызывается при изменении состояния:

<el-switch
  v-model="isActive"
  @change="handleChange">
</el-switch>

<script setup>
function handleChange(value) {
  console.log('Новое состояние:', value);
}
</script>

input

Вызывается при каждом клике на переключатель, аналогично v-model:

<el-switch
  :model-value="isActive"
  @input="val => isActive = val">
</el-switch>

click

Событие клика на переключатель, не меняющее значение:

<el-switch @click="handleClick"></el-switch>

Стилизация и кастомизация

Switch поддерживает гибкую настройку внешнего вида:

  • Цвета: через active-color и inactive-color.

    <el-switch
  v-model="isActive"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

  • Текст: можно добавить подписи состояния через active-text и inactive-text.

  • Размер: изменяется через CSS или атрибут width.

.el-switch {
  width: 60px;
  height: 30px;
}

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

Switch можно использовать внутри <el-form> для привязки значений формы:

<el-form :model="form">
  <el-form-item label="Статус">
    <el-switch v-model="form.status"></el-switch>
  </el-form-item>
</el-form>

<script setup>
const form = reactive({
  status: true
});
</script>

Работа с кастомными значениями

Switch может быть не только булевым. Например, хранить строку или число:

<el-switch
  v-model="role"
  active-value="admin"
  inactive-value="user">
</el-switch>
  • При этом role будет принимать значения "admin" или "user" вместо true/false.
  • Позволяет интегрировать компонент в бизнес-логику с нестандартными типами данных.

Переключатель в состоянии загрузки

Добавление атрибута loading позволяет заблокировать переключатель и показать анимацию:

<el-switch
  v-model="isActive"
  :loading="isLoading">
</el-switch>

<script setup>
const isActive = ref(false);
const isLoading = ref(true);
</script>

Доступность и UX

  • Поддержка клавиатуры: переключение с помощью Space и Enter.
  • Состояние disabled и loading предотвращает случайное изменение значения.
  • Контрастные цвета помогают визуально определить текущее состояние.

Комбинированные примеры

<el-switch
  v-model="status"
  active-color="#409EFF"
  inactive-color="#C0C4CC"
  active-text="Вкл"
  inactive-text="Выкл"
  :width="60"
  @change="onSwitchChange">
</el-switch>

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

const status = ref(false);

function onSwitchChange(val) {
  console.log('Переключатель изменён:', val);
}
</script>

Этот пример демонстрирует комплексную настройку Switch с кастомными цветами, текстом, шириной и обработкой события изменения состояния.

Switch в Element Plus сочетает простоту использования с мощными возможностями кастомизации, интеграцией с формами и гибкой настройкой реактивных значений, что делает его универсальным инструментом для современных интерфейсов на Vue 3.

Оглавление