V3 Element

Appearance

On this page

Switch 开关 ​

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

基础用法 ​

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

<template>
  <vk-switch v-model="test" />
</template>

<script setup>
import { ref } from 'vue';

const test = ref(false);
</script>

禁用状态 ​

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

正常：

禁用： 
<template>
  正常：
  <vk-switch v-model="test" />
  <br />
  禁用：
  <vk-switch v-model="test2" disabled />
</template>

<script setup>
import { ref } from 'vue';

const test = ref(false);
const test2 = ref(false);
</script>

不同尺寸 ​

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

<template>
  <div class="switch-size-container">
    <vk-switch v-model="test" size="large" />
    <vk-switch v-model="test" />
    <vk-switch v-model="test" size="small" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const test = ref(false);
</script>

<style scoped>
.switch-size-container {
  display: flex;
  align-items: center;

  .vk-switch {
    margin-right: 10px;
  }
}
</style>

支持自定义 value 类型 ​

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

model-value: right

<template>
  <vk-switch v-model="test" activeValue="right" inactiveValue="wrong" />
  <h4>model-value: {{ test }}</h4>
</template>

<script setup>
import { ref } from 'vue';

const test = ref('right');
</script>

文字描述 ​

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

OFF
<template>
  <vk-switch v-model="test" activeText="ON" inactiveText="OFF" />
</template>
<script setup>
import { ref } from 'vue';

const test = ref(false);
</script>

API ​

属性 ​

属性名说明类型默认值
model-value / v-model绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型boolean | string | numberfalse
sizeswitch 的大小large | small-
disabled是否禁用booleanfalse
active-valueswitch 状态为 on 时的值boolean | string | numbertrue
inactive-valueswitch 状态为 off 时的值boolean | string | numberfalse
active-textswitch 打开时的文字描述string-
inactive-textswitch 的状态为 off 时的文字描述string-
nameswitch 对应的 name 属性string-

事件 ​

事件名描述类型
changeswitch 状态发生变化时的回调函数(value: boolean | string | number) => void