主動的開關

停用時切換狀態會和你唱反調。( ´థ౪థ)

靈感來自 Useless machine，這個小廢物可是 Maker 的浪漫。(´,,•ω•,,)

至於為甚麼要用貓手，因為貓手是我想的到最欠揍的小手手。ヾ(◍'౪`◍)ﾉﾞ

使用範例

基本用法

開關停用時，切換開關會被貓貓手切回來。(◜௰◝)y

停用開關

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 border border-gray-300 p-6">
    <base-checkbox
      v-model="disabled"
      label="停用開關"
      class="border rounded p-4"
    />

    <div class="flex flex-1 items-center justify-center">
      <toggle-proactive
        v-model="value"
        :disabled="disabled"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import ToggleProactive from '../toggle-proactive.vue'

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

元件參數

樣式可隨意調整

查看範例原始碼

<template>
  <div class="w-full flex flex-col items-center gap-10 border border-gray-300 p-8">
    <toggle-proactive
      :model-value="false"
      disabled
      size="3rem"
      fur-color="#DFC57B"
      pad-color="#FFF"
    />

    <toggle-proactive
      :model-value="true"
      disabled
      size="6rem"
      track-inactive-class="bg-red-400"
      track-active-class="bg-[#DFDFDF]"
      fur-color="#8D6F64"
      pad-color="#000"
    />

    <toggle-proactive
      :model-value="false"
      disabled
      size="4rem"
      track-active-class="bg-[#7DDAEA]"
      fur-color="#F3F2F2"
    />
  </div>
</template>

<script setup lang="ts">
import ToggleProactive from '../toggle-proactive.vue'
</script>

原理

注意！Σ(ˊДˋ;)

請不要將 overflow 設定為 hidden，否則貓貓手會被狠心切割

利用 anime.js 製作 svg 動畫。

裡面有個小細節，就是貓手一開始藏在 toggle 背後（手臂與手肘都在背後），播放切換動畫時，手臂一樣在 toggle 背後，但是手肘會伸到 toggle 前面。

SVG 內的物件為甚麼有辦法忽然變換堆疊順序？大家來猜猜看如何這個效果。(´,,•ω•,,)

賣個關子，想知道的話可以看看原始碼或留言讓我知道你的猜想。( ´ ▽ ` )ﾉ

原始碼

元件

、範例

API

Props

interface Props {
  modelValue: boolean;
  disabled?: boolean;
  /** @default '4rem' */
  size?: string;

  /** @default 'rounded-full' */
  trackClass?: string;
  /** @default 'bg-[#DFDFDF]' */
  trackInactiveClass?: string;
  /** @default 'bg-green-500' */
  trackActiveClass?: string;
  /** @default 'bg-white' */
  thumbClass?: string;
  /** @default '' */
  thumbInactiveClass?: string;
  /** @default '' */
  thumbActiveClass?: string;

  /** @default '#222' */
  furColor?: string;
  /** @default '#FFA5A5' */
  padColor?: string;
}

Emits

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
}>()