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-model | boolean | false | 开关状态 |
label | string | — | 标签文字 |
description | string | — | 描述(灰色小字) |
size | 'md' | 'lg'` | 'md' | 开关尺寸(md: 标准, lg: 大号) |
row | boolean | false | 行布局:左侧标签 + 右侧开关 |
disabled | boolean | false | 禁用 |
validation | 'valid' | 'invalid' | — | 验证状态 |
id | string | — | 原生 id |
name | string | — | 原生 name |