Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基础用法
尺寸
文字描述
使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。
显示自定义图标
TIP
使用 inactive-icon 和 active-icon 属性来添加图标。 您可以传递组件名称的字符串（提前注册）或组件本身是一个 SVG Vue 组件。 Element Plus 提供了一组图标，您可以在 icon component 查看。
扩展的 value 类型
禁用状态
加载状态
阻止切换
自定义动作图标
自定义操作图标
API
Attributes
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| model-value / v-model | 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 | boolean / string / ^[number] | false |
| disabled | 是否禁用 | boolean | false |
| loading | 是否显示加载中 | boolean | false |
| size | switch 的大小 | enum '' | 'large' | 'default' | 'small' | '' |
| active-text | switch 打开时的文字描述 | string | '' |
| inactive-text | switch 的状态为 off 时的文字描述 | string | '' |
| active-value | switch 状态为 on 时的值 | boolean / string / number | true |
| inactive-value | switch的状态为 off 时的值 | boolean / string / number | false |
| active-color | 当在 on 状态时的背景颜色(已废弃，请使用 CSS var --el-switch-on-color ) | string | '' |
| inactive-color | off 状态时的背景颜色(已废弃，使用 CSS var --el-switch-off-color ) | string | '' |
事件
| 事件名 | 说明 | Type |
|---|---|---|
| change | switch 状态发生变化时的回调函数 | Function (val: boolean | string | number) => void |