Switch 开关

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

基础用法

尺寸

文字描述

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

显示自定义图标

TIP

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

扩展的 value 类型

禁用状态

加载状态

阻止切换

属性

属性名	说明	类型	可选值	默认值
model-value / v-model	绑定值，必须等于 `active-value` 或 `inactive-value`，默认为 `Boolean` 类型	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
loading	是否显示加载中	boolean	—	false
size	switch 的大小	string	large / default / small	default
width	switch 的宽度	number / string	—	—
inline-prompt	无论图标或文本是否显示在点内，只会呈现文本的第一个字符	boolean	—	false
active-icon	switch 状态为 `on` 时所显示图标，设置此项会忽略 `active-text`	`string \| Component`	—	—
inactive-icon	switch 状态为 `off` 时所显示图标，设置此项会忽略 `inactive-text`	`string \| Component`	—	—
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-of-color` )	string	—	—
border-color	开关的边框颜色 ( 已废弃，使用 CSS var `--el-switch-border-color` )	string	—	—
name	switch 对应的 name 属性	string	—	—
validate-event	改变 switch 状态时是否触发表单的校验	boolean	—	true
before-change	switch 状态改变前的钩子，返回 `false` 或者返回 `Promise` 且被 reject 则停止切换	`() => Promise<boolean> \| boolean`	—	—

事件

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

方法

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

源代码

组件 • 文档

贡献者

Time Picker 时间选择器