4.6 开关栏（Switch Bar）

带图标的开关组件

基础用法

<template>
  <dof-switch-bar :checked="checked" @change="onChange"></dof-switch-bar>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
    }
  },
  methods: {
    onChange({ value }) {
      this.checked = value
    },
  },
}
</script>

Attributes

Prop	Type	Required	Default	Description
icon-on	String	N	内置图标	开启状态图标
icon-off	String	N	内置图标	关闭状态图标
width	String	N	"106"	宽度
height	String	N	"48"	高度
checked	Boolean	N	false	是否选中
need-dark-mode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
checked-color	String	N	''	选中背景色
unchecked-color	String	N	''	未选中背景色
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

RTL 下开关两端和横向滑动方向镜像，checked 与 change 的布尔值含义不变；纵向滑动不会切换状态。

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

Events

事件名	说明	回调参数
change	状态变化事件	{ value }