Narcissistic, Perfectly Modest

    v-money-no-negative

    0.8.3 • 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
    allowBlank false Boolean false If the field can start blank and be cleared out by user

    References

    Install

    npm i v-money-no-negative

    DownloadsWeekly Downloads

    40

    Version

    0.8.3

    License

    MIT

    Unpacked Size

    9.58 kB

    Total Files

    3

    Last publish

    Collaborators

    • denato