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

Posted 2023-02-16

【中文标题】如何在 vuetify 文本字段中使用掩码？

【英文标题】：How to use mask in vuetify text-field?

【发布时间】：2018-05-31 03:49:00

【问题描述】：

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

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

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

【参考方案1】：

在 Vuetify 中删除了 2 个掩码

---

回答 Vuetify 版本

你可以使用return-masked-valueprop

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

---

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

【讨论】：

不支持掩码并从 vue 2.0.0 的库中删除

@zaqpiotr 这与 Vuetify 相关，而不是 Vue 本身。 Vuetify 支持掩码：vuetifyjs.com/en/components/…, v15.vuetifyjs.com/en/components/text-fields#masks

@escapedcat zaqplotr 是对的。似乎现在有一个新的插件 vue-the-mask！

显然 vuetify 2 由于某种原因确实不支持掩码。

【参考方案2】：

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

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

npm install v-mask

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

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

然后在你的组件中使用v-mask添加掩码：

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

【讨论】：

如何从中获取未屏蔽的值？

@AhmadBudairi 目前似乎不可能：github.com/probil/v-mask/issues/42