在 vuetify 2 和 v-mask 中创建货币掩码

Question

我目前在我的 vuetify 2 项目中使用 v-mask 的 cdn 版本。我被要求添加货币掩码，因为在美国，我们倾向于使用千位逗号分隔。我正在努力让它发挥作用，因为我的数字范围可以从数万到数千亿不等。我想我可以使用 v-mask 和 mask amount 来包罗万象，但它似乎会产生错误。这是我的实现：

  <v-text-field
    v-model="totalDollarAmount"
    v-mask="'###,###,###,###,###.##'"
    label="(4) Total Dollar Amount"
    type="number"
    prefix="$"
    outlined
    required
    :rules="[(v) => !!v || 'Total Dollar Amount is required']"
    :error-messages="totalDollarAmountWarning"
  ></v-text-field>

它产生的错误如下：

v-mask.min.js:1 The specified value "758,850,000," cannot be parsed, or is out of range.

问题是该值可能不会占据所有###，因此绘制错误。这可能需要通过除以 1000 或以某种方式使用模数来动态实现，但这似乎过于复杂。

Answer 1

TL;博士; >>> 从 HTML 代码段中删除

type="number"

。

问题在于

v-mask

和

<input type='number' />

的组合。 HTML 输入本身不认为

123,000.00

是有效数字，因此它会被重置。

如果您不介意从

type

中删除

<v-text-field>

属性，那么您可以按照 @Yogi 的示例来完成工作。或者，您可以从this fiddle复制/粘贴屏蔽功能，并避免额外的依赖，这些依赖可能已经比您实际需要的更多了。

就我个人而言，我在 Vuetify 的输入字段周围有自己的包装器，因此我可以自定义 ↑/↓ 箭头、格式、自定义精度等。虽然这是一种粗暴的方法（我的包装器超过 210 LOC），但它也会为您提供最大的灵活性，让您适应未来的需求。请注意，要正确地进行表单验证会很棘手，而且我花了几个月的时间来修复错误:(无论如何，我的代码库有点原创（Pug + TS 装饰器），所以除非有人好意地要求，否则我不会粘贴它。