Switch 开关

用法

<script setup lang="ts">
import { ref } from 'vue'

const enabled = ref(true)
</script>

<template>
  <TuffSwitch v-model="enabled" />
</template>

切换状态

点击、Enter 或 Space 切换。

尺寸

size 同时决定文案字号与间距。

禁用

加载中

等待服务端确认时设置 loading：滑块停在原值并变为旋转环，期间不可切换。

文案

label 变化时交叉淡入，labelPlacement 决定文案在前或在后。默认插槽原样渲染，不带过渡。

自定义颜色

覆盖 --tuff-switch-active-color、--tuff-switch-track-color 或 --tuff-switch-thumb-color。

设置项

状态文本放在开关外部时，用 TxTextTransformer 获得同样的文字过渡。

最佳实践

• 即时生效的布尔设置用 Switch；随表单提交的选项用 Checkbox。
• 需要服务端确认时设置 loading，成功后再写回 modelValue；失败时只撤下 loading。
• label 写控件名称（「紧凑模式」）。「已开启」这类状态文本放在外部，用 TxTextTransformer 渲染，避免被朗读两次。
• 换色只覆盖 CSS 变量，不改写 .tuff-switch__track 的样式规则。

API 参考

属性

事件

插槽

概述

• 根节点是原生 <button role="switch">，带 aria-checked。
• 受控组件：切换只派发事件，父级回写 modelValue 后外观才更新。
• disabled 与 loading 都设置原生 disabled；loading 不降低透明度，并设置 aria-busy="true"。
• 有可见文案（label 或插槽）时不渲染 aria-label。
• 减少动态效果时，加载环停止旋转。

技术实现

• 状态类 is-active、is-disabled、is-loading、has-label 挂在根节点；轨道与滑块是 .tuff-switch__track、.tuff-switch__thumb。
• 源码：packages/tuffex/packages/components/src/switch/。