如何在 vue 中使用文本掩码中的 createAutoCorrectedDatePipe 和 createNumberMask 功能？答案

【问题标题】：How to use createAutoCorrectedDatePipe and createNumberMask feature from text-mask in vue?如何在 vue 中使用文本掩码中的 createAutoCorrectedDatePipe 和 createNumberMask 功能？
【发布时间】：2018-02-21 23:47:44
【问题描述】：

我正在使用这个很棒的 vue 组件 text-mask，它为我用于输入日期时间格式和数字格式的输入掩码提供了一个简单而优雅的解决方案。我可以根据这样的文档使其大部分工作

<template>
  <div>
    <label>Phone Number</label>
    <masked-input
      type="text"
      name="phone"
      class="form-control"
      v-model="phone"
      :mask="['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]"
      :guide="false"
      placeholderChar="#">
    </masked-input>
  </div>
</template>

<script>
  import MaskedInput from 'vue-text-mask'

  export default {
    name: 'name',

    components: {
      MaskedInput
    },

    data () {
      return {
        phone: ''
      }
    }
  }
</script>

但它只提供一些基本功能，我需要更多类似的日期时间输入，我想确保月份（仅 12）和日期（根据月份为 30 或 31）的最大数量，并且文本中有这些功能-充当addons的掩码

但我无法找到或理解如何使其在 vue 中工作。我试图在 github 上创建一个问题，但看到那里的活动我认为我的问题永远不会得到回答。所以我觉得如果我在这里问你们所有人会快得多。

也许有人曾经使用过这个，或者对在 vue 中工作的输入掩码组件有其他更好的建议？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

这对我有用：

我在vue组件的“data()”部分创建了“createNumberMask”函数

NumberMaskTestComponent.js 文件

import MaskedInput from 'vue-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

export default Vue.component('number-mask-test-component', {
    name: 'NumberMaskTestComponent',
    data () {
        return {
            numberMask: createNumberMask({
                prefix: '$',
                allowDecimal: true,
                decimalLimit: 2, 
                integerLimit: 1
            }),
            testNumber: '123.3445'
        }
    },
    components: {
        MaskedInput
    }
})

NumberMaskTestComponent.vue 文件

<template>
    <div>

        <masked-input
            type="text"
            name="numberTest"
            class="form-control"
            v-model="testNumber"
            :mask="numberMask"
            :guide="false"
            placeholderChar="#">
        </masked-input>

    </div>
</template>

<script lang="ts" src="./NumberMaskTestComponent.js">
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

【讨论】：