Switch 开关
二态切换控件,thumb 在 spring 曲线下滑动,按下时轻微拉伸,模拟物理质感。
基础用法
vue
<ASwitch v-model="value" />尺寸
vue
<ASwitch v-model="value" size="sm" />
<ASwitch v-model="value" size="md" />加载态 / 禁用
vue
<ASwitch v-model="value" loading />
<ASwitch v-model="value" disabled />API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | boolean | false | 开关状态 |
size | 'sm' | 'md' | 'md' | 尺寸 |
disabled | boolean | false | 禁用 |
loading | boolean | false | 加载中,显示 spinner |
Emits
| 名称 | 参数 | 说明 |
|---|---|---|
update:modelValue | boolean | 状态切换 |
无障碍
- 使用原生
<button role="switch">实现,aria-checked反映状态 - 支持 Space / Enter 键切换
- 焦点环遵循全局
:focus-visible样式