docs/index.html

<!DOCTYPE html><html lang=en-us><head><meta charset=UTF-8><title>The Mask for Vue.js</title><meta name=viewport content="width=device-width,initial-scale=1"><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css><link as=style href=./css/app.84709d0f.css rel=preload><link as=script href=./js/app.afb19600.js rel=preload><link as=script href=./js/vendors~app.6445d3f9.js rel=preload><link href=./css/app.84709d0f.css rel=stylesheet></head><body><section class=page-header><h1 class=project-name>vue-the-mask</h1><h2 class=project-tagline>The Mask input for Vue.js</h2><a href=http://github.com/vuejs-tips/vue-the-mask class=btn>View on GitHub</a></section><section class=main-content><h2>The Mask input for Vue.js</h2><p>A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js</p><div id=app>loading...</div><h2>What about currency?</h2><p>We understand that money format is a totally different domain, which needs another specific component. You can use this one: <a href=https://vuejs-tips.github.io/v-money/ >v-money</a>.</p><h3>Install</h3><p class="language-shell highlighter-rouge"><pre class=highlight><code>yarn add vue-the-mask
or
npm i -S vue-the-mask
</code></pre></p><h3>Usage</h3><p class="language-javascript highlighter-rouge"><pre class=highlight><code>// Global
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

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

// Local Directive
import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}
</code></pre></p><h1>Properties</h1><table><thead><tr><th>Property</th><th>Required</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>false</td><td>String</td><td></td><td>Input value or v-model</td></tr><tr><td><b>mask</b></td><td><b>true</b></td><td>String, Array</td><td></td><td>Mask pattern</td></tr><tr><td>masked</td><td>false</td><td>Boolean</td><td>false</td><td>emit value with mask chars, default is raw</td></tr><tr><td>placeholder</td><td>false</td><td>String</td><td></td><td>Same as html input</td></tr><tr><td>type</td><td>false</td><td>String</td><td>'text'</td><td>Input type (email, tel, number, ...)</td></tr><tr><td>tokens</td><td>false</td><td>Object</td><td><a href=#tokens>tokens</a></td><td>Custom tokens for mask</td></tr></tbody></table><h1>Other Solutions</h1><ol><li><img src="https://img.shields.io/github/stars/nosir/cleave.js.svg?style=social&label=Star"> <a href=https://github.com/nosir/cleave.js>https://github.com/nosir/cleave.js</a></li><li><img src="https://img.shields.io/github/stars/text-mask/text-mask.svg?style=social&label=Star"> <a href=https://github.com/text-mask/text-mask>https://github.com/text-mask/text-mask</a></li><li><img src="https://img.shields.io/github/stars/igorescobar/jQuery-Mask-Plugin.svg?style=social&label=Star"> <a href=https://github.com/igorescobar/jQuery-Mask-Plugin>https://github.com/igorescobar/jQuery-Mask-Plugin</a></li><li><img src="https://img.shields.io/github/stars/fernandofleury/vanilla-masker.svg?style=social&label=Star"> <a href=https://github.com/fernandofleury/vanilla-masker>https://github.com/fernandofleury/vanilla-masker</a></li><li><img src="https://img.shields.io/github/stars/angular-ui/ui-mask.svg?style=social&label=Star"> <a href=https://github.com/angular-ui/ui-mask>https://github.com/angular-ui/ui-mask</a></li><li><img src="https://img.shields.io/github/stars/insin/inputmask-core.svg?style=social&label=Star"> <a href=https://github.com/insin/inputmask-core>https://github.com/insin/inputmask-core</a></li><li><img src="https://img.shields.io/github/stars/niksmr/vue-masked-input.svg?style=social&label=Star"> <a href=https://github.com/niksmr/vue-masked-input>https://github.com/niksmr/vue-masked-input</a></li><li><img src="https://img.shields.io/github/stars/probil/v-mask.svg?style=social&label=Star"> <a href=https://github.com/probil/v-mask>https://github.com/probil/v-mask</a></li><li><img src="https://img.shields.io/github/stars/moip/awesome-mask.svg?style=social&label=Star"> <a href=https://github.com/moip/awesome-mask>https://github.com/moip/awesome-mask</a></li><li><img src="https://img.shields.io/github/stars/the-darc/string-mask.svg?style=social&label=Star"> <a href=https://github.com/the-darc/string-mask>https://github.com/the-darc/string-mask</a></li><li><img src="https://img.shields.io/github/stars/romulobrasil/PureMask.js.svg?style=social&label=Star"> <a href=https://github.com/romulobrasil/PureMask.js>https://github.com/romulobrasil/PureMask.js</a></li><li><img src="https://img.shields.io/github/stars/devindex/vue-mask.svg?style=social&label=Star"> <a href=https://github.com/devindex/vue-mask>https://github.com/devindex/vue-mask</a></li></ol><h1>Currency</h1><ol><li><img src="https://img.shields.io/github/stars/vuejs-tips/v-money.svg?style=social&label=Star"> <a href=https://github.com/vuejs-tips/v-money>https://github.com/vuejs-tips/v-money</a></li><li><img src="https://img.shields.io/github/stars/plentz/jquery-maskmoney.svg?style=social&label=Star"> <a href=https://github.com/plentz/jquery-maskmoney>https://github.com/plentz/jquery-maskmoney</a></li><li><img src="https://img.shields.io/github/stars/autoNumeric/autoNumeric.svg?style=social&label=Star"> <a href=https://github.com/autoNumeric/autoNumeric>https://github.com/autoNumeric/autoNumeric</a></li><li><img src="https://img.shields.io/github/stars/flaviosilveira/Jquery-Price-Format.svg?style=social&label=Star"> <a href=https://github.com/flaviosilveira/Jquery-Price-Format>https://github.com/flaviosilveira/Jquery-Price-Format</a></li><li><img src="https://img.shields.io/github/stars/kevinongko/vue-numeric.svg?style=social&label=Star"> <a href=https://github.com/kevinongko/vue-numeric>https://github.com/kevinongko/vue-numeric</a></li></ol><p><a href="https://github.com/vuejs-tips/vue-the-mask/issues/new?title=Library+Suggestion">Suggest another one here.</a></p></section><script type=text/javascript src=./js/vendors~app.6445d3f9.js></script><script type=text/javascript src=./js/app.afb19600.js></script></body></html>