Nth Power Matrix

    v-money

    0.8.1 • Public • Published

    v-money Mask for Vue.js

    The Mask Money

    Features

    • Lightweight (<2KB gzipped)
    • Dependency free
    • Mobile support
    • Component or Directive flavors
    • Accept copy/paste
    • Editable

    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/auom8st8/

    <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
            }
          }
        }
      }
    </script> 

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

    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 */
            }
          }
        },
     
        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

    References

    Install

    npm i v-money

    DownloadsWeekly Downloads

    33,577

    Version

    0.8.1

    License

    MIT

    Last publish

    Collaborators

    • neves