Switch 开关

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

基础用法

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

<script setup>
import { ref } from "vue";
import KSwitch from "@/components/Switch/Switch.vue";
const test = ref(false);
</script>
<template>
  <KSwitch v-model="test" />
</template>

禁用状态

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

正常：

禁用：

<script setup>
import { ref } from "vue";
import KSwitch from "@/components/Switch/Switch.vue";
const test = ref(false);
const test2 = ref(false);
</script>
<template>
  <div>
    <div class="flex items-center">
      <div class="title">正常：</div>
      <KSwitch v-model="test" />
    </div>
    <div class="flex items-center">
      <div class="title">禁用：</div>
      <KSwitch v-model="test2" disabled />
    </div>
  </div>
</template>
<style scoped>
.title {
  line-height: 31px;
}
</style>

不同尺寸

设置 size 属性，接受 large / small，呈现不同的尺寸。

<script setup>
import { ref } from "vue";
import KSwitch from "@/components/Switch/Switch.vue";
const test = ref(false);
</script>
<template>
  <div class="switch-size-container">
    <KSwitch v-model="test" size="large" />
    <KSwitch v-model="test" />
    <KSwitch v-model="test" size="small" />
  </div>
</template>
<style scoped></style>

支持自定义 value 类型

你可以设置 active-value 和 inactive-value 属性， 它们接受 boolean | string | number 类型的值。

model-value: right

<script setup>
import { ref } from "vue";
import KSwitch from "@/components/Switch/Switch.vue";
const test = ref("right");
</script>
<template>
  <KSwitch v-model="test" activeValue="right" inactiveValue="wrong" />
  <h4>model-value: {{ test }}</h4>
</template>

文字描述

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

OFF

ON

<script setup>
import { ref } from "vue";
import KSwitch from "@/components/Switch/Switch.vue";
const test = ref(false);
</script>
<template>
  <KSwitch v-model="test" activeText="ON" inactiveText="OFF" />
</template>

API

属性

Name	Description	Type	Default
model-value / v-model	绑定值	'string' | 'boolean' | 'number'	false
disabled	是否禁用	boolean	false
active-text	switch 打开时的文字描述	string
inactive-text	switch 的状态为 off 时的文字描述	'large' | 'small'
active-value	switch 状态为 on 时的值	'string' | 'boolean' | 'number'	true
inactive-value	switch 状态为 off 时的值	'string' | 'boolean' | 'number'	false
name	switch 对应的 name 属性	string
id	input 的 id	string

事件

Name	Description	Type
change	switch 状态发生变化时的回调函数	(e: 'string' | 'boolean' | 'number' ) => void