彈射輸入框

一言不合就彈射字元！─=≡Σ((( つ•̀ω•́)つ

技術關鍵字

名稱	描述
Input 事件	input 元素有 compositionstart、compositionupdate、compositionend 等事件，用於處理輸入法組字過程中的文字輸入
Canvas 2D API	基礎的 2D 繪圖 API，可以高效繪製比 DOM 更複雜的圖形
JS 動畫	基於 JavaScript 實現的動畫，達成更複雜、精準的動畫控制，常見套件有 GSAP、anime.js 等
物理模擬	模擬真實世界物理現象，如重力、碰撞、速度等物理效果
Element computedStyleMap()	取得元素 CSS 屬性的計算值（computed values）
粒子系統	產生大量小物件的系統，常用於模擬煙霧、火焰、雨雪等效果

使用範例

基本用法

被刪除的文字會被彈射 (´,,•ω•,,)

<template>
  <div class="w-full flex flex-col items-center p-6">
    <input-eject
      v-model="text"
      class="input-eject p-3"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InputEject from '../input-eject.vue'

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

<style scoped lang="sass">
:deep(.input-eject)
  border: 1px solid #ccc
  border-inline: 2px solid #AAA
</style>

查看程式碼收合程式碼

鱈魚退散

也可以彈射不喜歡的文字 ( ´థ౪థ)

（嘗試輸入 codfish、鱈魚看看）

<template>
  <div class="w-full flex flex-col items-center p-6">
    <input-eject
      v-model="text"
      class="input-eject p-3"
      :sanitize
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InputEject from '../input-eject.vue'

const text = ref('')

function sanitize(text: string) {
  return text
    .replace(/c(o)+d/gi, '')
    .replace(/fish/gi, '')
    .replaceAll('鱈魚', '')
}
</script>

<style scoped lang="sass">
:deep(.input-eject)
  border: 1px solid #ccc
  border-inline: 2px solid #AAA
</style>

查看程式碼收合程式碼

原理

使用 canvas 繪製彈射文字，性能超棒棒

原始碼

元件原始碼input-eject/範例原始碼input-eject/examples/

API

Props

interface Props {
  modelValue?: string;
  sanitize?: (text: string) => string;
}

Emits

interface Emits {
  'update:modelValue': [value: Props['modelValue']];
}

Methods

interface Expose {
  /** 手動彈射字元 */
  ejectText: (text: string) => void;
}