文字遮盖添加器

这些外加剂是随时可以使用的管子和口罩,可以和"文字面具"一起使用.

安装

npm i text-mask-addons --save

面具

这些可以作为一个 mask 改为文字面具.

createNumberMask

createNumberMask 返回 a numberMask 函数将格式化用户输入为货币. createNumberMask 接受以下按键的对象:

1. prefix (字符串):在金额之前要显示什么. 默认为 '$'。 。 。 .
2. suffix (字符串):金额后要显示什么. 默认为空字符串 .
3. includeThousandsSeparator (boolean):是否要分开上千个. 默认为 true。 。 。 .
4. thousandsSeparatorSymbol (字符串):与它分开上千个字符. 默认为 ','。 。 。 .
5. allowDecimal (boolean):是否允许用户随金额输入分数. 默认为 false。 。 。 .
6. decimalSymbol (字符串):将起到小数点作用的字符. 默认为 '.'
7. decimalLimit (数字):小数后允许多少位数字。 默认为 2
8. integerLimit (数字):限制整数的长度. 默认为 null 无限制
9. requireDecimal (boolean):是否总是包括小数点和小数点的占位符 整数之后。 默认为 false。 。 。 .
10. allowNegative (布尔):是否允许负数. 默认为 false
11. allowLeadingZeroes (boolean):是否允许引导零。 默认为 false

使用量

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
  prefix: '',
  suffix: ' $' // This will put the dollar sign at the end, with a space.
})

// ...then pass `numberMask` to the Text Mask component as the mask

emailMask

emailMask 格式化用户输入为电子邮件地址.

使用量

import emailMask from 'text-mask-addons/dist/emailMask'

// ...then pass `emailMask` to the Text Mask component as the mask

技术侧记: 尽管 emailMask 作为 mask,它实际上是由两个 mask (单位:千美元) pipe 捆绑 一起为方便. 文本遮罩组件知道如何解开并分离 pipe 财务报告和审定财务报表 mask 函数来使用它们.

管道

这里的这些功能可以作为一个 pipe 改为文字面具.

createAutoCorrectedDatePipe

这个 createAutoCorrectedDatePipe 返回 a autoCorrectedDatePipe,可以帮助用户输入日期. 这个 createAutoCorrectedDatePipe 接受指定日期格式的字符串和带有以下密钥的对象:

1. minYear (数目):日期栏允许的最低年数 mask。 。 。 .
2. maxYear (数目):日期字段中允许的最大年份 mask。 。 。 .

例如,如果用户输入一个值 大于 1 在每月的第一个时段,它附加 0 对它。 这是 4 => 04。它做类似的事情 对于 白天档.

它还阻止用户输入无效天数或月份, 如 33/44。 。 。 .

对于 createAutoCorrectedDatePipe 文本遮罩组件需要 配置为 keepCharPositions 设置为 true。 。 。 .

使用量

import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'

const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM')
// As you can see in the line above, you can pass a string argument to `createAutoCorrectedDatePipe` 
// to give it the order of day, month, year, hour and minute in your `mask`.

// ...now you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`