Switch 开关

规则

基础示例

Props 配置示例

带文字描述

带图标

加载中（切换时模拟）

尺寸对比（小 / 默认 / 大）

自定义宽度

整框禁用

Events 事件示例

监听开关变化

切换前确认

联动更新其他字段

完整配置项:Element_Switch

value :Number | String

Props

属性名	说明	类型	Default
disabled	是否禁用	boolean	false
loading	是否显示加载中	boolean	false
size	switch 的大小	enum	''
width	switch 的宽度	number / string	''
inlinePrompt	无论图标或文本是否显示在点内，只会呈现文本的第一个字符	boolean	false
activeIcon	switch 状态为 on 时所显示图标，设置此项会忽略 active-text	string / Component	—
inactiveIcon	switch 状态为 off 时所显示图标，设置此项会忽略 inactive-text	string / Component	—
activeActionIcon	on状态下显示的图标组件	string / Component	—
inactiveActionIcon	off状态下显示的图标组件	string / Component	—
activeText	switch 打开时的文字描述	string	''
inactiveText	switch 的状态为 off 时的文字描述	string	''
activeValue	switch 状态为 on 时的值	boolean / string / number	true
inactiveValue	switch的状态为 off 时的值	boolean / string / number	false
name	switch 对应的 name 属性	string	''
validateEvent	是否触发表单验证	boolean	true
beforeChange	switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换	Function	—
id	input 的 id	string	—
tabindex	input 的 tabindex	string / number	—
ariaLabel	等价于原生 input aria-label 属性	string	—
activeColor	当在 on 状态时的背景颜色(推荐使用 CSS var --el-switch-on-color )	string	''
inactiveColor	off 状态时的背景颜色(推荐使用 CSS var --el-switch-off-color )	string	''
borderColor	开关的边框颜色 ( 推荐使用 CSS var --el-switch-border-color )	string	''
label	等价于原生 input aria-label 属性	string	—

Events

事件名	说明	Type
change	switch 状态发生变化时的回调函数	Function

Slots

名称	说明
active-action	自定义 active 行为
inactive-action	自定义 inactive 行为