v-money-persian
Vue currency input/directive mask
Last updated 2 years ago by pi0 .
MIT · Original npm · Tarball · package.json
$ cnpm install v-money-persian 
SYNC missed versions from official npm registry.

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-persian'

// 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-persian'

  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-persian'

  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

Current Tags

  • 0.8.3                                ...           latest (2 years ago)

3 Versions

  • 0.8.3                                ...           2 years ago
  • 0.8.2                                ...           2 years ago
  • 0.8.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 0
Dependencies (1)
Dev Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |