使用vue創(chuàng)建一個遮罩組件

語音輸入蒙版 (vue-input-mask)

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

用于輸入掩膜的另一個Vue組件。 基于react-input-mask

View demo 查看演示 Download Source 下載源

安裝 (Install)

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

物產(chǎn) (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

掩碼字符串。 默認(rèn)格式字符為： 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'}

任何字符都可以使用反斜杠轉(zhuǎn)義。 它將在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.

覆蓋面罩未填充部分的字符。 默認(rèn)字符為“ _”。 如果設(shè)置為null或空字符串，則與普通輸入一樣，未填充的部分將為空。

formatChars ： object (formatChars : object)

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

定義格式字符，其中字符作為鍵，而相應(yīng)的RegExp字符串作為值。 默認(rèn)值：

{'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

  []重構(gòu)

• [ ] Tests

  []測試

• [ ] Implementation of componentWillReceiveProps

  [] componentWillReceiveProps實現(xiàn)

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

使用vue創(chuàng)建一個遮罩組件

總結(jié)

以上是生活随笔為你收集整理的使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。