Vue自定义指令实现数字输入框精确控制

1. 项目概述

在Vue项目开发中，表单输入验证是一个高频需求场景。特别是针对金额、数量等数值型输入框，往往需要严格限制用户只能输入数字，并且根据业务需求控制小数点位数。比如电商平台的价格输入需要保留2位小数，而某些工业参数可能需要精确到4位小数。

原生HTML的input[type="number"]虽然能限制数字输入，但在实际业务中存在诸多不足：

• 无法精确控制小数点位数
• 移动端会弹出数字键盘但无法阻止非数字字符输入
• 视觉反馈不够直观
• 无法灵活应对不同场景的小数位需求

这正是我们需要开发自定义指令的原因。通过Vue的自定义指令机制，我们可以创建一个可复用的解决方案，既能保证输入内容的规范性，又能根据业务场景灵活配置小数位数。

2. 核心需求解析

2.1 功能需求拆解

这个自定义指令需要实现以下核心功能：

1. 基础数字过滤：拦截所有非数字字符的输入
2. 小数点控制：可配置是否允许小数点
3. 小数位控制：可配置保留几位小数
4. 实时验证：在输入过程中即时反馈
5. 兼容性：支持PC端和移动端的不同输入方式

2.2 技术方案选型

对比几种实现方案：

• 原生事件监听：通过@input/@keydown事件处理，但代码耦合度高
• 第三方库：如vuelidate，但体积较大且不够灵活
• 自定义指令：最佳选择，因为：
  • 解耦业务逻辑
  • 可全局复用
  • 声明式配置
  • 维护成本低

3. 指令实现详解

3.1 指令基础结构

javascript复制// 注册全局指令
Vue.directive('number-only', {
  bind(el, binding) {
    // 初始化配置
    const config = {
      allowDecimal: binding.value?.allowDecimal ?? true,
      decimalDigits: binding.value?.decimalDigits ?? 2
    }
    
    el.addEventListener('input', handleInput)
    el.addEventListener('blur', handleBlur)