Switch 开关

使用

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

基础用法

绑定 v-model 到一个 Boolean 类型的变量。 可以使用 --el-switch-on-color 属性与 --el-switch-off-color 属性来设置开关的背景色。

on/off 自定义样式

通过activeColor和inactiveColor属性设置开关的背景色。

尺寸

文字描述

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

使用active-text属性与inactive-text属性来设置开关的文字描述。

显示自定义图标

TIP

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

:::demo You can add active-icon and inactive-icon attribute to show icons. use inline-prompt attribute to control icon is displayed inside dot.

扩展的 value 类型

你可以设置 active-value 和 inactive-value 属性， 它们接受 Boolean、String 或 Number 类型的值。

禁用状态

设置disabled属性，接受一个Boolean，设置true即可禁用。

加载状态

设置loading属性，接受一个Boolean，设置true即加载中状态。

阻止切换

设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换

API

Switch Props

参数名	描述	类型	默认值
model-value / v-model	筛选配置项，包含字段、标题、数据类型、等信息，目前支持的类型有：string、number、date，默认为string	绑定值，必须等于 active-value或inactive-value，默认为Boolean类型	false
disabled	是否禁用	boolean	false
loading	是否显示加载中	boolean	false
size	switch尺寸	enum	base
width	switch宽度	string | number	''
size	尺寸	enum	base
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-color	on状态下显示的图标组件	string	-
inactive-color	off状态下显示的图标组件	string	-
active-text	switch状态为on时所显示的文字	string	''
inactive-text	switch状态为off时所显示的文字	string	''
active-value	switch状态为on时所绑定的值	string | number | boolean	true
inactive-value	switch状态为off时所绑定的值	string | number | boolean	false
before-change	switch 状态改变前的钩子，返回false或者返回Promise且被reject则停止切换	boolean | Function	-

Switch Events

事件名	描述	类型
change	switch状态发生变化时的回调函数	Function

Switch Methods

方法名	描述	类型
focus	使switch获得焦点	Function

Switch Slots

插槽名	描述	参数
active-action	自定义active行为	-
inactive-action	自定义inactive行为	-