Switch 开关

基于 Element Plus el-switch 的包装组件，提供开关切换功能。

基础用法

基础的开关切换

基础开关

带文字提示

开

禁用状态

自定义颜色

自定义值

离线

在线

当前值：1

<template>
	<div class="demo-section">
		<p class="demo-title">基础开关</p>
		<HxSwitch v-model="switchValue1" />

		<p class="demo-title" style="margin-top: 28px">带文字提示</p>
		<HxSwitch
			v-model="switchValue2"
			active-text="开"
			inactive-text="关"
			inline-prompt
		/>

		<p class="demo-title" style="margin-top: 28px">禁用状态</p>
		<HxSwitch v-model="switchValue3" disabled />

		<p class="demo-title" style="margin-top: 28px">自定义颜色</p>
		<HxSwitch
			v-model="switchValue4"
			active-color="#67c23a"
			inactive-color="#909399"
		/>

		<p class="demo-title" style="margin-top: 28px">自定义值</p>
		<HxSwitch
			v-model="switchValue5"
			:active-value="1"
			:inactive-value="0"
			active-text="在线"
			inactive-text="离线"
		/>

		<p class="demo-title" style="margin-top: 28px">当前值：{{ switchValue5 }}</p>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxSwitch } from "@whhx/ui"

const switchValue1 = ref(false)
const switchValue2 = ref(true)
const switchValue3 = ref(true)
const switchValue4 = ref(true)
const switchValue5 = ref(1)
</script>

<style scoped>
.demo-section {
	padding: 4px 0;
}
.demo-title {
	margin: 0 0 10px;
	font-size: 13px;
  color: var(--el-text-color-secondary);
	font-weight: 500;
}
</style>

API

Props

参数	说明	类型	默认值
v-model / modelValue	开关的值	boolean | string | number	false
disabled	是否禁用	boolean	false
active-text	开启时的文字描述	string	-
inactive-text	关闭时的文字描述	string	-
active-value	开启时的值	boolean | string | number	true
inactive-value	关闭时的值	boolean | string | number	false
active-color	开启时的背景色	string	#409eff
inactive-color	关闭时的背景色	string	#c0ccda
width	开关的宽度	number	40
inline-prompt	是否以内联形式展示文字提示	boolean	false

Events

事件名	说明	回调参数
change	开关状态变化时触发	(value: boolean | string | number)
update:modelValue	值更新时触发	(value: boolean | string | number)