Switch 开关

使用

import { KSwitch } from "@ksware/ksw-ux";

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

基础用法

绑定 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

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`	`-`

Events

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

Slots

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

Methods

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

Switch 开关 ​

基础用法 ​

on/off 自定义样式 ​

尺寸 ​

文字描述 ​

显示自定义图标 ​

扩展的 value 类型 ​

禁用状态 ​

加载状态 ​

阻止切换 ​

API ​

Props ​

Events ​

Slots ​

Methods ​