V-SLIM-MASK
A incredibly LIGHTER input mask directive and filter compatible with Vue 3
Browsers support
IE / Edge |
Firefox |
Chrome |
Chrome Android |
Safari |
iOS Safari |
Opera |
---|---|---|---|---|---|---|
IE9>, Edge | 6> | 1> | 18> | 3.1> | 2> | 12> |
Instalation
$ yarn add v-slim-mask or $ npm install --save v-slim-mask
// Import the directive inside your main.(js|ts)
or
// using a custom directive const VMASKCustomDirective =
Config
Tokens
Token | Pattern | Description |
---|---|---|
N | [0-9] | numbers only |
S | [a-z] | [A-Z] | string a-z or A-Z only |
A | [0-9] | [a-z] | [A-Z] | alphanumeric only |
C | [^ ] | required char |
X | .* | optional char |
Modifiers
Modifier | Default | Description |
---|---|---|
unmask | false | unmask the return value to the model |
parseint | false | parse to int the return value to the model |
init-change | false | apply the mask to the model on start |
hide-on-empty | false | hide the mask if no value |
Usage
Using native input element
// Inside your .vue component // Entry => 99999999999 | cpf => "999.999.999-99"
Using in a parent input element
// Entry => 99999999999 | cpf => "999.999.999-99"
// BaseInputComponent.vue Base label
Using Composition API
// using reactive // Entry => 99999999999 | cpf => "999.999.999-99"
// using ref // Entry => 99999999999 | cpf => "999.999.999-99"
// BaseInputComponent.vue Base label
Using helper functions
<script> ; computed: { return } </script>
Demo
Vue 3.0.0 Sample
https://codesandbox.io/s/vue-3-v-slim-mask-wy3po?file=/src/App.vue