v-mask-directive-filter
v1.0.13
Published
A input mask directtive and filter compatible with vue 2.x|3.x and vuetify (~1.6kb)
Downloads
80
Maintainers
Readme
V-MASK-DIRECTIVE-FILTER
Support to Vue 3 available here
A incredibly LIGHTER input mask directive and filter compatible with Vue 2 and Vuetify 2
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-mask-directive-filter
or
$ npm install --save v-mask-directive-filter
Directive
// Import the directive inside your main.(js|ts)
import { VMaskDirective } from 'v-mask-directive-filter'
Vue.directive('mask', VMaskDirective)
or
// using a custom directive
import { getCustomMaskDirective } from 'v-slim-mask'
const VMASKCustomDirective = getCustomMaskDirective({
'#': /[0-9]/,
Z: /[a-z]|[A-Z]/,
})
Vue.directive('mask', VMASKCustomDirective)
Filter
// Import the filter inside your main.(js|ts)
import { VFilterDirective } from 'v-mask-directive-filter'
Vue.filter('mask', VFilterDirective)
Config
Tokens
| Token | Pattern | Description | | ----- | ----------------------- | ----------------- | | N | [0-9] | numbers only | | S | [a-z] | [A-Z] | string 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 | set a initial value to the model on start | | hide-on-empty | false | hide the mask if no value |
Usage
Using native input element
// Inside your .vue component
<template>
<input v-model="cpf" v-mask="'NNN.NNN.NNN-NN'" />
</template>
// Entry => 99999999999 | cpf => "999.999.999-99"
Using v-text-field of Vuetify
// Inside your .vue component
<template>
<v-text-field v-mask.unmask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>
// Entry => 83999998888 | phoneNumber => "83999998888"
<template>
<v-text-field v-mask="'(NN) NNNNN - NNNN'" v-model="phoneNumber" />
</template>
// Entry => 83999998888 | phoneNumber => "(83) 99999 - 8888"
Using vue 2.x filter
// Inside your .vue component
<span> {{ '83999998888' | mask('(NN) NNNNN - NNNN') }} </span>
// This will result => (83) 99999 - 8888
Using helper functions
<script>
import { maskTransform, unmaskTransform } from 'v-mask-directive-filter'
export default Vue.extends({
computed: {
phoneFormatted(val) {
return maskTransform(val, '(NN) NNNNN - NNNN')
}
}
})
</script>
Demo
vue 2.x + vuetify 2.x sample https://codesandbox.io/s/flamboyant-kilby-xv8hz