Switch 开关

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

基础用法

尺寸

文字描述

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

显示自定义图标

TIP

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

扩展的 value 类型

禁用状态

加载状态

阻止切换

自定义动作图标 2.3.9

自定义操作图标 2.4.4

API

Attributes

属性名说明类型Default
model-value / v-model绑定值,必须等于 active-valueinactive-value,默认为 Boolean 类型boolean / string / numberfalse
disabled是否禁用booleanfalse
loading是否显示加载中booleanfalse
sizeswitch 的大小enum''
widthswitch 的宽度number / string''
inline-prompt无论图标或文本是否显示在点内,只会呈现文本的第一个字符booleanfalse
active-iconswitch 状态为 on 时所显示图标,设置此项会忽略 active-textstring / Component
inactive-iconswitch 状态为 off 时所显示图标,设置此项会忽略 inactive-textstring / Component
active-action-icon 2.3.9on状态下显示的图标组件string / Component
inactive-action-icon 2.3.9off状态下显示的图标组件string / Component
active-textswitch 打开时的文字描述string''
inactive-textswitch 的状态为 off 时的文字描述string''
active-valueswitch 状态为 on 时的值boolean / string / numbertrue
inactive-valueswitch的状态为 off 时的值boolean / string / numberfalse
active-color deprecated当在 on 状态时的背景颜色(已废弃,请使用 CSS var --el-switch-on-color )string''
inactive-color deprecatedoff 状态时的背景颜色(已废弃,使用 CSS var --el-switch-off-color )string''
border-color deprecated开关的边框颜色 ( 已废弃,使用 CSS var --el-switch-border-color )string''
nameswitch 对应的 name 属性string''
validate-event是否触发表单验证booleantrue
before-changeswitch 状态改变前的钩子, 返回 false 或者返回 Promise 且被 reject 则停止切换boolean / Function
idinput 的 idstring
tabindexinput 的 tabindexstring / number
label 2.4.1 a11y等价于原生 input aria-label 属性string

事件

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

Switch Slots

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

Exposes

方法详情Type
focus手动 focus 到 switch 组件Function

源代码

组件文档

贡献者