v-uang

v-money Mask for Vue.js

Features

• Lightweight (<2KB gzipped)
• Dependency free
• Mobile support
• Component or Directive flavors
• Accept copy/paste
• Editable
• Built-in money filter (https://github.com/vuejs-tips/v-money/pull/30)
• Min / Max Limits (https://github.com/vuejs-tips/v-money/pull/36)

Usage

A. Globally

Register component and directive globally:

import Vue from 'vue'
import money from 'v-money'

// register directive v-money and component <money>
Vue.use(money, {precision: 4})

Register only directive globally:

import Vue from 'vue'
import { VMoney } from 'v-money'
// register only directive v-money
Vue.directive('money', VMoney)

B. Use as component: https://jsfiddle.net/auom8st8/

<template>
  <div>
    <money v-model="price" v-bind="money"></money> {{ price | money }}
  </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, /* doesn't work with directive */
          min: 0,
          max: 1000
        }
      }
    }
  }
</script>

C. Use as directive: https://jsfiddle.net/nj3cLoum/2/

Must use v-model.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 */
          min: 0,
          max: 1000
        }
      }
    },

    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

References

• https://en.wikipedia.org/wiki/Decimal_mark
• https://docs.oracle.com/cd/E19455-01/806-0169/overview-9/index.html
• http://www.xe.com/symbols.php
• https://github.com/kevinongko/vue-numeric
• https://github.com/plentz/jquery-maskmoney
• https://github.com/vuejs-tips/v-money/pull/51
• https://github.com/vuejs-tips/v-money/pull/66
• https://github.com/vuejs-tips/v-money/pull/55
• https://github.com/vuejs-tips/v-money/pull/82