All Projects → scleriot → Vue Inputmask

scleriot / Vue Inputmask

Licence: mit
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Inputmask

vue-img-orientation-changer
A vue plugin that can help you display image in correct orientation.
Stars: ✭ 38 (-65.45%)
Mutual labels:  vue-directive
Vue Awesome Mui
🏆Mui component for Vue.js(1.x ~ 2.x)
Stars: ✭ 307 (+179.09%)
Mutual labels:  vue-directive
Vue Esc
🏃 Vue.js directive to add a document event listener on escape keyup.
Stars: ✭ 33 (-70%)
Mutual labels:  vue-directive
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (+15.45%)
Mutual labels:  vue-directive
Vue Ripple Directive
Material Ripple Effect as Vue Directive.
Stars: ✭ 266 (+141.82%)
Mutual labels:  vue-directive
Vue.resize
Vue directive to detect resize events with deboucing and throttling capacity.
Stars: ✭ 318 (+189.09%)
Mutual labels:  vue-directive
Intro To Vue
Workshop Materials for my Introduction to Vue.js Workshop
Stars: ✭ 2,668 (+2325.45%)
Mutual labels:  vue-directive
V Animate Css
The easiest to implement Vue directive for Animate.css
Stars: ✭ 59 (-46.36%)
Mutual labels:  vue-directive
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (+160%)
Mutual labels:  vue-directive
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+6149.09%)
Mutual labels:  vue-directive
vue-append
vue-append, like v-html directive, but it can call javascript function.
Stars: ✭ 37 (-66.36%)
Mutual labels:  vue-directive
v-lazy-img
simplistic vue.js directive for image lazy loading
Stars: ✭ 25 (-77.27%)
Mutual labels:  vue-directive
Vuebar
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
Stars: ✭ 650 (+490.91%)
Mutual labels:  vue-directive
shadow
Shadow dom support for Vue
Stars: ✭ 46 (-58.18%)
Mutual labels:  vue-directive
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-62.73%)
Mutual labels:  vue-directive
vue-on-click-outside
vue mixin/directive that does something when you click outside a container
Stars: ✭ 32 (-70.91%)
Mutual labels:  vue-directive
Vue Easy Slider
Slider Component of Vue.js.
Stars: ✭ 313 (+184.55%)
Mutual labels:  vue-directive
Vue Responsive
A plugin for responsive handling with vue.js
Stars: ✭ 86 (-21.82%)
Mutual labels:  vue-directive
V Img Fallback
Vue Image Fallback
Stars: ✭ 43 (-60.91%)
Mutual labels:  vue-directive
V Click Outside
🔲 Vue directive to react on clicks outside an element without stopping the event propagation
Stars: ✭ 755 (+586.36%)
Mutual labels:  vue-directive

vue-inputmask

Vue.js directive to add a mask to your inputs (vanilla javascript).

It's a binding for the inputmask library by Robin Herbots https://github.com/RobinHerbots/Inputmask

Vue-inputmask demo

This library is licensed under MIT License.

Install

npm install -S vue-inputmask

Setup

With Typescript

import Vue from 'vue'
const VueInputMask = require('vue-inputmask').default

Vue.use(VueInputMask)

With a script tag

<script src="./node_modules/inputmask/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="./node_modules/inputmask/dist/inputmask/inputmask.js"></script>
<script src="./dist/vue-inputmask-browser.js"></script>

Usage

<input type="text" v-mask="'99/99/9999'" />
<input type="text" v-mask="{mask: '99/99/9999', greedy: true}" v-on:change="maskCheck"/>
new Vue({
  ...
  methods: {
    maskCheck: function (field){
      if (field.target.inputmask.isComplete()) {
        console.log('is Complete');
      } else {
        console.log('is Incomplete');
      }
    }
  }
});
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].