Switch 开关

表示两种相互对立的状态间的切换。

基础用法

true

<my-switch v-model="value" />

默认选中

设置 modelValue 初始值为 true。

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

受控模式

完全受控的 modelValue。

<my-switch v-model="value" />
<my-button @click="value = !value">切换</my-button>

禁用状态

<my-switch v-model="value" disabled />

加载状态

<my-switch v-model="value" loading />

尺寸

<my-switch v-model="value" size="large" />
<my-switch v-model="value" />  <!-- default -->
<my-switch v-model="value" size="small" />

带标签

使用 label 属性和 label-position 控制标签位置。

消息通知

消息通知

<!-- 右侧标签（默认） -->
<my-switch v-model="value" label="消息通知" />
<!-- 左侧标签 -->
<my-switch v-model="value" label="消息通知" label-position="left" />

带描述

使用 description 属性添加辅助说明。

WiFi开启后自动连接已知网络

蓝牙与其他设备共享文件

<my-switch v-model="value" label="WiFi" description="开启后自动连接已知网络" />

带图标

通过 #checked-icon 和 #unchecked-icon 插槽在滑块内显示图标。

暗色模式

<my-switch v-model="value" size="large">
  <template #checked-icon>  <sun-icon />   </template>
  <template #unchecked-icon><moon-icon /> </template>
</my-switch>

自定义颜色

自定义色

<my-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />

无标签

完全不传 label 即为纯开关。

<my-switch v-model="value" />

开关组 — 横向排列

通过 my-switch-group + options 快速生成开关组。

苹果水果之王

橘子暂时缺货

香蕉富含钾元素

葡萄酿酒的原料

已选: apple, orange

<my-switch-group v-model="value" :options="options" direction="horizontal" />

开关组 — 纵向排列

苹果水果之王

橘子暂时缺货

香蕉富含钾元素

葡萄酿酒的原料

已选: apple

<my-switch-group v-model="value" :options="options" direction="vertical" />

组件结构

外层包裹 <div class="my-switch-wrapper"> 按 label-position 顺序排列 label 和开关本体。开关本体 .my-switch 内含：隐藏的原生 <input>、loading 图标 __loading、滑块核心 __core（内有开关图标 __icon）、状态文字 __text。my-switch-group 用于批量管理多个开关。

CSS 类名

类名	说明
.my-switch-wrapper	外层包裹容器
.is-large	大尺寸
.is-small	小尺寸
.has-label	有标签
.my-switch__label-wrap	标签包裹容器
.my-switch__label	标签文字
.my-switch__desc	描述文字
.my-switch	开关本体
.is-checked	选中状态
.is-disabled	禁用状态
.is-loading	加载状态
.my-switch__original	隐藏的原生 input
.my-switch__core	滑块核心（圆形拖拽块）
.my-switch__icon	滑块内图标
.my-switch__loading	加载图标容器
.my-switch__loading-icon	加载旋转图标
.my-switch__text	状态文字（激活/关闭）
.my-switch-group	开关组容器
.is-vertical	纵向排列
.is-horizontal	横向排列

API

Switch

属性	说明	类型	默认值
modelValue	绑定值	boolean | string | number	false
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
label	标签文字	string	—
description	辅助描述	string	—
labelPosition	标签位置	'left' | 'right'	'right'
size	尺寸	'large' | 'default' | 'small'	'default'
activeText	激活时文字	string	—
inactiveText	关闭时文字	string	—
activeValue	激活时值	boolean | string | number	true
inactiveValue	关闭时值	boolean | string | number	false
activeColor	激活时颜色	string	—
inactiveColor	关闭时颜色	string	—
name	原生 name 属性	string	—

事件	说明
update:modelValue	值变更
change	选中值变更

插槽	说明
default	标签文字
label	自定义标签内容
checked-icon	激活时滑块内图标
unchecked-icon	关闭时滑块内图标

SwitchGroup

属性	说明	类型	默认值
modelValue	绑定值（已选值的数组）	(string | number | boolean)[]	[]
options	选项列表	SwitchOption[]	[]
direction	排列方向	'horizontal' | 'vertical'	'vertical'
disabled	整组禁用	boolean	false
size	尺寸	'large' | 'default' | 'small'	'default'
labelPosition	标签位置	'left' | 'right'	'right'

interface SwitchOption {
  label: string
  value: string | number | boolean
  disabled?: boolean
  description?: string
}

事件	说明
update:modelValue	值变更
change	选中值变更

插槽	说明
default	放置 my-switch 子组件