基于Vue3指令实现输入框过滤

官方文档

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

一个指令的定义对象可以提供几种钩子函数:

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
钩子参数
  • el：指令绑定到的元素。这可以用于直接操作 DOM。
  • binding：一个对象，包含以下属性。
    • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
    • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
    • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
    • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
    • instance：使用该指令的组件实例。
    • dir：指令的定义对象。
  • vnode：代表绑定元素的底层 VNode。
  • prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
思路

我们可以通过arg传参控制过滤文本或者数字，通过binding中传参控制过滤逻辑。

过滤类型
export enum EDirectiveType {
  文本 = 'text',
  数字 = 'number',
}
文本过滤参数
/**
 * @param allowChinese 是否允许中文
 * @param allowSpace 是否允许空格
 * @param regExp 正则
 */
export interface IDirectiveTextBindingVO {
  allowChinese: boolean;
  allowSpace: boolean;
  regExp: RegExp;
}
数字过滤参数

/**
 * @param integral 整数位
 * @param decimal 小数位
 * @param negative 是否支持负数
 * @param min 最小
 * @param max 最大
 */
export interface IDirectiveNumberBindingVO {
  integral: number;
  decimal: number;
  negative: boolean;
  min: number | null;
  max: number | null;
}

实现

指令注册：
const registerInputFilter = (app: App) => {
  app.directive('inputFilter', {
    created(el, binding, vnode) {
      el._assign = getModelAssigner(vnode);
      const type = binding.arg;
      addEventListener(el, 'input', (e) => {
        if ((e.target as any).composing) return;
        let domValue: string = el.value;
        switch (type) {
          case EDirectiveType.文本:
            domValue = handleTextFilter(domValue, binding);
            break;
          case EDirectiveType.数字:
            domValue = handleNumberFilter(domValue, binding);
            break;
        }
        el._assign(domValue);
      });
    },
    // beforeMount(el, binding) {},
    mounted(el, binding) {
      const type = binding.arg;
      let domValue: string = el.value;
      switch (type) {
        case EDirectiveType.文本:
          domValue = handleTextFilter(domValue, binding);
          break;
        case EDirectiveType.数字:
          domValue = handleNumberFilter(domValue, binding);
          break;
      }
      el.value = domValue;
    },
    // beforeUpdate(el, binding, vnode) {
    //   console.log('beforeUpdate---el, binding----------------------', el, binding);
    // },
    // updated(el, binding) {
    //   console.log('updated---el, binding----------------------', el, binding);
    // },
    // beforeUnmount(el, binding) {
    //   console.log('beforeUnmount---el, binding----------------------', el, binding);
    // },
    // unmounted(el, binding) {
    //   console.log('unmounted---el, binding----------------------', el, binding);
    // },
    deep: false,
  });
};

export default registerInputFilter;
文本过滤
/**
 * 过滤文本
 * @param domValue 文本内容
 * @param binding 指令传参
 * @returns
 */
function handleTextFilter(domValue: string, binding: DirectiveBinding<IDirectiveTextBindingVO>) {
  const { regExp, allowSpace } = binding.value;
  const characters: string = '';
  const defaultStr = String.raw`\`\\;\'\"<>`;
  const reg = new RegExp(String.raw`[${defaultStr}${characters}]`, 'g');
  domValue = domValue.replace(regExp instanceof RegExp ? regExp : reg, '');
  // 过滤空格
  if (!allowSpace) {
    domValue = domValue.replace(/\s+/g, '');
  }

  return domValue;
}
数字过滤
/**
 * 数字过滤
 * @param domValue 文本内容 
 * @param binding 指令传参
 * @returns 
 */
function handleNumberFilter(domValue: string, binding: DirectiveBinding<IDirectiveNumberBindingVO>) {
  const { decimal, negative, integral, min, max } = binding.value;
  const reg = new RegExp(String.raw`[^0-9${Math.ceil(decimal ?? 0) > 0 ? '.' : ''}${negative ? '-' : ''}]`, 'g');
  console.log('decimal------------------------------------------------------', decimal);
  console.log('negative-----------------------------------------------------', negative);
  console.log('integral-----------------------------------------------------', integral);
  domValue = domValue.replace(reg, '');
  let symbol = '';
  // 处理符号
  if (domValue.substring(0, 1) === '-') {
    symbol = '-';
    domValue = domValue.substring(1);
  }
  domValue = domValue.replace(/[^0-9\.]/g, '');

  // 处理首位小数点
  if (domValue.substring(0, 1) === '.') {
    domValue = `0${domValue}`;
  }

  // 禁止头部连续输入0
  if (domValue.length > 1 && domValue.substring(0, 1) === '0' && domValue.substring(1, 2) !== '.') {
    domValue = domValue.substring(1);
  }

  // 处理小数点及小数位数
  if (domValue.includes('.')) {
    domValue = deduplicate(domValue, '.');
    const temp = domValue.split('.');
    domValue = `${temp[0]}.${
      temp[1]?.substring(0, (Math.ceil(decimal ?? 0) > 0 ? Math.ceil(decimal) : null) as number) ?? ''
    }`;
  }

  // 处理头部多余的0
  if (domValue.length > 1) {
    domValue = domValue.replace(/^0+(?!\.)/, '');
  }

  // 限制整数长度
  const temp = domValue.split('.');
  temp[0] = temp[0].substring(0, Math.ceil(integral ?? 10));
  domValue = temp.length === 2 ? `${symbol}${temp[0]}.${temp[1]}` : `${symbol}${temp[0]}`;

  // 限制最大最小
  if (
    Object.prototype.toString.call(min) !== '[object Undefined]' &&
    Object.prototype.toString.call(min) !== '[object Null]' &&
    min &&
    domValue !== '' &&
    looseToNumber(domValue) < min
  ) {
    domValue = min + '';
  }
  if (
    Object.prototype.toString.call(max) !== '[object Undefined]' &&
    Object.prototype.toString.call(max) !== '[object Null]' &&
    max &&
    domValue !== '' &&
    looseToNumber(domValue) > max
  ) {
    domValue = max + '';
  }

  console.log('domValue-------------------------------', domValue);
  return domValue;
}
工具方法
/*
 * @Author: wanzp
 * @Date: 2023-04-26 21:15:54
 * @LastEditors: wanzp
 * @LastEditTime: 2023-05-05 20:22:19
 * @Description:
 */
import { VNode } from 'vue';

type AssignerFn = (value: any) => void;

export function onCompositionEnd(e: Event) {
  const target = e.target as any;
  if (target.composing) {
    target.composing = false;
    target.dispatchEvent(new Event('input'));
  }
}

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg);
  }
};

export const getModelAssigner = (vnode: VNode): AssignerFn => {
  const fn = vnode.props!['onUpdate:modelValue'] || (__COMPAT__ && vnode.props!['onModelCompat:input']);
  return Array.isArray(fn) ? (value) => invokeArrayFns(fn, value) : fn;
};

/**
 * "123-foo" will be parsed to 123
 * This is used for the .number modifier in v-model
 */
export const looseToNumber = (val: any): any => {
  const n = parseFloat(val);
  return isNaN(n) ? val : n;
};

export function addEventListener(el: Element, event: string, handler: EventListener, options?: EventListenerOptions) {
  el.addEventListener(event, handler, options);
}

export function removeEventListener(
  el: Element,
  event: string,
  handler: EventListener,
  options?: EventListenerOptions,
) {
  el.removeEventListener(event, handler, options);
}

export const deduplicate = (target: string, symbol: string): string => {
  if (target.includes(symbol)) {
    const temp = target.split(symbol);
    let str = `${temp.shift() ?? ''}${symbol}`;
    temp.filter((v) => v).forEach((v) => (str += v));
    return str;
  }
  return target;
};
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343