七巧板游標 cursor

隨著滑鼠型態變形的七巧板，讓游標變得超酷。ヽ(●`∀´●)ﾉ

TIP

此元件針對滑鼠設計，建議使用電腦或可以使用滑鼠的裝置瀏覽。

使用範例

基本用法

隨著 cursor 型態持續變化。

顯示

none

pointer

text

wait

move

not-allowed

help

crosshair

zoom-in

zoom-out

grab

grabbing

vertical-text

cell

copy

alias

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-10 p-6">
    <div class="flex flex-col gap-4 border rounded">
      <base-checkbox
        v-model="visible"
        label="顯示"
        class="p-4"
      />
    </div>

    <div class="grid grid-cols-2 w-full gap-10 md:grid-cols-3">
      <div
        v-for="item in list"
        :key="item"
        class="border px-8 py-4 text-center"
        :style="{ cursor: item }"
      >
        <div class="text-sm opacity-60">
          {{ item }}
        </div>
      </div>
    </div>

    <cursor-trangram
      v-if="visible"
      class="z-50"
    />
  </div>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import CursorTrangram from '../cursor-trangram.vue'

const visible = ref(true)

const list: CSSProperties['cursor'][] = [
  'none',
  'pointer',
  'text',
  'wait',
  'move',
  'not-allowed',
  'help',
  'crosshair',
  'zoom-in',
  'zoom-out',
  'grab',
  'grabbing',
  'vertical-text',
  'cell',
  'copy',
  'alias',
]
</script>

原理

使用 useElementByPoint 取得目前觸碰的元素。

接著使用 getComputedStyle 取得目標具體的 CSS 屬性，再透過 cursor 屬性設定游標樣式。

最後就是 anime.js 與 svg 動畫的部分惹。(´,,•ω•,,)

原始碼

元件

、範例

API

Props

type Cursor = NonNullable<CSSProperties['cursor']>

interface Props {
  /** 7 個積木顏色 */
  colors?: [string, string, string, string, string, string, string];
  size?: string;
  offsetX?: number | ((cursor: Cursor) => number);
  offsetY?: number | ((cursor: Cursor) => number);

  /** 可自定義位置。預設跟隨滑鼠 */
  positionProvider?: () => { x: number; y: number };
}