使用vue自定义指令实现一个校验input只能输入数字及保留两位小数的全局指令

前言

最近在开发时，遇到了很多地方要求限制输入框的数据为数字及保留两位小数的需求，因此借助vue的自定义指令封装了一个全局指令，以此记录。

---

直接上代码：

1. 定义全局指令

// 注意：使用此指令后数据格式为String，因此如果涉及到数据运算时需要注意数据类型
Vue.directive('limitInput', {
	inserted(el) {
		el.addEventListener('input', (e) => {
			let value = e.target.value;
			let temp = value.toString();
			temp = temp.replace(/。/g, '.');
			temp = temp.replace(/[^\d.]/g, '');
			temp = temp.replace(/^\./g, '');
			temp = temp.replace(/\.{2,}/g, '');
			temp = temp.repace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
			temp = temp.replace(/^(\-)*(\d+)\.(\d\d).$/, '$1$2.$3');
			e.target.value = temp;
			e.target.dispatchEvent(new Event('input')); // 更新v-model绑定的值
		})
	}
})

2. 使用全局指令

<el-input v-model="msg" v-limitInput></el-input>

3. 代码优化

这段代码是一个限制用户输入只能输入数字和小数点的指令，并对输入进行了格式化，确保输入的数据符合指定格式。从代码实现上看，可以进行以下优化：

• 增加正则表达式的复用性：可以将正则表达式提取出来，以变量的形式存储，这样可以提高代码的可读性和可维护性。

• 将字符串操作转换为数字操作：当前代码在格式化输入的过程中，使用了多个字符串操作，例如 replace、toString() 等，这些操作会增加代码的执行时间和开销。我们可以使用 Number 类型和 Math 类型提供的函数来代替字符串操作，以优化代码的性能。

• 合并多个正则表达式：当前代码中使用了多个正则表达式，可以考虑将这些表达式合并成一个表达式，从而减少代码的复杂度。简化代码逻辑：可以通过使用较为简洁的代码逻辑，减少代码的复杂度和执行时间。

3.1优化后的代码如下：

const LIMIT_REGEXP = /[^0-9.-]/g; // 定义限制用户输入的正则表达式

Vue.directive('limitInput', {
  inserted(el) {
    el.addEventListener('input', (e) => {
      let value = e.target.value;
      // 将输入值转换为数字类型
      let temp = Number(value);
      if (isNaN(temp)) {
        temp = '';
      } else {
        // 将数字转换为指定格式的字符串
        temp = temp.toString().replace(/^(-?\d*)\.?(\d{0,2}).*$/, '$1.$2');
      }
      e.target.value = temp;
      e.target.dispatchEvent(new Event('input')); // 更新v-model绑定的值
    });

    // 使用 onBlur 事件处理值为空的情况
    el.addEventListener('blur', (e) => {
      if (e.target.value === '-') {
        e.target.value = '';
      }
    });
  }
});

在优化后的代码中，我们定义了一个名为 LIMIT_REGEXP 的正则表达式，用于限制用户的输入。在 inserted 钩子函数中，我们将输入值转换为数字类型，并将其转换为指定格式的字符串，这样就可以避免在格式化输入时使用字符串操作。在处理空值的情况时，我们使用了 onBlur 事件来判断值是否为空，这样可以避免使用字符串操作。
这样优化后的代码性能更高，代码逻辑更简单，易于维护和扩展。

---

总结

本文主要记录用vue封装了一个校验输入内容为数字及保留两位小数的全局指令，下次再见。