TuSwitch 开关

自绘轨道 + 滑块,不依赖原生 switch,change 事件回传切换后的布尔值。

自绘轨道 + 滑块,不依赖端上原生 switch 组件,同一份源码在 Web(div)与小程序(view)渲染一致。完全受控:点击后通过 change 事件回传目标布尔值(!checked)。

属性
名称类型说明
checkedboolean是否选中(受控),默认 false。
disabledboolean禁用:不响应点击,半透明。
activeColorstring选中态轨道颜色,默认 var(--tu-primary)。
sizesmall | medium尺寸,默认 medium。

事件:change,回传切换后的布尔值(!checked)。

当前已开启 —— 完全受控:点击触发 change 事件,由父级维护 checked。

实例

ts
createComponent({
  component: TuSwitch,
  props: { checked: this.state.enabled, size: 'medium' },
  emitters: { change: (checked: boolean) => (this.state.enabled = checked) },
})