Input field component to display a formatted currency value based on Vue.
Works with Vue 2.*
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>
<script>
Vue.use(VueNumeric.default)
</script>
$ npm install vue-numeric --save
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
}
}
import Vue from 'vue'
import VueNumeric from 'vue-numeric'
Vue.use(VueNumeric)
<template>
<vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>
<script>
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
},
data: () => ({
price: ''
}),
}
</script>
Set the currency
prop to add a currency symbol within the input.
<vue-numeric currency="$"></vue-numeric>
Limit the minimum and maximum value by using min
and max
props.
min
defaults to0
.min
andmax
acceptString
orNumber
values.
<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>
minus
defaults to false
(no negative numbers).
<vue-numeric v-bind:minus="false"></vue-numeric>
By default the decimal value is disabled. To use decimals in the value, add the precision
prop.
precision
accept aString
orNumber
numeric value.
<vue-numeric v-bind:precision="2"></vue-numeric>
- Default thousand separator's symbol is
,
. - Use the
separator
prop to change the thousands separator. separator
only accepts,
or.
.- When using the
.
as a separator, use a,
for a decimal and vice versa.
<vue-numeric separator="."></vue-numeric>
<vue-numeric placeholder="only number allowed"></vue-numeric>
Props | Description | Required | Type | Default |
---|---|---|---|---|
currency | Currency prefix | false | String | - |
currency-symbol-position | Position of the symbol (accepted values: prefix or suffix ) |
false | String | prefix |
max | Maximum value allowed | false | Number | 9007199254740991 |
min | Minimum value allowed | false | Number | -9007199254740991 |
minus | Enable/disable negative values | false | Boolean | false |
placeholder | Input placeholder | false | String | - |
precision | Number of decimals | false | Number | - |
separator | Thousand separator symbol (accepts either . or , ) |
false | String | , |
read-only | Hide input field and show the value as text | false | Boolean | false |
read-only-class | Class for read-only element | false | String | '' |
Vue-Numeric is open-sourced software licensed under the MIT license