Vue2 自定义指令: 灵活运用正则表达式,轻松实现 Input 数字格式化

2023-10-25 07:29:11

问题与动机

在PC管理后台项目中, 经常需要对input输入框进行格式校验。例如：

输入正整数 1-100
输入整数
输入大于0的数字
输入数字

诸如此类各种需求, 按照正常的写法:

<template>
  <input type="text" v-model="num" />
</template>

<script>
export default {
  data() {
    return {
      num: ''
    }
  },
  watch: {
    num(val) {
      // 进行数字格式校验
      if (!/^[1-9]\d*$/.test(val)) {
        this.num = ''
      }
    }
  }
}
</script>

对于不同的需求, 需要编写不同的校验逻辑, 造成代码冗余, 开发效率低下。

自定义指令解决方案

为了解决上述问题, 我们可以在 Vue2 中自定义指令, 轻松实现 Input 数字格式化的功能。

首先, 定义一个名为 format-number 的自定义指令:

Vue.directive('format-number', {
  bind(el, binding) {
    // 获取指令绑定的参数, 即正则表达式
    const pattern = binding.value
    // 绑定输入事件
    el.addEventListener('input', (e) => {
      // 正则表达式校验
      if (!pattern.test(e.target.value)) {
        // 不符合格式, 清空输入框
        e.target.value = ''
      }
    })
  }
})

然后, 在需要数字格式化的 input 标签上使用 format-number 指令:

<template>
  <input type="text" v-model="num" v-format-number="^[1-9]\d*<template>
  <input type="text" v-model="num" v-format-number="^[1-9]\d*$" />
</template>
quot; />
</template>

这样, 当用户在输入框中输入数字时, 自定义指令会自动进行正则表达式校验, 确保输入的数字符合指定的格式。