Question

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

例如，当我输入＆＃34; 000.000.000-00＆＃34;时，表单发布的值为＆＃34; 00000000000＆＃34;。如何保留格式值？

$(".submit").click(function(event){   

  $(".form").submit(req.body); 
  $(this).attr("class", "submit btn btn-success"); 
  event.preventDefault();                                                                                           
});

Answer 1

您可以使用return-masked-value prop

<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使用轻量级软件包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"
/>

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

2 个答案: