Switch 开关

用于在两种对立状态之间进行切换。

基础用法

尺寸

文字描述

您可以添加 active-text 和 inactive-text 属性来显示文本。使用 inline-prompt 属性来控制文本是否显示在圆点内。

显示自定义图标

提示

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

扩展的值类型

禁用状态

加载状态

阻止切换

自定义操作图标 2.3.9

自定义操作插槽 2.4.4

API

属性

名称	描述	类型	默认值
model-value / v-model	绑定值，该值应等于 `active-value` 或 `inactive-value`，默认为 `boolean` 类型	`boolean` / `string` / `number`	false
disabled	开关是否被禁用	`boolean`	false
加载中	开关是否处于加载状态	`boolean`	false
size	开关的尺寸	`枚举`	''
width	开关的宽度	`number` / `string`	''
内联提示	图标或文本是否显示在圆点内，文本只渲染第一个字符	`boolean`	false
活动状态图标	在`开启`状态下显示的图标组件，会覆盖 `active-text`	`string` / `Component`	—
非活动状态图标	在`关闭`状态下显示的图标组件，会覆盖 `inactive-text`	`string` / `Component`	—
活动状态操作图标 2.3.9	在`开启`状态下显示在操作中的图标组件	`string` / `Component`	—
非活动状态操作图标 2.3.9	在`关闭`状态下显示在操作中的图标组件	`string` / `Component`	—
活动状态文本	在`开启`状态下显示的文本	`string`	''
非活动状态文本	在`关闭`状态下显示的文本	`string`	''
活动状态值	在`开启`状态下的开关值	`boolean` / `string` / `number`	true
非活动状态值	在`关闭`状态下的开关值	`boolean` / `string` / `number`	false
名称	开关的输入框名称	`string`	''
validate-event	是否触发表单验证	`boolean`	true
切换前	在开关状态改变前的钩子函数。如果返回 `false` 或者一个被拒绝的 `Promise`，将停止切换	`Function`	—
id	输入框的 id	`string`	—
tabindex	输入框的 tabindex	`string` / `number`	—
aria-label a11y 2.7.2	与原生输入框的 `aria-label` 相同	`string`	—
活动状态颜色已弃用	`开启`状态下的背景色（请改用 CSS 变量 `--el-switch-on-color`）	`string`	''
非活动状态颜色已弃用	`关闭`状态下的背景色（请改用 CSS 变量 `--el-switch-off-color`）	`string`	''
边框颜色已弃用	开关的边框颜色（请改用 CSS 变量 `--el-switch-border-color`）	`string`	''
label a11y 已废弃	与原生输入框的 `aria-label` 相同	`string`	—