v-money mask for Vue.js

TL;DR;

A"v-money"directive for Vue.js that sets the masked and unmasked value of an"input"component (eg the "v-text-field" component from vuetify) It is a specialized form of amask It is based on@vuejs-tips/v-money

Install

1npm install @titou10/v-money --save
2yarn add @titou10/v-money
3bower install @titou10/v-money --save

Usage

A. Globally

1import Vue from "vue";
2import money from "@titou10/v-money";
3
4// register directive v-money
5Vue.use(money, { precision: 4 });

B. Use as directive:

1<template>
2  <input v-model.lazy="price" v-money="money" />
3</template>
4
5<script>
6  import { money } from "@titou10/v-money";
7  export default {

8    directives: { money }, 
9    data() {
10      return {

11        price: 123.45,

12        rawPrice: null,

13        money: {

14          decimal: ",",

15          thousands: ".",

16          prefix: "R$ ",

17          suffix: " #",

18          precision: 2,

19          unmaskedVar: "rawPrice" 
20        }
21      };
22    }
23  };
24</script>

v-money 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: " %"
unmaskedVar	false	String	null	name of an attribute in "data" to receive the unmasked value

Why this package?

This package has been created because the@vuejs-tips/v-money does not provide a way to get the unmasked value when it is used as a directive

Most of the credit goes to:

• https://github.com/vuejs-tips/v-money/tree/master/src
• https://github.com/luizhenriquerdias/vuejs-money