@1naturalway/vue-the-mask 中文文档教程

Question

The Mask

专为 Vue.js

Docs and Demo

JsFiddle

Install

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

Usage (two flavors)

Global

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

Local (as directive)

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

Properties

Property	Required	Type	Default	Description
value	false	String		Input value or v-model
mask	true	String, Array		Mask pattern
masked	false	Boolean	false	emit value with mask chars, default is raw
placeholder	false	String		Same as html input
type	false	String	'text'	Input type (email, tel, number, …)
tokens	false	Object	tokens	Custom tokens for mask

What about money?

我们知道货币格式是一个完全不同的领域，它需要另一个特定的组件。 您可以使用 https://github.com/vuejs-tips/v-money

Other Solutions

1. https://github.com/nosir/cleave.js
2. https://github.com/text-mask/text-mask
3. https://github.com/igorescobar/jQuery-Mask-Plugin
4. https://github.com/fernandofleury/vanilla-masker
5. https://github.com/angular-ui/ui-mask
6. https://github.com/insin/inputmask-core
7. https://github.com/niksmr/vue-masked-input
8. https://github.com/probil/v-mask
9. https://github.com/moip/awesome-mask
10. https://github.com/the-darc/string-mask
11. https://github.com/romulobrasil/PureMask.js
12. https://github.com/devindex/vue-mask

Currency

1. https://github.com/vuejs-tips/v-money
2. https://github.com/plentz/jquery-maskmoney
3. https://github.com/flaviosilveira/Jquery-Price-Format
4. https://github.com/kevinongko/vue-numeric

Suggest another one here

Contribution

您可以通过提交 问题 和/或拉取请求。 这个项目是测试驱动的，所以请记住，每一个变化和新特性都应该被测试覆盖。 你的名字将被添加到名人堂 ;)

License

此项目已根据 MIT License 获得许可