Switch

开关组件,基于 reka-ui SwitchRoot 封装。

基本用法

受控 v-model

已关闭

<script setup lang="ts">
import { Switch } from '@tripo3d/design';
import { ref } from 'vue';

const enabled = ref(false);
</script>

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

非受控

defaultValue

仅需初始状态时,使用 defaultValue。

<Switch :default-value="true" />

禁用

disabled

<Switch disabled />
<Switch :model-value="true" disabled />

API

Props

名称	类型	默认值	说明
modelValue	boolean	—	受控开关状态,可使用 v-model
defaultValue	boolean	—	非受控初始状态
disabled	boolean	—	禁用
name	string	—	表单字段名
value	string	'on'	表单提交值
class	string	—	额外 class

其余 props 透传至 reka-ui SwitchRoot,详见 reka-ui 文档。

Events

事件	Payload	说明
update:modelValue	(value: boolean)	开关状态变化

可访问性

• 基于 reka-ui SwitchRoot,自动设置 role="switch" 与 aria-checked
• 支持键盘 Space 切换状态
• 表单场景请搭配 <Label :for="id"> 或为 Switch 设置 aria-label