Switch 开关

表示两种相互对立状态的切换，常用于开关某项功能。

基础用法

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

开启关闭

<template>
  <ZcSwitch v-model="value1" />
  <ZcSwitch v-model="value2" activeText="开启" inactiveText="关闭" />
</template>

尺寸

通过 size 属性调整开关尺寸。

<template>
  <ZcSwitch v-model="value1" size="large" />
  <ZcSwitch v-model="value2" size="medium" />
  <ZcSwitch v-model="value3" size="small" />
</template>

自定义颜色

通过 activeColor 和 inactiveColor 属性自定义开关颜色。

<template>
  <ZcSwitch v-model="value1" activeColor="#67c23a" inactiveColor="#e4e7ed" />
  <ZcSwitch v-model="value2" activeColor="#f56c6c" inactiveColor="#e4e7ed" />
</template>

禁用与加载状态

通过 disabled 和 loading 属性控制开关交互。

<template>
  <ZcSwitch v-model="value1" disabled />
  <ZcSwitch v-model="value2" loading />
</template>

Switch API

Props

参数	说明	类型	默认值
modelValue	绑定值	boolean	false
disabled	是否禁用	boolean	false
loading	是否显示加载状态	boolean	false
size	开关尺寸	large | medium | small	medium
activeText	打开时的文字描述	string	—
inactiveText	关闭时的文字描述	string	—
activeColor	打开时的自定义颜色	string	—
inactiveColor	关闭时的自定义颜色	string	—
width	开关宽度（像素）	number	40

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	(value: boolean)
change	值变更时触发	(value: boolean)

Slots

插槽名	说明
active	打开状态的自定义内容，替代 activeText
inactive	关闭状态的自定义内容，替代 inactiveText