Vue3实现输入框显示德语数字格式，保留英文格式原始值

直接用原生Intl.NumberFormat做本地化处理，配合Vue的自定义v-model实现双向绑定，无需依赖第三方库，完美解决你遇到的问题：

Vue 3 实现 #

<template>
  <input
    :value="displayValue"
    @input="handleInput"
    @blur="handleBlur"
    type="text"
    placeholder="请输入数字"
  />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  }
});
const emit = defineEmits(['update:modelValue']);

// 计算显示用的德语格式值
const displayValue = computed(() => formatToGerman(props.modelValue));

function handleInput(e) {
  let inputValue = e.target.value;
  // 过滤非数字、点、逗号的非法字符
  inputValue = inputValue.replace(/[^0-9.,]/g, '');
  // 限制只能有一个逗号（德语的小数点）
  const commaIndex = inputValue.lastIndexOf(',');
  if (commaIndex !== -1) {
    inputValue = inputValue.slice(0, commaIndex + 1) + inputValue.slice(commaIndex + 1).replace(/,/g, '');
  }
  
  const parsedValue = parseFromGerman(inputValue);
  emit('update:modelValue', parsedValue);
  // 实时同步输入框显示为正确格式
  e.target.value = formatToGerman(parsedValue);
}

function handleBlur(e) {
  // 失焦时强制修正为标准德语格式，避免输入过程中的临时状态
  e.target.value = formatToGerman(props.modelValue);
}

// 英文格式 → 德语显示格式
function formatToGerman(value) {
  if (!value) return '';
  // 先把英文格式转成数字
  const num = typeof value === 'string' 
    ? parseFloat(value.replace(/,/g, '')) 
    : value;
  
  return isNaN(num) 
    ? '' 
    : new Intl.NumberFormat('de-DE', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(num);
}

// 德语输入格式 → 英文格式（内部存储用）
function parseFromGerman(value) {
  if (!value) return '';
  // 替换千分位点为空，逗号替换为小数点
  const normalized = value.replace(/\./g, '').replace(/,/g, '.');
  const num = parseFloat(normalized);
  
  return isNaN(num) 
    ? '' 
    : num.toLocaleString('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
}
</script>

Vue 2 实现 #

<template>
  <input
    :value="displayValue"
    @input="handleInput"
    @blur="handleBlur"
    type="text"
    placeholder="请输入数字"
  />
</template>

<script>
export default {
  name: 'GermanNumberInput',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    displayValue() {
      return this.formatToGerman(this.value);
    }
  },
  methods: {
    handleInput(e) {
      let inputValue = e.target.value;
      inputValue = inputValue.replace(/[^0-9.,]/g, '');
      const commaIndex = inputValue.lastIndexOf(',');
      if (commaIndex !== -1) {
        inputValue = inputValue.slice(0, commaIndex + 1) + inputValue.slice(commaIndex + 1).replace(/,/g, '');
      }
      
      const parsedValue = this.parseFromGerman(inputValue);
      this.$emit('input', parsedValue);
      e.target.value = this.formatToGerman(parsedValue);
    },
    handleBlur(e) {
      e.target.value = this.formatToGerman(this.value);
    },
    formatToGerman(value) {
      if (!value) return '';
      const num = typeof value === 'string' 
        ? parseFloat(value.replace(/,/g, '')) 
        : value;
      
      return isNaN(num) 
        ? '' 
        : new Intl.NumberFormat('de-DE', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          }).format(num);
    },
    parseFromGerman(value) {
      if (!value) return '';
      const normalized = value.replace(/\./g, '').replace(/,/g, '.');
      const num = parseFloat(normalized);
      
      return isNaN(num) 
        ? '' 
        : num.toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          });
    }
  }
}
</script>

使用方式 #

在父组件中直接用v-model绑定内部需要保留的英文格式值：

<!-- Vue 3 -->
<GermanNumberInput v-model="englishFormatNumber" />

<!-- Vue 2 -->
<GermanNumberInput v-model="englishFormatNumber" />

比如englishFormatNumber的值会是"1,000,000.00"，而输入框显示"1.000.000,00"。

方案优势 #

1. 原生API可靠：用Intl.NumberFormat做本地化处理，比手动写正则更准确，自动适配千分位和小数点规则，避免边界bug。
2. 解决第三方库问题：无需依赖maska、vue-number-format等库，避开了maska只能处理整数、vue-number-format版本不兼容报错的问题。
3. 体验优雅：输入过程中实时格式化，失焦时修正为标准格式，比单纯依赖focus/blur的旧方案更流畅，用户体验更好。
4. 双向绑定清晰：基于Vue的v-model规范实现，逻辑清晰，符合Vue组件设计理念。

内容的提问来源于stack exchange，提问作者coddust