/v-currency-field

v-currency-field is v-money package to vuetify v-text-field

Primary LanguageVue

Currency Mask for Vuetify

Features

  • All features from v-money as v-text-field of vuetify.

Usage

Globally

import Vue from 'vue'
import currency from 'v-currency-field'

import 'v-currency-field/dist/index.css'

Vue.use(currency)

Example

<template>
  <div>
    <v-currency-field label="Value" v-bind="currency_config" :error-messages="errors.price" v-model="price"></v-currency-field>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        errors: {},
        price: 123.45,
        currency_config: {
          decimal: ',',
          thousands: '.',
          prefix: 'R$ ',
          suffix: ' #',
          precision: 2,
          masked: false,
          allowBlank: false,
          min: Number.MIN_SAFE_INTEGER,
          max: Number.MAX_SAFE_INTEGER
        }
      }
    }
  }
</script>

Properties

All 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: " %"
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

And all vuetify properties

property Required Type Observation
appendOuterIcon false String
appendOuterIconCb false Function Working but deprecated
@click:append-outer false Function Not Working
autofocus false Boolean
box false Boolean
browserAutocomplete false String Not Tested
clearable false Boolean Not Working Event
clearIcon false String
clearIconCb false Number Working but deprecated
@click:clear false Number Not Working
color false String
flat false Boolean
fullWidth false Boolean
label false String
outline false Boolean
prependInnerIcon false String
prependInnerIconCb false Function Working but deprecated
@click:prepend-inner false Function Not Working
reverse false Boolean
singleLine false Boolean
solo false Boolean
soloInverted false Boolean
error-messages false []
disabled false Boolean
readonly false Boolean
dark false Boolean
height false String
hint false String
light false Boolean
background-color false String

References