README
:abcd: Vue input mask
Tiny input mask library for vue.js based on text-mask-core (~4kb) exposed as directive. No dependencies
Special thanks to the author of the repository v-mask (Max Lyashuk) for the implementation of the plugin for vue
:heavy_check_mark: Browser Support
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: |
We support only browsers with global usage statistics greater then 1%, last 2 version of each browser but not dead browsers. Library may work in older browser but we don't not guarantee that. You may need addition polyfills to make it work.
:cd: Installation
This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.
npm install v-mask-ru
Initialization
ES2015 (Webpack/Rollup/Browserify/etc)
import Vue from 'vue'
// As a plugin
import VueMaskRu from 'v-mask-ru'
Vue.use(VueMaskRu);
// Or as a directive
import { VueMaskDirective } from 'v-mask-ru'
Vue.directive('mask-ru', VueMaskDirective);
// Or only as a filter
import { VueMaskFilter } from 'v-mask-ru'
Vue.filter('VMaskRu', VueMaskFilter)
:rocket: Usage
<input type="text" v-mask-ru="'####-##'" v-model="myInputModel">
<!-- OR -->
<input type="text" v-mask-ru="nameOfVariableWithMask" v-model="myInputModel">
Notice: v-model
is required starting from v1.1.0
, because a lot of bugs with HTMLElement event listeners and sync with Vue internals.
There is no reason to support using this lib for using without v-model
but open the door for using on custom inputs.
Filter usage
<span>{{ '9999999999' | VMaskRu('(###) ###-####') }}</span>
:gear: Configs
List of supported placeholders:
Value | Format |
---|---|
# | Number (0-9) |
A | Letter in any case (a-z,A-Z) |
B | Letter in any case (а-я,А-Я) |
C | Russian car number (АВЕКМНОРСТУХ) |
N | Number or letter |
X | Any symbol |
? | Optional (next character) |
:syringe: Tests
Jest is used for unit-tests.
Unit-tests can be executed by typing this command in your terminal:
npm test
TestCafe is used of E2E testing.
E2E-tests can be executed by typing this command in your terminal:
npm test:e2e
:anchor: Semantic Versioning Policy
This plugin follows semantic versioning.
:newspaper: Changelog
We're using GitHub Releases.
:beers: Contributing
We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.
Notice: You should make your changes only in src
folder, don't try to edit files from dist
as it compiled from src
by babel and shouldn't be changes manually.
:lock: License
See the LICENSE file for license rights and limitations (MIT).