Tui

0.7.2
Switch 开关
一个简洁的开关组件，支持禁用、颜色定制、双向绑定等特性，适用于功能开关场景。
基础用法
默认样式的开关，可绑定 boolean 值。支持 round 为经典圆角样式

默认样式

圆角样式

示例代码
vue
颜色配置
通过 activeColor 和 inactiveColor 自定义开关颜色

绿色主题

橙色主题

示例代码
vue
禁用状态
设置 disabled 为 true，并可自定义 disabledColor

默认禁用

自定义禁用颜色

示例代码
vue
自定义插槽
提供自定义插槽 active、inactive 来拓展功能，支持图标和文字
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
v-model
绑定值，通常为 Boolean 类型
boolean
true / false
false
activeColor
开关开启时的颜色
string
任意合法颜色值
#409eff / dark:#000
inactiveColor
开关关闭时的颜色
string
任意合法颜色值
#d9d9d9 / dark:#bfbfbf
disabledColor
开关禁用状态下的颜色
string
任意合法颜色值
#e5e3e3 / dark:#e6e8e9
disabled
是否禁用该开关
boolean
true / false
false
round
是否开启圆角
boolean
true / false
false
thumbBg
按钮的背景颜色
string
任意合法颜色值
#fff
added 0.5.9
插槽 Slots
插槽名
说明
版本说明
active
开启状态的插槽内容
inactive
关闭状态的插槽内容
基础用法
颜色配置
禁用状态
自定义插槽
属性 Props
插槽 Slots