Eject Input input

Characters get ejected at the slightest provocation! ─=≡Σ((( つ•̀ω•́)つ

Tech Keywords

Name	Description
Input Events	Input elements provide compositionstart, compositionupdate, and compositionend events for handling IME composition
Canvas 2D API	Basic 2D drawing API that efficiently renders graphics too complex for the DOM
JS Animation	JavaScript-driven animation for more complex, precise control; popular libraries include GSAP and anime.js
Physics Simulation	Simulates real-world physics such as gravity, collisions, and velocity
Element computedStyleMap()	Gets the computed values of CSS properties on an element
Particle System	Spawns large numbers of small objects, commonly used to simulate smoke, fire, rain, and snow

Usage Examples

Basic Usage

Deleted text gets ejected (´,,•ω•,,)

View example source code

<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 Begone

You can also eject unwanted text ( ´థ౪థ)

(Try typing codfish)

View example source code

<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>

How It Works

Uses canvas to draw the ejected text, resulting in excellent performance.

Source Code

Component

、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;
}