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

Question

我正在尝试使用text-field组件的mask属性,如下例所示.在视图中,它就像一个魅力,但是,当发布表单时,掩码格式不保留值.

例如,当我键入"000.000.000-00"时,表单发布的值为"00000000000".如何保持格式值？

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

Answer 1

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

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

请注意,目前v0.17 存在返回未屏蔽初始值的错误.

vue 2.0.0 不支持 mask 并从库中删除 (9认同)
@escapedcat zaqplotr 是对的。似乎现在有一个新的插件 vue-the-mask 了！ (3认同)
@zaqpiotr这与Vuetify有关，与Vue本身无关。Vuetify支持遮罩：https://vuetifyjs.com/en/components/text-fields#masks-using-vue-the-mask，https://v15.vuetifyjs.com/en/components/text-fields#masks (2认同)

Answer 2

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

安装 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"
/>