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.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
Please see CHANGELOG for more information what has changed recently.
MIT License