vuetify-masks-br
Directives for Vue 2, precisely it's for use with Vuetify UI, but you can use with any other components.
Last updated a year ago by jucesarsilva .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vuetify-masks-br 
SYNC missed versions from official npm registry.

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.

install

npm install vuetify-masks-br --save

algoritm to manipulate model value from directive

/**
 * 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 to run.

You will need Vuetify to run.

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

how to use

// 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')
<!-- App.vue -->
<template>
    <v-text-field
        label="CNPJ/CPF"
        :rules="documentRules"
        v-model="profile.document"
        v-cnpjcpf:model="profile.document">
    </v-text-field>
</template>

<script>
    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.'
                ]
            }
        }
    }
</script>

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

Current Tags

  • 0.0.8                                ...           latest (a year ago)

6 Versions

  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (4)
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |