【问题标题】:How to use mask in vuetify text-field?如何在 vuetify 文本字段中使用掩码?
【发布时间】:2018-05-31 03:49:00
【问题描述】:

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

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

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

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案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 中返回未屏蔽的初始值。

    【讨论】:

    【解决方案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"
    />
    

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-08-27
    • 2018-10-19
    • 2021-01-13
    • 2019-04-16
    • 1970-01-01
    • 2020-02-05
    • 2021-03-12
    • 1970-01-01
    相关资源
    最近更新 更多