https://github.com/jucesarsilva/vuetify-masks-br
Directives for Vue 2, precisely it's for use with Vuetify UI, but you can use with any other components.
https://github.com/jucesarsilva/vuetify-masks-br
masks masks-br vue2 vuejs2 vuetify
Last synced: 7 months ago
JSON representation
Directives for Vue 2, precisely it's for use with Vuetify UI, but you can use with any other components.
- Host: GitHub
- URL: https://github.com/jucesarsilva/vuetify-masks-br
- Owner: jucesarsilva
- License: mit
- Created: 2018-07-25T23:26:55.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:36:12.000Z (almost 3 years ago)
- Last Synced: 2025-02-28T08:43:31.482Z (8 months ago)
- Topics: masks, masks-br, vue2, vuejs2, vuetify
- Language: JavaScript
- Homepage:
- Size: 3.53 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuetify-masks-br
The vuetify-mask-br was born to format v-text-field into several br masks. But you can use it in any another component, the directives changes v-model by manipulate vnode.context. If want use this approach, fell free to apply in custom directives.
# Demo
[Demo](https://jucesarsilva.github.io/vuetify-masks-br/)
## install
```sh
npm install vuetify-masks-br --save
```
## algoritm to manipulate model value from directive
```js
/**
* Directive manipulate v-model (must be an object)
*/
export const {
update (el, binding, vnode) {
//split v-model expression to get object levels
const levels = binding.expression.split('.')
//if v-model have one level
if (levels.length === 1) {
vnode.context[levels[0]] = vnode.context[levels[0]] //apply change in v-model here
}
//get level of v-model object
else {
levels.reduce((obj, key) => {
//apply change in v-model here
if (key === levels[levels.length - 1]) obj[key] = obj[key]
return obj[key]
}, vnode.context)
}
}
}
```
You will need [Node.js](https://nodejs.org/) to run.
You will need [Vuetify](https://vuetifyjs.com) to run.
```sh
$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g
```
## how to use
```js
// main.js
import { trim, cnpjcpf, cnpj, cpf, rg, phone, cep } from 'vuetify-masks-br'
Vue.directive('rg', rg)
Vue.directive('cpf', cpf)
Vue.directive('cep', cep)
Vue.directive('trim', trim)
Vue.directive('cnpj', cnpj)
Vue.directive('phone', phone)
Vue.directive('cnpjcpf', cnpjcpf)
new Vue({
render: h => h(App)
}).$mount('#app')
```
```vue
import { isCPF, isCNPJ } from 'vuetify-masks-br'
export default {
data () {
return {
profile.document: '',
documentRules: [
v => !!v || "CPF/CNPJ é um campo obrigatório.",
v => isCPF(v) || isCNPJ(v) || 'CPF/CNPJ não é válido.'
]
}
}
}
```
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Unit Tests
```
npm run test
```