使用vue创建一个遮罩组件

语音输入蒙版 (vue-input-mask)

Yet another Vue component for input masking. Based on react-input-mask.

用于输入掩膜的另一个Vue组件。 基于react-input-mask

安装 (Install)

yarn add vue-input-mask
or
npm i -S vue-input-mask

物产 (Properties)

mask ： string (mask : string)

Mask string. Default format characters are: 9: 0-9 a: A-Z, a-z *: A-Z, a-z, 0-9

掩码字符串。 默认格式字符为： 9 ： 0-9 a ： AZ, az * ： AZ, az, 0-9

Any character can be escaped with a backslash. It will appear as a double backslash in JS strings. For example, a German phone mask with unremoveable prefix +49 will look like mask="+4\9 99 999 99" or mask={'+4\\9 99 999 99'}

任何字符都可以使用反斜杠转义。 它将在JS字符串中显示为双反斜杠。 例如，前缀为+49的德国电话面罩将看起来像mask="+4\9 99 999 99"或mask={'+4\\9 99 999 99'}

maskChar ： string (maskChar : string)

Character to cover unfilled parts of the mask. Default character is "_". If set to null or empty string, unfilled parts will be empty as in ordinary input.

覆盖面罩未填充部分的字符。 默认字符为“ _”。 如果设置为null或空字符串，则与普通输入一样，未填充的部分将为空。

formatChars ： object (formatChars : object)

Defines format characters with characters as a keys and corresponding RegExp strings as a values. Default ones:

定义格式字符，其中字符作为键，而相应的RegExp字符串作为值。 默认值：

{'9': '[0-9]','a': '[A-Za-z]','*': '[A-Za-z0-9]'
}

alwaysShowMask ： boolean (alwaysShowMask : boolean)

Show mask when input is empty and has no focus.

输入为空且没有焦点时显示遮罩。

例 (Example)

import Vue from 'vue';
import InputMask from 'vue-input-mask';Vue.component('input-mask', InputMask)

In template:

在模板中：

<input-mask v-model="value" mask="+4\9 99 999 99" maskChar=" "></input-mask>

去做 (Todo)

• [ ] Refactoring

  []重构

• [ ] Tests

  []测试

• [ ] Implementation of componentWillReceiveProps

  [] componentWillReceiveProps实现

翻译自: https://vuejsexamples.com/yet-another-vue-component-for-input-masking/

使用vue创建一个遮罩组件