Nimble Pirate Monitor

    vue-jquery-mask

    2.0.0 • Public • Published

    Vue jQuery Mask Component

    downloads npm-version github-tag license

    Vue.js component for jQuery Mask Plugin

    Demo on JSFiddle

    Version matrix

    Vue.js version Package version Branch
    2.x 1.x 1.x
    3.x 2.x master

    Requirements

    • jQuery >=1.7.0
    • Vue 3.x

    Installation

    # Yarn 
    yarn add vue-jquery-mask
     
    # npm 
    npm install 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 {createApp} from 'vue';
      import VueMask from 'vue-jquery-mask';
      const app = createApp().mount('#app')   
      app.use(VueMask);

    This will register a global component <vue-mask>

    Available props

    The component accepts these props:

    Attribute Type Default Required? Description
    v-model 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@3"></script>
    <!-- Lastly add this package -->
    <script src="https://cdn.jsdelivr.net/npm/vue-jquery-mask@2"></script>
    <!-- Register global component -->
    <script>
    // Your app init login may go here
    app.use(VuejQueryMask)
    </script> 

    Run examples on your localhost

    • Clone this repo
    • You should have node-js >=10.13 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

    133

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • ankurk91