Switch 开关

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

基础用法

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

<script setup>
import { ref } from 'vue'
const test = ref(false)
const test1 = ref(false)
</script>
<template>
  <vk-switch v-model="test"  />
  <vk-switch v-model="test1"  style="--vk-switch-on-color: #13ce66; --vk-switch-off-color: #ff4949;margin-left: 5px;"/>
</template>

禁用状态

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

正常：

禁用：

<script setup>
import { ref } from 'vue'
const test = ref(false)
const test2 = ref(false)
</script>
<template>
  正常：<vk-switch v-model="test" /> <br/>
  禁用：<vk-switch v-model="test2" disabled/>
</template>

不同尺寸

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

<script setup>
import { ref } from 'vue'
const test = ref(false)
</script>
<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>
<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

<script setup>
import { ref } from 'vue'
const test = ref('right')
</script>
<template>
  <vk-switch v-model="test" activeValue="right" inactiveValue="wrong"/>
  <h4>model-value: {{test}}</h4>
</template>

文字描述

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

OFF

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

Switch API

Switch Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型	enum - 'boolean'| 'string'| 'number'	false
size	switch 的大小	enum - 'large'| 'small'	—
disabled	按钮是否为禁用状态	boolean	false
active-text	switch 打开时的文字描述	string	''
inactive-text	switch 的状态为 off 时的文字描述	string	''
active-value	switch 状态为 on 时的值	enum - 'boolean'| 'string'| 'number'	true
inactive-value	switch的状态为 off 时的值	enum - 'boolean'| 'string'| 'number'	false
name	switch 对应的 name 属性	string	''
id	input 的 id	string	—

Switch Events

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