Switch 开关

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

基础用法

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

<template>
  <div class="demo-switch">
    <vk-switch v-model="value1" />
    <vk-switch v-model="value2" style="--vk-switch-on-color: #13ce66; --vk-switch-off-color: #ff4949;" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vkSwitch from '@/components/Switch/Switch.vue'

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

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

禁用状态

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

<template>
  <div class="demo-switch">
    <vk-switch v-model="value1" disabled />
    <vk-switch v-model="value2" disabled />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vkSwitch from '@/components/Switch/Switch.vue'

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

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

不同尺寸

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

<template>
  <div class="demo-switch">
    <vk-switch v-model="value1" size="large" />
    <vk-switch v-model="value2" />
    <vk-switch v-model="value3" size="small" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vkSwitch from '@/components/Switch/Switch.vue'

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

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

支持自定义 value 类型

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

当前值: 100

<template>
  <div class="demo-switch">
    <vk-switch
      v-model="value"
      active-value="100"
      inactive-value="0"
    />
    <div class="value-display">当前值: {{ value }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vkSwitch from '@/components/Switch/Switch.vue'

const value = ref('100')
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
.value-display {
  font-size: 14px;
  color: #666;
}
</style>

文字描述

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

开启

否

ON

<template>
  <div class="demo-switch">
    <vk-switch
      v-model="value1"
      active-text="开启"
      inactive-text="关闭"
    />
    <vk-switch
      v-model="value2"
      active-text="是"
      inactive-text="否"
      size="large"
    />
    <vk-switch
      v-model="value3"
      active-text="ON"
      inactive-text="OFF"
      size="small"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vkSwitch from '@/components/Switch/Switch.vue'

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

<style scoped>
.demo-switch {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

Attributes

Switch Attributes

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

Switch Events

Name	Description	Type
change	switch 状态发生变化时的回调函数	function(value: boolean | string | number)
update:modelValue	值更新时触发	function(value: boolean | string | number)