Skip to content

Switch 开关

开关组件。基于 Tabler form-switch,支持三种尺寸、描述文字。

基础用法

vue
<TSwitch v-model="val" label="Wi-Fi" />

两种尺寸

vue
<TSwitch v-model="val" label="标准" />
<TSwitch v-model="val" label="大号" size="lg" />

描述文字

vue
<TSwitch v-model="val" label="蓝牙" description="已连接 2 台设备" />

禁用状态

vue
<TSwitch v-model="val" label="已禁用" disabled />

行布局(设置项样式)

row 属性将标签放在左侧、开关在右侧,适合表单设置页面。

vue
<TSwitch v-model="val" row label="Push Notifications" />
<TSwitch v-model="val" row label="邮件通知" description="每日摘要" />

纯开关(无标签)

不传 label / description / 插槽时自动应用 form-check-single 紧凑模式。

vue
<TSwitch v-model="val" />
<TSwitch v-model="val" size="sm" />

API

Props

参数类型默认值说明
v-modelbooleanfalse开关状态
labelstring标签文字
descriptionstring描述(灰色小字)
size'md' | 'lg'`'md'开关尺寸(md: 标准, lg: 大号)
rowbooleanfalse行布局:左侧标签 + 右侧开关
disabledbooleanfalse禁用
validation'valid' | 'invalid'验证状态
idstring原生 id
namestring原生 name