Vue3德语格式小数输入指令实现问题求助

我明白你遇到的困扰了——想要实现一个Vue3指令，让输入框显示德语风格的逗号分隔小数，但绑定的模型值要存储成标准的点分隔数值格式，现在你的失焦事件处理没有正确同步模型与视图，导致出现覆盖整个模型的问题。我来帮你分析问题并给出可行的解决方案。

先说说你现有代码的问题点 #

• 你使用binding.instance.$emit('update:modelValue')触发v-model更新的方式不够严谨，Vue3中v-model的更新逻辑是通过组件props传递的onUpdate:modelValue函数实现的，直接调用实例emit可能会出现同步问题。
• 缺少模型值变化时的视图同步：如果父组件直接修改了myObj.multiplicator，你的输入框不会自动更新为德语格式的显示。
• 没有处理输入过程中的非法字符，用户可能输入非数字或多个逗号，导致后续数值转换出错。
• 未清理绑定的事件监听，长期使用可能造成内存泄漏。

修正后的指令代码 #

export default {
  beforeMount(el, binding, vnode) {
    // 初始化时，将模型值转为德语格式显示
    if (binding.value !== undefined && !isNaN(binding.value)) {
      el.value = binding.value.toLocaleString('de-DE', { 
        minimumFractionDigits: 2, 
        maximumFractionDigits: 2 
      });
    }

    // 失焦事件：格式化输入值并同步到模型
    const handleBlur = (event) => {
      let inputValue = event.target.value.trim();
      // 替换逗号为点，转换为数值
      let numericValue = parseFloat(inputValue.replace(',', '.'));
      
      if (!isNaN(numericValue)) {
        // 确保数值保留两位小数
        numericValue = Number(numericValue.toFixed(2));
        // 通过v-model的更新函数同步模型值
        vnode.props['onUpdate:modelValue'](numericValue);
        // 更新输入框为德语格式显示
        el.value = numericValue.toLocaleString('de-DE', { 
          minimumFractionDigits: 2, 
          maximumFractionDigits: 2 
        });
      } else {
        // 非数字情况清空模型和输入框
        vnode.props['onUpdate:modelValue']('');
        el.value = '';
      }
    };

    // 输入事件：实时过滤非法字符，只允许数字和单个逗号
    const handleInput = (event) => {
      let inputValue = event.target.value;
      // 移除所有非数字和逗号的字符
      inputValue = inputValue.replace(/[^0-9,]/g, '');
      // 确保输入框中只有一个逗号
      if (inputValue.split(',').length > 2) {
        inputValue = inputValue.slice(0, inputValue.lastIndexOf(','));
      }
      event.target.value = inputValue;
    };

    // 绑定事件监听
    el.addEventListener('blur', handleBlur);
    el.addEventListener('input', handleInput);

    // 存储事件处理函数，方便卸载时清理
    el._decimalHandlers = { handleBlur, handleInput };
  },
  beforeUpdate(el, binding) {
    // 当模型值从外部修改时，同步更新输入框的显示格式
    const formattedValue = binding.value.toLocaleString('de-DE', { 
      minimumFractionDigits: 2, 
      maximumFractionDigits: 2 
    });
    if (binding.value !== undefined && !isNaN(binding.value) && el.value !== formattedValue) {
      el.value = formattedValue;
    }
  },
  unmounted(el) {
    // 移除事件监听，避免内存泄漏
    const { handleBlur, handleInput } = el._decimalHandlers;
    el.removeEventListener('blur', handleBlur);
    el.removeEventListener('input', handleInput);
    delete el._decimalHandlers;
  }
};

使用方式不变 #

<input v-model="myObj.multiplicator" v-decimal required />

效果说明 #

• 输入时：会自动过滤非数字和多余的逗号，确保输入格式合法。
• 失焦后：输入框的值会被格式化为两位小数的德语格式，同时模型值会存储为标准的点分隔数值（比如输入123,45，模型值为123.45）。
• 外部修改模型值：如果父组件将myObj.multiplicator设为678.9，输入框会自动显示为678,90。

备注：内容来源于stack exchange，提问作者SNO