Vue.js component for jQuery Mask Plugin
Demo on JSFiddle
| Vue.js version | Package version | Branch |
|---|---|---|
| 2.x | 1.x | 1.x |
| 3.x | 2.x | master |
- jQuery >=1.7.0
- Vue 3.x
# Yarn yarn add vue-jquery-mask # npm npm install vue-jquery-mask- Webpack users need to configure ProvidePlugin
// webpack.config.js plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', 'window.jQuery': 'jquery', $: 'jquery', }), ] <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> 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>
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 |
<!-- 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 logic may go here app.use(VuejQueryMask) </script>- Clone this repo
- You should have node-js
>=10.13and yarn>=1.xpre-installed - Install dependencies -
yarn install - Run webpack dev server -
yarn start - This should open the demo page at
http://localhost:9000in your default web browser
Please see CHANGELOG for more information what has changed recently.
MIT License
