Switch 开关

开关选择器，支持不同类型配色、圆角/方形形状、自定义尺寸，以及滑块或轨道内图标。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-switch 的用法，可按需组合。

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

类型

设置开启状态的主题色，可选 primary、success、warning、danger、error。

<mu-switch v-model="t1" type="primary"></mu-switch>
<mu-switch v-model="t2" type="success"></mu-switch>
<mu-switch v-model="t3" type="warning"></mu-switch>
<mu-switch v-model="t4" type="danger"></mu-switch>

形状

设置开关形状，可选圆角 round 或方形 rectangle。

<mu-switch v-model="sh1" shape="round"></mu-switch>
<mu-switch v-model="sh2" shape="rectangle"></mu-switch>

尺寸

尺寸可传数字（按 rpx）或带 rpx 的字符串，整体按该基准等比缩放。

<mu-switch v-model="size1" :size="32"></mu-switch>
<mu-switch v-model="size2" :size="48"></mu-switch>
<mu-switch v-model="size3" size="64rpx"></mu-switch>

禁用

禁用后不响应点击。

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

图标位置

图标默认显示在滑块上，设置 icon-position 为 track 时显示在轨道两端。

<mu-switch v-model="ic1" active-icon="check" inactive-icon="close"></mu-switch>
<mu-switch v-model="ic2" icon-position="track" active-icon="check" inactive-icon="close"></mu-switch>

自定义图标

active-icon 与 inactive-icon 取值为图标列表中的名称。

<mu-switch v-model="ic3" active-icon="check-circle1" inactive-icon="close-circle1"></mu-switch>
<mu-switch v-model="ic4" active-icon="check-square" inactive-icon="close-square"></mu-switch>

图标加粗

控制图标是否加粗，默认为加粗。

<mu-switch v-model="bold1" active-icon="check" inactive-icon="close" :icon-bold="true"></mu-switch>
<mu-switch v-model="bold2" active-icon="check" inactive-icon="close" :icon-bold="false"></mu-switch>

切换事件

切换状态时触发 change，回调参数为新状态。

<mu-switch v-model="evt" @change="onSwitchChange"></mu-switch>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	绑定值（开关开启状态）	boolean	false
type	开启状态的主题色，可选 primary、success、warning、danger、error	string	primary
shape	形状，可选 round、rectangle	string	round
size	尺寸，数字按 rpx、也可传带 rpx 的字符串，按比例缩放整体	string | number	48
disabled	是否禁用	boolean	false
iconPosition	图标位置，可选 thumb、track	string	thumb
activeIcon	开启状态图标名	string	-
inactiveIcon	关闭状态图标名	string	-
iconBold	图标是否加粗	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
change	切换开关状态时触发	value: boolean

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 v-model 绑定布尔值，点击切换并触发 change，回调参数为新状态。
• 使用注意：size 可传数字（按 rpx）或带 rpx 的字符串，整体按该基准等比缩放。
• 使用注意：activeIcon / inactiveIcon 需配合 iconPosition 使用，thumb 显示在滑块上、track 显示在轨道两端。