如何在 vuetify 文本字段中使用掩码？

Question

我正在尝试使用文本字段组件的掩码 属性，如下例所示。在视图中，这就像一个魅力，但是，当发布表单时，掩码格式不保留值。

例如，当我键入“000.000.000-00”时，表单发布的值为“00000000000”。如何保留格式值？

<v-text-field
  :value="currentValue" 
  @input="handleInput"
  :mask="###.###.###-##"/>

Answer 1

在 Vuetify 2 中移除了掩码

---

Vuetify 版本 < 2.0.0 的答案

你可以使用return-masked-value道具

<v-text-field
    :value="currentValue" 
    return-masked-value
    mask="###.###.###-##"
    @input="handleInput"
></v-text-field>

---

请注意，目前在 v0.17 there is a bug 中返回未屏蔽的初始值。

Answer 2

在 Vuetify 2 中，他们删除了 mask 属性。但是，有第三方解决方案。您可以使用轻量级包 v-mask by probil:

安装 v-mask 包（解压大小 71.7 kB）

npm install v-mask

在您的 main.js 中导入包并将其添加为指令：

import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

然后在您的组件中使用 v-mask:

添加掩码

<v-text-field
  v-mask="'###.###.###-##'"
  :value="currentValue" 
  @input="handleInput"
/>