Switch (开关)

Switch 组件用于在两种状态间切换，支持自定义激活事件、样式和禁用等功能。

Basic Usage (基本使用)

通过 v-model 绑定开关状态，通过 activeClass 和 unactiveClass 自定义激活与未激活状态的样式。

关

<script setup>
import { ref } from "vue";

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

<template>
  <div class="flex items-center gap-4">
    <!-- 基础用法 -->
    <hi-switch
      v-model="checked"
      active-class="bg-blue-500 text-white shadow-md"
      unactive-class="bg-gray-200 text-gray-700 border border-gray-300"
      class="min-w-16 text-center px-4 py-1 rounded-lg duration-300 select-none cursor-pointer"
    >
      <template #default="{ active }">
        {{ active ? "开" : "关" }}
      </template>
    </hi-switch>
  </div>
</template>

<style>
</style>

Disabled (禁用状态)

通过 disabled 属性设置禁用状态，通过 disabledClass 自定义禁用状态的样式。

禁用

<script setup>
import { ref } from "vue";

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

<template>
  <hi-switch v-model="checked" :disabled="true" disabled-class="text-#aaa bg-#f5f5f5 px-4 py-1 min-w-16 rounded-lg cursor-not-allowed">
    <template #default="{ active, isDisabled }">
      {{ isDisabled ? "禁用" : active ? "开" : "关" }}
    </template>
  </hi-switch>
</template>

Activate Event (激活事件)

通过 activateEvent 属性设置激活事件，支持 click、mouseenter、mousedown、mouseup、dblclick、contextmenu、touchstart、touchend 事件。

点击 (click)

鼠标进入 (mouseenter)

鼠标按下 (mousedown)

鼠标抬起 (mouseup)

双击 (dblclick)

右键点击 (contextmenu)

触摸开始 (touchstart)

触摸结束 (touchend)

<script lang="ts" setup>
import type { ActivateEvent } from "hoci";

const activeEvents: {
  label: string;
  event: ActivateEvent;
}[] = [
  {
    label: "点击",
    event: "click"
  },
  {
    label: "鼠标进入",
    event: "mouseenter"
  },
  {
    label: "鼠标按下",
    event: "mousedown"
  },
  {
    label: "鼠标抬起",
    event: "mouseup"
  },
  {
    label: "双击",
    event: "dblclick"
  },
  {
    label: "右键点击",
    event: "contextmenu"
  },
  {
    label: "触摸开始",
    event: "touchstart"
  },
  {
    label: "触摸结束",
    event: "touchend"
  }
];
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <hi-switch
      v-for="({ label, event }, index) in activeEvents"
      :key="index"
      class="text-center flex-1/3 px-4 py-1 rounded-lg duration-300 select-none"
      active-class="bg-blue-500 text-white"
      unactive-class="bg-gray-200 text-gray-700 border border-gray-300"
      :activate-event="event"
    >
      {{ label }}&nbsp;({{ event }})
    </hi-switch>
  </div>
</template>

Switch Props (参数)

名称	类型	默认值	说明
modelValue	boolean	false	当前开关状态，支持 v-model 绑定
class	ClassType	-	组件根元素的类名
activeClass	ClassType	-	激活（打开）状态时的类名
unactiveClass	ClassType	-	未激活（关闭）状态时的类名
activateEvent	'click' | 'mouseenter' | 'mousedown' | 'mouseup' | 'dblclick' | 'contextmenu' | 'touchstart' | 'touchend'	'click'	触发切换的事件类型
disabled	boolean	false	是否禁用
disabledClass	ClassType	-	禁用状态时的类名
as	string	'div'	渲染的 HTML 标签名

Switch Events (事件)

名称	参数	说明
update:modelValue	(value: boolean)	状态变化时触发，支持 v-model
change	(value: boolean)	状态变化时触发
reject	(value: any)	禁用状态下尝试切换时触发

Switch Slots (插槽)

名称	参数	说明
default	{ active: boolean, isDisabled: boolean }	自定义内容，参数为当前激活和禁用状态