ODG Vue Mask

This plugin implements ODGMask in the vuejs guideline "v-odg-mask" ,
the operation is similar to ODGMaks ...

;
Get Started Veja no GitHub

Get Started

Installation

Package is installable via npm

npm install @odg/odg-vue-mask --save
yarn add @odg/odg-vue-mask --save

install via browser

<script src="https://odgodinho.github.io/ODG-Vue-Mask/js/ODG-Vue-Mask.js"></script>
<script src="js/ODG-Vue-Mask.js"> </script>


Example

CPF: 000.000.000-00 

<input type="tel" placeholder="000.000.000-00" v-odg-mask="'000.000.000-00'" v-model="cpf1" />
Teste: 

                

            


            
            

                

                    

                         CNPJ: 
                         00.000.000/0000-00 
                    

                    
<input type="tel" placeholder="00.000.000/0000-00" v-odg-mask="'00.000.000/0000-00'" v-model="cnpj1" />

                

                

                    
 Teste: 

                    
                    

                

            


            
            

                

                    

                         Phone area Code: 
                         (00) 0000-0000 
                    

                    
<input type="text" placeholder="(00) 0000-0000" v-odg-mask="'(00) 0000-0000'" v-model="phone" />

                

                

                    
 Teste: 

                    
                    

                

            



            
            

                

                    

                         Multiple Mask: 
                         Phone (00) 0 0000-0000 and (00) 0000-0000 
                    

                    
<input type="tel" placeholder="Phone" v-odg-mask="mask_multiple_phone"  v-model="phone_sp"  />
...
new Vue({
    data() {
        return {
            mask_multiple_phone: ['(00) 0000-0000', '(00) 0 0000-0000'],
        }
    },
})
...               


                

                

                    
 Teste: 

                    
                    

                

            


            
            

                

                    

                         CPF and CNPJ 
                         000.000.000-00 || 00.000.000/0000-00  
                    

                    
<input type="text" placeholder="CPF/CNPJ" v-odg-mask="[ '000.000.000-00', '00.000.000/0000-00' ]" v-model="cpf_cnpj" />

                

                

                    
 Teste: 

                    
                    

                

            


            
INFO:


            

                //! the 'v-odg-mask' directive can be passed an array or string element directly to it. 

                // if you don't use any vue attributes in your input,  click here  for the vanilla demo. 
            


            






            
Save Object Maks element

            
            

                //? to save the entire "ODGMask" element in vuejs it is necessary to inform an object in v-model and .value
            


            
            

                

                    

                         CPF and CNPJ 
                         000.000.000-00 || 00.000.000/0000-00
                    

                    
<input type="text" placeholder="CPF/CNPJ" v-odg-mask="[ '000.000.000-00', '00.000.000/0000-00' ]"  v-model="saveObjectTest.value" />
...
new Vue({
    data() {
        return {
            saveObjectTest: {
                value: ''
            },
        }
    },
})
...   

 
                    // v-model ends with ".value" to save the object
                

                

                    
 Teste: 

                    
                    

                

            



            
On Change Mask




            
            

                

                    

                         CPF and CNPJ ( onChange ) 
                         Phone (00) 0 0000-0000 and (00) 0000-0000 
                    

                    
<input type="text" placeholder="CPF/CNPJ ( onChange )" v-odg-mask="[ '000.000.000-00', '00.000.000/0000-00' ]" :value="cpf_cnpj_change.value"  @change="($event) => {cpf_cnpj_change.value = $event.target.value;}" />
 
                

                

                    
 Teste: 

                    
                    

                

            


        




        

            

                Options attribute ODGMask:
            

            

            
<input type="tel" placeholder="CPF" v-odg-mask="'000.000.000-00'" :odg-vue-mask-options="customOptions" v-model="cpf1" />
...
import ODGMask from '@odg/odg-mask';
new Vue({
    data() {
        return {
            cpf1: '',
            customOptions: {
                tokens: {
                    ...ODGMask.defaultTokens,
                    "G": {
                        pattern: /[a-zA-Z0-9]/u,
                        transform: (el) => String(el).toLocaleLowerCase(), // transforms the letter before inserting
                        optional: true, // is optional?
                        nextElement: true, // should the action be performed on the next element?
                        noMask: true // this element should not be treated as a token
                    }
                }
            }
        }
    },
})
...   
                
 

            
for more information read the ODGMask vanilla documentation  Click here