Switch

Компонент Switch в Naive UI представляет собой переключатель состояния «включено/выключено». Он является частью набора интерактивных элементов управления и широко применяется для управления булевыми значениями в интерфейсе.

import { createApp } from 'vue'
import { NSwitch } from 'naive-ui'

const app = createApp({
  data() {
    return {
      value: false
    }
  },
  template: `<n-switch v-model:value="value" />`
})

app.mount('#app')

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

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

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

  • value / v-model:value – текущее состояние переключателя (true/false).
  • disabled – блокировка переключателя, запрещает взаимодействие с ним.
  • size – размер компонента. Возможные значения: "small", "medium", "large".
  • loading – отображение состояния загрузки; переключатель не реагирует на клики.
  • checked-value / unchecked-value – позволяют задать собственные значения для состояния true и false.

Пример использования с нестандартными значениями:

<n-switch 
  v-model:value="value" 
  :checked-value="'yes'" 
  :unchecked-value="'no'" 
/>

В данном случае при включении переключателя переменной присваивается 'yes', а при выключении – 'no'.

Визуальные настройки

  • checked-color – цвет переключателя в состоянии «включено».
  • unchecked-color – цвет переключателя в состоянии «выключено».
  • border-color – цвет границы.
  • knob-color – цвет ползунка.
  • bordered – включение/отключение отображения границы.

Пример кастомизации внешнего вида:

<n-switch 
  v-model:value="value" 
  checked-color="#4caf50" 
  unchecked-color="#f44336" 
  knob-color="#ffffff" 
/>

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

Компонент Switch поддерживает несколько событий:

  • on-update:value – вызывается при изменении состояния переключателя. Используется при управлении через v-model.
  • on-change – срабатывает при каждом изменении состояния.

Пример обработки события on-change:

<n-switch 
  v-model:value="value" 
  @change="handleChange"
/>

methods: {
  handleChange(newValue) {
    console.log('Новое состояние:', newValue)
  }
}

Событие on-change удобно использовать для выполнения побочных действий, таких как сохранение состояния на сервер или включение/выключение других элементов интерфейса.

Управление размерами и стилями

Компонент поддерживает настройку размера через свойство size. На практике часто используется комбинация с динамическими классами для подстраивания интерфейса под разные экраны:

<n-switch 
  v-model:value="value" 
  :size="isMobile ? 'small' : 'medium'" 
/>

Дополнительно можно использовать стили через CSS-переменные, которые предоставляет Naive UI:

.n-switch {
  --n-switch-checked-color: #4caf50;
  --n-switch-unchecked-color: #f44336;
}

Интеграция с формами

Switch может использоваться в составе NForm для управления полями формы. Важно корректно привязывать его к модели формы через v-model:

import { NForm, NFormItem, NSwitch, NButton } from 'naive-ui'

<template>
  <n-form :model="form">
    <n-form-item label="Активен">
      <n-switch v-model:value="form.active" />
    </n-form-item>
    <n-button @click="submit">Отправить</n-button>
  </n-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        active: false
      }
    }
  },
  methods: {
    submit() {
      console.log(this.form)
    }
  }
}
</script>

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

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

  • Переключатель реагирует на клавиши пробела и Enter, что повышает доступность.
  • Анимация переключения включена по умолчанию и может быть изменена через стили.
  • Совместимость с реактивными данными Vue позволяет динамически менять состояние и свойства, например отключать переключатель или изменять цвета в зависимости от условий приложения.
<n-switch 
  v-model:value="value" 
  :disabled="!isEditable" 
/>

Вывод

Компонент Switch в Naive UI — мощный инструмент для управления булевыми состояниями, который поддерживает полную кастомизацию внешнего вида, интеграцию с формами и реактивные события. Его простая конфигурация и гибкие свойства делают его удобным для любых приложений на Vue 3 с Naive UI.

Оглавление