Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
ts
import { createApp } from 'vue'
import { ElSwitch } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElSwitch)基础用法
尺寸
文字描述
使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。
显示自定义图标
提示
TIP 使用 inactive-icon 和 active-icon 属性来添加图标。 您可以传递组件名称的字符串（提前注册）或组件本身是一个 SVG Vue 组件。 dh-design-pc 提供了一套图标，你可以在 icon 找到它们。
扩展的 value 类型
禁用状态
加载状态
阻止切换
自定义动作图标
自定义操作图标
API
Attributes
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| model-value / v-model | 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 | boolean / string / number | false |
| disabled | 是否禁用 | boolean | false |
| loading | 是否显示加载中 | boolean | false |
| size | switch 的大小 | enum | '' |
| 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-action-icon | on状态下显示的图标组件 | string / Component | — |
| inactive-action-icon | off状态下显示的图标组件 | 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 |
| name | switch 对应的 name 属性 | string | '' |
| validate-event | 是否触发表单验证 | boolean | true |
| before-change | switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换 | Function | — |
| id | input 的 id | string | — |
| tabindex | input 的 tabindex | string / number | — |
| aria-label a11y | 等价于原生 input aria-label 属性 | string | — |
| active-color deprecated | 当在 on 状态时的背景颜色(推荐使用 CSS var --el-switch-on-color ) | string | '' |
| inactive-color deprecated | off 状态时的背景颜色(推荐使用 CSS var --el-switch-off-color ) | string | '' |
| border-color deprecated | 开关的边框颜色 ( 推荐使用 CSS var --el-switch-border-color ) | string | '' |
| label a11y deprecated | 等价于原生 input aria-label 属性 | string | — |
事件
| 事件名 | 说明 | Type |
|---|---|---|
| change | switch 状态发生变化时的回调函数 | Function |
Switch Slots
| 名称 | 说明 |
|---|---|
| active-action | 自定义 active 行为 |
| inactive-action | 自定义 inactive 行为 |
| active | 自定义 on 状态的内容 |
| inactive | 自定义 off 状态的内容 |
Exposes
| 方法 | 详情 | Type |
|---|---|---|
| focus | 手动 focus 到 switch 组件 | Function |