---
url: /components/switch.md
---
# Switch 开关

`EvSwitch` 表达二元状态（开/关），用于设置项、演示面板与筛选条件。滑块带平滑位移动效，
开启态着主色；提供三种尺寸与禁用态。不绑定 `v-model` 时组件自持状态（`default-value` 定初值），
复制标签即可交互。

## 基础用法

```vue
<script setup>
import { ref } from 'vue'
const sync = ref(true)
</script>

<template>
  <label style="display:inline-flex; align-items:center; gap:8px;">
    <EvSwitch v-model="sync" @change="onChange" /> 自动同步
  </label>
</template>
```

## 尺寸与禁用

```vue
<EvSwitch size="small" :default-value="true" />
<EvSwitch v-model="a" />
<EvSwitch size="large" v-model="b" />
<EvSwitch disabled v-model="c" />
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 状态 | boolean | `false` |
| default-value | 非受控模式的初始状态（未绑定 v-model 时生效） | boolean | `false` |
| disabled | 禁用 | boolean | `false` |
| size | 尺寸 | `'small' \| 'default' \| 'large'` | `'default'` |

### 事件

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| update:modelValue | 切换时派发 | boolean |
| change | 切换时派发 | boolean |