彈射輸入框 input

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

使用範例

基本用法

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

查看範例原始碼

<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 繪製彈射文字，性能超棒棒

原始碼

元件

、範例

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