vInputFilter

输入过滤指令(仅支持在vue3项目中使用)

引入版本

0.80.0

Demo

<script setup lang="ts">
  import { vInputFilter } from '@wyfex/iutils'

  const text1 = ref('')
  const text2 = ref('')
  const text3 = ref('')
  const disableFilter = ref(false)
</script>

<template>
  <!-- 使用默认规则：过滤emoji特殊字符 -->
  <input
    v-input-filter
    v-model="text1"
    placeholder="默认过滤emoji特殊字符"
  />

  <el-divider border-style="dashed" />

  <!-- 自定义正则，只允许数字 -->
  <el-input
    v-input-filter="/[^0-9]/g"
    v-model="text2"
    placeholder="只允许输入数字"
  />

  <el-divider border-style="dashed" />

  <!-- 对象配置，可动态关闭过滤 -->
  <UseElInput
    type="textarea"
    v-input-filter="{ reg: /[^a-zA-Z0-9]/g, disabled: disableFilter }"
    v-model="text3"
    :placeholder="disableFilter ? '可以输入任意字符' : '只允许大小写字母和数字'"
  />
  <UseElButton
    :btnText="`${disableFilter ? '开启' : '关闭'}过滤`"
    @click="disableFilter = !disableFilter"
  />
</template>