使用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创建一个遮罩组件