Vue自定义指令实现数字输入控制与格式化

1. 需求背景与核心功能解析

在Vue项目开发中，表单输入控制是高频需求场景。特别是金融、电商、数据统计类应用，经常需要精确控制数字输入格式。原生HTML的input[type="number"]虽然能限制数字输入，但存在三大痛点：

1. 无法限制小数点后位数（比如强制保留2位小数）
2. 在移动端会出现不必要的数字键盘控制按钮
3. 兼容性问题（部分浏览器仍允许输入字母e等字符）

这正是我们需要自定义指令的典型场景。通过v-number指令，我们可以实现：

• 只能输入数字和小数点
• 可配置是否允许小数点
• 可精确控制小数点后位数
• 自动格式化显示（如输入3.1415但限制2位小数时显示3.14）

2. 指令实现方案设计

2.1 技术选型对比

实现输入限制主要有三种方案：

选择自定义指令的核心优势在于：

• 一次实现多处复用
• 保持模板简洁（v-number比@input+方法更直观）
• 统一维护校验逻辑

2.2 核心逻辑流程图

javascript复制输入事件触发 => 获取输入值 
=> 正则校验（根据配置动态生成模式）
=> 非法输入：阻止默认行为 + 恢复旧值
=> 合法输入：格式化显示（可选）
=> 更新v-model绑定值

3. 完整实现代码与逐行解析

3.1 指令注册与基础结构

javascript复制// numberDirective.js
export default {
  inserted(el, binding) {
    // 初始化配置
    const config = {
      decimal: binding.value?.decimal ?? true, // 是否允许小数
      precision: binding.value?.precision ?? 2, // 小数位数
      // 其他默认配置...
    };
    
    el._numberHandler = function(e) {
      // 核心处理逻辑
    };
    
    el.addEventListener('input', el._numberHandler);
  },
  
  un