npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

vue-jquery-mask

1.0.3 • Public • Published

Vue jQuery Mask Component

vue-js downloads npm-version github-tag license

Vue.js v2.x component for jQuery Mask Plugin

Demo on JSFiddle

Requirements

  • jQuery >=1.7.0

Installation

# npm 
npm install vue-jquery-mask --save
 
# Yarn 
yarn add vue-jquery-mask

Using Webpack?

// webpack.config.js
plugins: [
    new webpack.ProvidePlugin({     
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      $: 'jquery',     
    }),
  ]  

Usage Example

<template>
  <div>
    <vue-mask 
        class="form-control" 
        v-model="date"  
        mask="00/00/0000" 
        :raw="false"
        :options="options"> 
    </vue-mask>
  </div>
</template>
 
<script>
  // Import this component
  import vueMask from 'vue-jquery-mask';
  
  export default {    
    data () {
      return {
        date: null,
        options: {
          placeholder: '__/__/____',
          // http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
        }       
      }
    },
    components: {
      vueMask
    }
  }
</script> 

As plugin

  import Vue from 'vue';
  import vueMask from 'vue-jquery-mask';
  Vue.use(vueMask);

This will register a global component <vue-mask>

Available props

The component accepts these props:

Attribute Type Default Required? Description
v-model / value String / null null true Set or Get input value
mask String / Function true Masking pattern
options Object {} false Configuration options
raw Boolean true false When set to false; emits formatted value with format pattern and delimiters

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-jquery-mask"></script>
<!-- Install global component -->
<script>
Vue.use(VuejQueryMask)
</script> 

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=6.10 and yarn >=1.x pre-installed
  • Install dependencies - yarn install
  • Run webpack dev server - yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

install

npm i vue-jquery-mask

Downloadsweekly downloads

243

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability