v-money Mask for Vue.js
Features
- Lightweight (<2KB gzipped)
- Dependency free
- Mobile support
- Component or Directive flavors
- Accept copy/paste
- Editable
- Min / Max Limits
For other types of mask, use vue-the-mask
Usage
A. Globally
import Vue from 'vue'
import money from 'v-money'
// register directive v-money and component <money>
Vue.use(money, {precision: 4})B. Use as component: https://jsfiddle.net/joserick/tgwj6b08/
<template>
<div>
<money v-model="price" v-bind="money"></money> {{price}}
</div>
</template>
<script>
import {Money} from 'v-money'
export default {
components: {Money},
data () {
return {
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
suffix: ' #',
precision: 2,
masked: false,
allowBlank: false,
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
minMaxMessage: 'From 100 to 200',
amend: false
}
}
}
}
</script>C. Use as directive:
Must use vmodel.lazy to bind works properly.
<template>
<div>
<input v-model.lazy="price" v-money="money" /> {{price}}
</div>
</template>
<script>
import {VMoney} from 'v-money'
export default {
data () {
return {
price: 123.45,
money: {
decimal: ',',
thousands: '.',
prefix: 'R$ ',
suffix: ' #',
precision: 2,
masked: false, /* doesn't work with directive */
allowBlank: false,
min: Number.MIN_SAFE_INTEGER,
max: Number.MAX_SAFE_INTEGER,
minMaxMessage: 'From 100 to 200',
amend: false
}
}
},
directives: {money: VMoney}
}
</script>Properties
| property | Required | Type | Default | Description |
|---|---|---|---|---|
| precision | true | Number | 2 | How many decimal places |
| decimal | false | String | "." | Decimal separator |
| thousands | false | String | "," | Thousands separator |
| prefix | false | String | "" | Currency symbol followed by a Space, like "R$ " |
| suffix | false | String | "" | Percentage for example: " %" |
| masked | false | Boolean | false | If the component output should include the mask or not |
| allowBlank | false | Boolean | false | If the field can start blank and be cleared out by user |
| min | false | Number | Number.MIN_SAFE_INTEGER | The min value allowed |
| max | false | Number | Number.MAX_SAFE_INTEGER | The max value allowed |
| minMaxMessage | false | String | "" | Message if exceeding min or max value allowed |
| amend | false | Boolean | false | In case of exceeding min or max, overwrite it when deselect |