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

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

Usage

A. Globally

import Vue from "vue";
import money from "@titou10/v-money";

// register directive v-money
Vue.use(money, { precision: 4 });

B. Use as directive:

<template>
  <input v-model.lazy="price" v-money="money" />
</template>

<script>
  import { money } from "@titou10/v-money";
  export default {
    directives: { money }, 
    data() {
      return {
        price: 123.45,
        rawPrice: null,
        money: {
          decimal: ",",
          thousands: ".",
          prefix: "R$ ",
          suffix: " #",
          precision: 2,
          unmaskedVar: "rawPrice" 
        }
      };
    }
  };
</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