閃躲飄包裝器 wrapper

被包裹的元素會開始閃躲飄，像極了...。ԅ( ˘ω˘ԅ)

使用範例

基本用法

啟用後被包裹的元素會精準地閃躲飄，像極了那些閃避率點滿的同事。(。-`ω´-)

開始閃躲飄

「這是鱈魚叫我寫的 bug ( ◔ ௰◔) 」

查看範例原始碼

<template>
  <div class="w-full flex flex-col items-center gap-4 py-10">
    <div class="flex flex-col gap-4 border rounded">
      <base-checkbox
        v-model="enable"
        label="開始閃躲飄"
        class="p-4"
      />
    </div>

    <div class="w-full flex justify-center">
      <wrapper-dodging
        class="w-full"
        :enable
      >
        <div class="w-full border bg-white p-2 text-center">
          「這是鱈魚叫我寫的 bug ( ◔ ௰◔) 」
        </div>
      </wrapper-dodging>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import WrapperDodging from '../wrapper-dodging.vue'

const enable = ref(true)
</script>

機密資料

機密到連碰都碰不到。(́⊙◞౪◟⊙‵)

超機密 token

已無法再次觀看

查看範例原始碼

<template>
  <div class="w-full flex flex-center flex-col gap-4 p-6">
    <div class="flex justify-center">
      <label>
        <div class="mb-1">
          <div class="font-bold">
            超機密 token
          </div>

          <div class="text-xs opacity-50">
            已無法再次觀看
          </div>
        </div>

        <wrapper-dodging class="w-full">
          <div class="border rounded bg-white">
            <input
              type="password"
              class="w-full cursor-not-allowed p-2 tracking-tighter"
              value="鱈魚超超超超超超超超超超超超超超超胖"
            >
          </div>
        </wrapper-dodging>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import WrapperDodging from '../wrapper-dodging.vue'
</script>

意願調查表

調查下午要不要喝飲料。♪( ◜ω◝و(و

是否訂飲料

喝都喝

不想喝

有人請客我就喝

晚一點再說

看喝哪一家

同事：「根本強迫喝飲料！Σ(ˊДˋ;)」

查看範例原始碼

<template>
  <div class="w-full flex justify-center p-6">
    <div class="flex flex-col items-start gap-4 border border-gray-300 rounded-xl p-6 px-10">
      <div class="text-xl font-bold">
        是否訂飲料
      </div>

      <div class="w-full flex flex-col flex-wrap select-none justify-between gap-4 whitespace-nowrap">
        <label class="flex items-center gap-2 text-lg">
          <input
            v-model="value"
            type="radio"
            value="yes"
            class="size-6"
          >
          喝都喝
        </label>

        <div
          v-for="option in ['不想喝', '有人請客我就喝', '晚一點再說', '看喝哪一家']"
          :key="option"
          class="flex gap-2 text-lg"
        >
          <wrapper-dodging class="flex items-center">
            <input
              v-model="value"
              type="radio"
              :value="option"
              class="pointer-events-none size-6"
            >
          </wrapper-dodging>
          {{ option }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import WrapperDodging from '../wrapper-dodging.vue'

const value = ref('')
</script>

原理

使用 Matter.js 實現物理模擬效果

實作延伸至基於怕鼠的文字，最大的差別在於物體的形狀為矩形，需要多處理旋轉問題。

原始碼

元件

、範例

API

Props

interface Props {
  enable?: boolean;
}

Slots

interface Slots {
  default?: (params: { style?: CSSProperties }) => VNode[];
}