Switch 开关

用于在两种互斥状态（开启/关闭）之间进行即时切换的控制开关，常用于设置面板与选项控制。

---

代码示例

1. 基础用法 (Basic)

使用 v-model 绑定 Boolean 开关状态。

<template>
  <mu-switch v-model="enabled" />
</template>

<script setup>
import { ref } from 'vue'
const enabled = ref(true)
</script>

---

2. 带 Label 标签 (Label)

设置 label 属性直接在开关右侧显示对应的标题说明。

<template>
  <mu-switch v-model="autoUpdate" label="自动更新应用程序" />
</template>

---

3. 自定义激活与未激活背景色 (Custom Colors)

使用 active-color 与 inactive-color 分别指定开启和关闭状态下的轨道背景颜色。

<template>
  <!-- 成功绿背景 -->
  <mu-switch v-model="enabled" active-color="#10B981" />

  <!-- 警告黄背景 -->
  <mu-switch v-model="enabled" active-color="#F59E0B" />
</template>

---

4. 禁用状态 (Disabled)

设置 disabled 禁止用户更改开关状态。

<template>
  <mu-switch :model-value="true" disabled />
  <mu-switch :model-value="false" disabled />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model	当前开关状态	Boolean	true | false	false
label	开关右侧描述标签文本	String	-	''
activeColor	开启状态下的轨道背景颜色	String	-	''
inactiveColor	关闭状态下的轨道背景颜色	String	-	''
disabled	是否禁用点击交互	Boolean	true | false	false

---

事件说明 (Events)

事件名	说明	回调参数
change	开关状态发生改变时触发	(value: Boolean)
update:modelValue	双向绑定更改变	(value: Boolean)