Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

基础用法

尺寸

文字描述

使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。

显示自定义图标

TIP

使用 inactive-iconactive-icon 属性来添加图标。 您可以传递组件名称的字符串(提前注册)或组件本身是一个 SVG Vue 组件。 Element Plus 提供了一组图标,您可以在 icon component 查看。

扩展的 value 类型

禁用状态

加载状态

阻止切换

属性

属性说明类型可选值默认值
model-value / v-model绑定值,必须等于 active-valueinactive-value,默认为 Boolean 类型boolean / string / number
disabled是否禁用booleanfalse
loading是否显示加载中booleanfalse
sizeswitch 的大小stringlarge / default / smalldefault
widthswitch 的宽度number / string
inline-prompt无论图标或文本是否显示在点内,只会呈现文本的第一个字符booleanfalse
active-iconswitch 状态为 on 时所显示图标,设置此项会忽略 active-textstring / Component
inactive-iconswitch 状态为 off 时所显示图标,设置此项会忽略 inactive-textactive-icon
active-textswitch 打开时的文字描述string
inactive-textswitch 的状态为 off 时的文字描述string
active-valueswitch 状态为 on 时的值boolean / string / numbertrue
inactive-valueswitch的状态为 off 时的值boolean / string / numberfalse
active-color当在 on 状态时的背景颜色(已废弃,请使用 CSS var --el-switch-on-color )string
inactive-coloroff 状态时的背景颜色(已废弃,使用 CSS var --el-switch-of-color )string
border-color开关的边框颜色 ( 已废弃,使用 CSS var --el-switch-border-color )string
nameswitch 对应的 name 属性string
validate-event改变 switch 状态时是否触发表单的校验booleantrue
before-changeswitch 状态改变前的钩子, 返回 false 或者返回 Promise 且被 reject 则停止切换() => Promise<boolean> | boolean

事件

事件名说明回调参数
changeswitch 状态发生变化时的回调函数val,新状态的值

方法

方法说明参数
focus使 Switch 获取焦点

源代码

组件文档

贡献者