Vue项目中Maska格式化小数格式异常，寻求解决方向

你的核心问题是Maska未正确应用de-DE locale的数字格式化规则，导致带小数的数值被错误解析。结合你的代码和测试用例，以下是具体修正方案：

1. 修正Maska配置结构 #

你当前的配置缺少mask: 'number'字段，这是Maska识别数字格式化模式的关键——没有它，指令无法正确读取number配置项的规则，进而错误地将小数部分当成整数位处理。

修正后的配置：

<script setup lang="ts">
import { vMaska } from "maska/vue";

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  amount: {
    type: Number
  },
})

// 添加mask字段指定格式化类型
const options = {
  mask: 'number',
  number:{
    fraction: 2,
    locale: 'de-DE'
  },
};
</script>

2. 修复测试用例的参数错误 #

第二个测试用例中，你传递的props参数名是betrag，但组件定义的props是amount，导致组件未接收到正确的测试数值，测试必然失败。

修正后的测试代码：

it('with fraction', () => {
  cy.mount(AmountField, {
    propsData: {
      amount: 26717.01, // 替换betrag为amount
      editable: true,
      disabled: true,
      id: "amountField"
    }
  } as any);
  cy.get("#amountField").find('input').should('have.value', '26.717,01')
})

3. 修正数值转换逻辑 #

@maska事件中，直接将带逗号（de-DE小数分隔符）的unmasked字符串转为Number会得到NaN，需要先将逗号替换为小数点再转换。

修正后的事件处理：

<template>
  <v-text-field
    variant="outlined"
    :clearable=false
    density="compact"
    auto-grow
    rows="1"
    :model-value="props.amount"
    v-maska="options"
    v-bind="$attrs"
    @maska="(event) => {
      const unmasked = event.detail.unmasked;
      // 替换德语小数分隔符为标准小数点后转数字
      const numericValue = Number(unmasked.replace(',', '.'));
      emit('update:modelValue', numericValue);
    }"
  />
</template>

完成以上修正后，带小数的数值应该会正确格式化为26.717,01，同时测试用例也能正常通过。

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