Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

导入

import Switch from '@/components/form/Switch.vue';

使用方法

基础用法

开关组件的基础使用方式。

<template>
  <Switch v-model="value" />
</template>

<script setup lang="ts">
import Switch from '@/components/form/Switch.vue';
import { ref } from 'vue';

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

禁用状态

通过设置 disabled 属性来禁用开关。

<template>
  <Switch v-model="value" disabled />
</template>

加载状态

通过设置 loading 属性来显示加载状态。

<template>
  <Switch v-model="value" loading />
</template>

自定义大小

通过设置 size 属性来调整开关的大小。

<template>
  <Switch v-model="value" :size="80" />
</template>

自定义颜色

通过设置 color 属性来自定义开关的颜色。

<template>
  <Switch v-model="value" color="danger" />
</template>

原生 Switch

通过设置 native 属性来使用原生的 Switch 组件。

<template>
  <Switch v-model="value" native />
</template>

API 参考

Switch

开关组件。

Props

名称	说明	类型	必填	默认值
v-model	开关是否开启	boolean	否	false
native	是否使用原生 Switch 组件	boolean	否	false
color	开关的主颜色	string	否	'primary'
inverseColor	开关的反色	string	否	'background.switch'
dotColor	开关点的颜色	string	否	'white'
loading	开关是否是加载中状态	boolean	否	false
disabled	开关是否禁用	boolean	否	false
impactFeedback	是否有触感反馈（iOS平台）	boolean	否	true
size	开关大小	number	否	60

Events

名称	说明	参数
update:modelValue	开关状态变化时触发	boolean

主题变量

名称	类型	默认值	说明
SwitchColor	string	primary	开关主颜色
SwitchInverseColor	string	background.switch	开关反色
SwitchDotColor	string	white	开关点颜色
SwitchImpactFeedback	boolean	true	是否开启触感反馈
SwitchSize	number	60	开关大小
SwitchDotPadding	number	4	开关点内边距
SwitchDotShadow	string	rgba(0, 0, 0, 0.1) 2px 2px 8px 2px	开关点阴影
SwitchAnimDuration	number	200	动画持续时间