Vue.js component for Cleave.js input mask library :keyboard:
Vue.js component for Cleave.js
Vue.js version | Package version | Branch |
---|---|---|
2.x | 2.x | 2.x |
3.x | 3.x | master |
v-model
value
raw
mode to get masked value# yarn
yarn add vue-cleave-component
# npm
npm install vue-cleave-component --save
<template>
<div>
<cleave v-model="cardNumber"
:options="options"
class="form-control"
name="card"/>
</div>
</template>
<script>
import Cleave from 'vue-cleave-component';
export default {
data() {
return {
cardNumber: null,
options: {
creditCard: true,
delimiter: '-',
}
}
},
components: {
Cleave
}
}
</script>
import {createApp} from 'vue';
import Cleave from 'vue-cleave-component';
// your app initilization logic goes here
const app = createApp({}).mount('#app')
app.use(Cleave);
This will register a global component <cleave>
The component accepts these props:
Attribute | Type | Default | Description |
---|---|---|---|
v-model | String / Number / null |
null |
Set or Get input value (required) |
options | Object | {} |
Cleave.js options |
raw | Boolean | true |
When set to false ; emits formatted value with format pattern and delimiter |
<!-- cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
<script>
const app = Vue.createApp({}).mount('#app')
app.use(VueCleave);
</script>
>=12.13
and yarn >=1.22
pre-installedyarn install
yarn start
http://localhost:9000
in your default web browser__test__
folderyarn test
Please see CHANGELOG for more information what has changed recently.
If you feel this component heavy, then you can consider these packages.
MIT License