Eject Input input

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

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