# :abcd: Vue input mask [](https://www.npmjs.com/package/v-mask)  [](https://www.npmjs.com/package/v-mask) [](https://raw.githubusercontent.com/probil/v-mask/master/LICENSE) [](https://vuejs.org/) [](https://www.jsdelivr.com/package/npm/v-mask) [](https://github.com/DevExpress/testcafe) > Biblioteca enxuta baseado no [text-mask-core](https://github.com/text-mask/text-mask/tree/master/core) (~5kb) apenas diretiva. sem dependências.
## :art: Playground na Web - https://codesandbox.io/s/m3q1m5yp9x ( playground interativo com webpack e ESM) - https://jsfiddle.net/probil/c6fjjzn6/ ( playground interativo simples com UMD) - https://v-mask-demo.netlify.com/ ( Demo v-mask ) ## :heavy_check_mark: Navegadores suportados | |  |  |  |  |  |  |  |  | --- | --- | --- | --- | --- | --- | --- | --- | --- | | 74+ :heavy_check_mark: | 66+ :heavy_check_mark: | 12+ :heavy_check_mark: | 46+ :heavy_check_mark: | 17+ :heavy_check_mark: | 11+ :heavy_check_mark: | 12+ :heavy_check_mark: | 67+ :heavy_check_mark: | 8.2+ :heavy_check_mark: Suportamos apenas navegadores com estatísticas de uso global superiores a 1%, última versão 2 de cada navegador, mas não navegadores inativos. A biblioteca pode funcionar em navegadores antigos, mas não garantimos isso. Você pode precisar de polyfills adicionais para fazê-lo funcionar. ## :cd: Intalação Esta versão requer o Vue 2.X. Se você está utilizando o Vue 1.X [clique aqui](https://github.com/probil/v-mask/tree/vue-1.x). ```sh npm install v-mask ``` ## Inicialização ### ES2015 (Webpack/Rollup/Browserify/etc) ```javascript import Vue from 'vue' // usar o plugin import VueMask from 'v-mask' Vue.use(VueMask); // usar a diretiva import { VueMaskDirective } from 'v-mask' Vue.directive('mask', VueMaskDirective); // usar apenas o filtro import { VueMaskFilter } from 'v-mask' Vue.filter('VMask', VueMaskFilter) ``` ### UMD (Browser) ```html ``` ## :rocket: Utilizando ```html ``` **Notice:** `v-model` é necessário a partir da versão `v1.1.0`, porque acabam [existindo](https://github.com/probil/v-mask/issues/16) [muitos](https://github.com/probil/v-mask/issues/30) [bugs](https://github.com/probil/v-mask/issues/29) com ouvintes de eventos HTMLElement e sincronização dos mesmos com o Vue. Não há razão para suportar o uso dessa lib para uso sem o modelo `v-model`, mas abra a porta para uso em [inputs personalizados](http://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events). ### Utilizando o filtro ```html {{ '9999999999' | VMask('(###) ###-####') }} ``` ## :gear: Configurações Lista de simbolos reservados para máscara: | Value | Format | |-------|--------------------------------------| | # | Números (0-9) | | A | Caractere de qualquer case (a-z,A-Z) | | N | Caractere ou Números | | X | Qualquer símbolo | | ? | Opcional (próximo caractere) | ## :syringe: Tests [Jest](https://github.com/facebook/jest) é usado para fazer os testes-unitários Testes unitários podem ser executados utilizando o seguinte comando: ```bash npm test ``` [TestCafe](https://github.com/DevExpress/testcafe) é usando para fazer testes E2E. E2E-tests podem ser executados utilizando o seguinte comando: ```bash npm test:e2e ``` ## :anchor: Versionamento Semântico Este plugin segue [semantic versioning](http://semver.org/). ## :newspaper: Changelog Estamos usando [GitHub Releases](https://github.com/probil/v-mask/releases). ## :beers: Contribuições Estamos muito felizes em ver contribuições em potencial, então não hesite. Se você tiver alguma sugestão, ideia ou problema, sinta-se à vontade para adicionar um novo [issue](https://github.com/probil/v-mask/issues), mas primeiro verifique se a sua pergunta não repete as anteriores. Aviso: Você deve fazer suas alterações apenas na pasta `src`, não tente editar arquivos do `dist`, pois ele foi compilado a partir do `src` a partir do babel e não deve ser alterado manualmente. ## :lock: Licença Consulte o arquivo [LICENSE](LICENSE) para obter os direitos e limitações da licença (MIT).