awesome-mask
The awesome-mask runs with Vue.js
and uses the vanilla-masker
to make your form awesome with masks.
You can use patterns like:
<input type="text" v-mask="'99/99'" />
// Turns 1224 in 12/24
<input type="text" v-mask="'(99) 9999-9999'" />
// Turns 1149949944 in (11) 4994-9944
<input type="text" v-mask="'AAA-9999'" />
// Turns ABC1234 in ABC-1234
You can also format money:
<input type="text" v-mask="'money'" />
// Turns 123499 in 1.234,99
This directive can also receive a object from your data
like:
<template>
<p>
<input v-mask="mask" type="text">
</p>
</template>
<script>
export default {
data() {
return {
mask: '999.999.999-99'
}
}
}
</script>
Sample using import:
<script>
import Component from './components/Component'
import AwesomeMask from 'awesome-mask'
export default {
name: 'app',
components: {
Component
},
directives: {
'mask': AwesomeMask
}
}
</script>
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-cli: ^6.18.0babel-core: ^6.22.1babel-loader: ^6.3.2babel-plugin-istanbul: ^3.1.2babel-plugin-transform-runtime: ^6.22.0babel-preset-es2015: ^6.22.0babel-preset-latest: ^6.22.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chai: ^3.5.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1cross-env: ^3.1.4css-loader: ^0.26.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3inject-loader: ^2.0.1karma: ^1.4.1karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.2karma-sinon-chai: ^1.2.4karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.26karma-webpack: ^2.0.2lolex: ^1.5.2mocha: ^3.2.0opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.1.0phantomjs-prebuilt: ^2.1.14rimraf: ^2.6.0semver: ^5.3.0sinon: ^2.1.0sinon-chai: ^2.8.0url-loader: ^0.5.7vue-loader: ^11.0.0vue-style-loader: ^2.0.0vue-template-compiler: ^2.2.1webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1