Switch 开关

在两个互斥状态之间切换。语义上等同于原生复选框，但视觉上表达「开 / 关」。

基础用法

<script setup>
import { ref } from 'vue'
const value = ref(false)
</script>

<template>
  <SrSwitch v-model="value" />
</template>

何时用 Switch、何时用 Checkbox

两者在 HTML 语义上都是「勾选」，选择依据是文案形态：

	文案形态	例子
SrSwitch	「开 / 关」式，切换立即生效	开启通知、夜间模式
SrCheckbox	「选中 / 未选中」式，通常需提交后生效	同意条款、批量选择

判断方法：如果文案是「启用某项功能」且切换会马上起作用，用 Switch； 如果是「在一组里挑几个」，用 Checkbox。

切换立即生效

带文字

activeText / inactiveText 在轨道内显示文字。

<SrSwitch v-model="value" active-text="开" inactive-text="关" />

轨道内的文字很窄

两三个字以内才放得下。文字更长时建议把说明放在开关外面—— 塞进轨道会让控件横向撑开，与旁边的表单项对不齐。

加载与禁用

加载中同样不可点击，避免重复触发。禁用时保持视觉可见但不响应， 比直接隐藏更好——用户至少知道这里有个开关。

<SrSwitch v-model="value" loading />
<SrSwitch v-model="value" disabled />

尺寸

<SrSwitch size="sm" />
<SrSwitch size="md" />

Props

名称	类型	默认值	说明
modelValue	boolean	false	当前值
size	'sm' | 'md'	'md'	尺寸
disabled	boolean	false	是否禁用
loading	boolean	false	是否加载中（同样不可点击）
activeText	string	—	开启态文字
inactiveText	string	—	关闭态文字

事件

事件	参数	说明
update:modelValue	boolean	值变化
change	boolean	值变化（语义化事件）

无障碍

• 使用 role="switch" 而非 role="checkbox"：读屏软件会播报「开关」并说明当前 是「开」还是「关」，比「复选框，已选中」更贴合这里的语义
• 通过 aria-checked 暴露状态，不是靠视觉位置暗示
• 支持键盘聚焦与空格键切换——这是 role="switch" 的标准交互， 自己拼 div 时最容易漏掉