閃躲飄包裝器 wrapper

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

使用範例

基本用法

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

enableDodging

bugMessage

查看範例原始碼

<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="t('enableDodging')"
        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">
          {{ t('bugMessage') }}
        </div>
      </wrapper-dodging>
    </div>
  </div>
</template>

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

const { t } = useI18n()
const enable = ref(true)
</script>

機密資料

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

superSecretToken

cannotViewAgain

查看範例原始碼

<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">
            {{ t('superSecretToken') }}
          </div>

          <div class="text-xs opacity-50">
            {{ t('cannotViewAgain') }}
          </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="t('passwordValue')"
            >
          </div>
        </wrapper-dodging>
      </label>
    </div>
  </div>
</template>

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

const { t } = useI18n()
</script>

意願調查表

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

是否訂飲料

喝都喝

不想喝

有人請客我就喝

晚一點再說

看喝哪一家

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

查看範例原始碼

<!-- #region main-code -->
<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">
        {{ t('title') }}
      </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"
          >
          {{ t('drinkOption.yes') }}
        </label>

        <div
          v-for="optionKey in ['no', 'onTheHouse', 'later', 'dependsOnBrand']"
          :key="optionKey"
          class="flex gap-2 text-lg"
        >
          <wrapper-dodging class="flex items-center">
            <input
              v-model="value"
              type="radio"
              :value="t(`drinkOption.${optionKey}`)"
              class="pointer-events-none size-6"
            >
          </wrapper-dodging>
          {{ t(`drinkOption.${optionKey}`) }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const value = ref('')
const { t } = useI18n()
</script>
<!-- #endregion main-code -->

<i18n lang="json">
{
  "zh-hant": {
    "title": "是否訂飲料",
    "drinkOption": {
      "yes": "喝都喝",
      "no": "不想喝",
      "onTheHouse": "有人請客我就喝",
      "later": "晚一點再說",
      "dependsOnBrand": "看喝哪一家"
    }
  },
  "en": {
    "title": "Order Drinks?",
    "drinkOption": {
      "yes": "Yes, absolutely!",
      "no": "No, thanks",
      "onTheHouse": "If someone's treating, I'm in!",
      "later": "Maybe later",
      "dependsOnBrand": "Depends on the brand"
    }
  }
}
</i18n>

原理

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

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

原始碼

元件

、範例

API

Props

interface Props {
  enable?: boolean;
}

Slots

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