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

表示两种相互对立状态的切换控件，支持自定义开 / 关时的取值与文案，以及异步加载态。在 eb-form 中 change 时机自动触发校验。

## 基础用法

v-model 绑定布尔值（与 active-value / inactive-value 比较判定状态）；disabled 禁用切换，loading 呈加载中并同样阻止切换。静态回显用 :model-value 绑定即可。

基础用法之上，还有两种改变默认行为的方式：改变取值语义与异步受控，见下方示例。

## 文案与尺寸

`active-text / inactive-text` 自定义两侧文案（建议配合 `width` 加宽开关）；`inline-prompt` 时文案内嵌同时呈现；`size` 切换 small / large 尺寸。

## 自定义取值

active-value / inactive-value 让开 / 关写入自定义值（字符串、数字等）：绑定值与 active-value 相等即为开态，适合后端字段语义不是 boolean 的场景（如下例 yes / no 与 1 / 0）。

## 异步切换

等待服务端确认再翻转的受控写法：用 `:model-value` 受控 + change 回调里先置 loading（阻止重复切换），请求成功后再把新值写入绑定值。loading 期间开关不可操作。

handleAsyncChange 定义见页面顶部 script：模拟 800ms 请求后提交新值，实际项目中替换为接口调用即可。

## 组合场景：控制配置项可用性

开关驱动其它控件的可用性是后台表单的高频组合：关闭后关联输入框联动禁用，直观表达该配置未启用。

## API