项目作者: jucesarsilva

项目描述 :
Directives for Vue 2, precisely it's for use with Vuetify UI, but you can use with any other components.
高级语言: JavaScript
项目地址: git://github.com/jucesarsilva/vuetify-masks-br.git
创建时间: 2018-07-25T23:26:55Z
项目社区:https://github.com/jucesarsilva/vuetify-masks-br

开源协议:MIT License

下载


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

install

  1. npm install vuetify-masks-br --save

algoritm to manipulate model value from directive

  1. /**
  2. * Directive manipulate v-model (must be an object)
  3. */
  4. export const {
  5. update (el, binding, vnode) {
  6. //split v-model expression to get object levels
  7. const levels = binding.expression.split('.')
  8. //if v-model have one level
  9. if (levels.length === 1) {
  10. vnode.context[levels[0]] = vnode.context[levels[0]] //apply change in v-model here
  11. }
  12. //get level of v-model object
  13. else {
  14. levels.reduce((obj, key) => {
  15. //apply change in v-model here
  16. if (key === levels[levels.length - 1]) obj[key] = obj[key]
  17. return obj[key]
  18. }, vnode.context)
  19. }
  20. }
  21. }

You will need Node.js to run.

You will need Vuetify to run.

  1. $ yarn global add @vue/cli
  2. // OR
  3. $ npm install @vue/cli -g

how to use

  1. // main.js
  2. import { trim, cnpjcpf, cnpj, cpf, rg, phone, cep } from 'vuetify-masks-br'
  3. Vue.directive('rg', rg)
  4. Vue.directive('cpf', cpf)
  5. Vue.directive('cep', cep)
  6. Vue.directive('trim', trim)
  7. Vue.directive('cnpj', cnpj)
  8. Vue.directive('phone', phone)
  9. Vue.directive('cnpjcpf', cnpjcpf)
  10. new Vue({
  11. render: h => h(App)
  12. }).$mount('#app')
  1. <!-- App.vue -->
  2. <template>
  3. <v-text-field
  4. label="CNPJ/CPF"
  5. :rules="documentRules"
  6. v-model="profile.document"
  7. v-cnpjcpf:model="profile.document">
  8. </v-text-field>
  9. </template>
  10. <script>
  11. import { isCPF, isCNPJ } from 'vuetify-masks-br'
  12. export default {
  13. data () {
  14. return {
  15. profile.document: '',
  16. documentRules: [
  17. v => !!v || "CPF/CNPJ é um campo obrigatório.",
  18. v => isCPF(v) || isCNPJ(v) || 'CPF/CNPJ não é válido.'
  19. ]
  20. }
  21. }
  22. }
  23. </script>

Project setup

  1. npm install

Compiles and hot-reloads for development

  1. npm run serve

Compiles and minifies for production

  1. npm run build

Lints and fixes files

  1. npm run lint

Unit Tests

  1. npm run test