Switch 开关

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

基础用法

绑定 v-model 到一个 Boolean 类型的变量。

<template>
    <kl-switch v-model="value1"></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<style lang="scss" scoped>
* {
    margin-left: 5px;
}
</style>

颜色设置

可以使用 active-color 属性与 inactive-color 属性来设置开关的背景色。

CloseOpen

<template>
    <kl-switch v-model="value2" activeText="Open" inactiveText="Close"></kl-switch>
    <kl-switch
        v-model="value1"
        active-color="red"
        inactive-color="blue"
        active-text="Open"
        inactive-text="Close"
    ></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

尺寸

使用 size 属性改变开关大小。除了默认大小外，还有另外两个选项： large, small。

CloseOpen

<template>
    <kl-switch v-model="value" size="large" active-text="Open" inactive-text="Close"></kl-switch>
    <kl-switch v-model="value" size="default" active-text="Open" inactive-text="Close"></kl-switch>
    <kl-switch v-model="value" size="small" active-text="Open" inactive-text="Close"></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(true)
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

禁用状态

添加disabled属性，可设置为禁用状态的开关。

CloseOpen

<template>
    <kl-switch v-model="value1" active-text="Open" inactive-text="Close"></kl-switch>
    <kl-switch v-model="value2" disabled active-text="Open" inactive-text="Close"></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

文字描述

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

The UnforgottenYasuo

<template>
    <kl-switch v-model="value1"></kl-switch>
    <kl-switch v-model="value2" activeText="Yasuo" inactiveText="The Unforgotten"></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

绑定数据类型

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

value:

The UnforgottenYasuo

value:

999111

<template>
    <h3>value:{{ value }}</h3>
    <kl-switch
        v-model="value"
        activeText="Yasuo"
        inactiveText="The Unforgotten"
        activeValue="Yasuo"
        inactiveValue="The Unforgotten"
    ></kl-switch>
    <hr />
    <h3>value:{{ value1 }}</h3>
    <kl-switch
        v-model="value1"
        activeText="111"
        inactiveText="999"
        activeValue="111"
        inactiveValue="999"
    ></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const value1 = ref()
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

显示自定义图标

使用 inactive-icon 和 active-icon 属性来添加图标。使用 inline-prompt 属性来控制图标显示在点内。

<template>
    <kl-switch v-model="value1"></kl-switch>
    <kl-switch v-model="value2" activeIcon="KlOtherCorrect" inactiveIcon="KlOtherError"></kl-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<style lang="scss" scoped>
* {
    display: block;
}
</style>

API

属性

属性名	说明	类型	默认值
v-model	绑定值	boolean	—
disabled	是否禁用	boolean	fales
active-value	switch 状态为 on 时的值	boolean / string / number	true
inactive-value	switch 的状态为 off 时的值	boolean / string / number	false
active-icon	switch 状态为 on 时所显示图标，结合 Icon 使用	string	—
inactive-icon	switch 状态为 off 时所显示图标，结合 Icon 使用	string	—
active-text	switch 打开时的文字描述	string	—
inactive-text	switch 关闭时的文字描述	string	—
active-color	当在 on 状态时的背景颜色	string	—
inactive-color	off 状态时的背景颜色	string	—
name	等价于原生 input name 属性	string	—

事件

事件名	说明	回调参数
change	仅当 modelValue 改变时触发	val

Switch 开关 #

基础用法 #

颜色设置 #

尺寸 #

禁用状态 #

文字描述 #

绑定数据类型 #

value:

value:

显示自定义图标 #

API #

属性 #

事件 #

Switch 开关

基础用法

颜色设置

尺寸

禁用状态

文字描述

绑定数据类型

显示自定义图标

API

属性

事件