Switch 开关

表示两种状态之间的切换。

基础用法

当前值: false

<template>
  <x-switch v-model="value" />
</template>

<script setup>
import { ref } from 'vue'
const value = ref(false)
</script>

禁用状态

<template>
  <x-switch v-model="value" disabled />
</template>

自定义颜色

<template>
  <x-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
</template>

API

Props

属性	说明	类型	默认值
modelValue	绑定值	boolean | number | string	false
disabled	是否禁用	boolean	false
width	宽度	number | string	40
activeColor	打开时的背景色	string	'#409eff'
inactiveColor	关闭时的背景色	string	'#dcdfe6'
activeValue	打开时的值	boolean | number | string	true
inactiveValue	关闭时的值	boolean | number | string	false

Events

事件名	说明	回调参数
update:modelValue	值改变时触发	(value: boolean | number | string)
change	值改变时触发	(value: boolean | number | string)