Welcome to V-Money-Spinner

V-Money-Spinner for Vue3 is a component which can preset a input spinner with mask currency and style bootstrap, this latter can be disabled.

Notice: Migration Vue2 to Vue3 || I need V-Money-Spinner for Vue2

Demo

Enjoy :smile:

Installation

1npm i v-money-spinner

1import MoneySpinner from 'v-money-spinner'
2app.use(MoneySpinner)

Use

1<template>
2    <v-money-spinner v-model="amount" v-bind="config"></v-money-spinner>
3    {{ amount }}
4</template>
5
6<script>
7  export default {
8    data () {
9      return {
10        amount: 123.45,
11        config: {
12          spinner: true,
13          step: 10,
14          min: -10,
15          max: 200,
16          prefix: "$ ",
17          suffix: " MXN",
18          precision: 2,
19          decimal: '.',
20          thousands: ',',
21          template: "bootstrap",
22          masked: true,
23          disableNegative: false,
24          align: "center",
25          spinnerAlign: "normal",
26        }
27      }
28    }
29  }
30</script>

Properties

Property	Type	Default	Description
spinner	Boolean	true	Apply spinner buttons to the input
step	Number	1	Number of steps
precision	Number	2	How many decimal places
decimal	String	"."	Decimal separator
thousands	String	","	Thousands separator
prefix	String	""	Currency symbol followed by a Space, like "R$ "
suffix	String	""	Percentage for example: " %"
min	Number	null	The min value allowed
max	Number	null	The max value allowed
template	String	"bootstrap"	Apply template styles, use false if you not need template
masked	Boolean	false	If the component output should include the mask or not
allowBlank	Boolean	false	If the field can start blank and be cleared out by user
disableNegative	Boolean	false	Don't allow negative values
minCharacters	Number	0	Minimum number of characters (leading zero)
should-round	Boolean	false	Should default values be rounded or sliced
focus-on-right	Boolean	false	When focus, set the cursor to the far right
id	String	"v-money-spinner"	Input id
label	String	""	Text for label tag
align	String	"center"	Change by "start" or "end" to align the text in the input

Events

Event	Parameters	Description
change	unformatted, formatted, old_amount	Fires when the input value change
plus	unformatted, formatted	Fires when user click on the plus button
minus	unformatted, formatted	Fires when user click on the minus button
positive	unformatted, formatted, old_amount	Fires when the amount change to positive
negative	unformatted, formatted, old_amount	Fires when the amount change to negative

Classes (style css)

Classes	Description
labelClass	Class for the label tag
inputClass	Class for the input tag
prependClass	Class for the left button tag
appendClass	Class for the right button tag
wrapperClass	Class for div contains all money-spinner
wrapperGroupClass	Class for div contains input and the buttons

Migration Vue2 -> Vue3

Summary of changes of the VMoneySpinner files and documentation to help you migrate from Vue2 to Vue3.

New Core

Previously for the use of the VMoneySpinner with Vue2 was used as core the component VMoney by @vuejs-tips, now for Vue3 is used as core VMoney3 by @jonathanpmartins.

Properties

• Added disableNegative (by core) for block the use of negative numbers.
• Added minCharacters alias minimumNumberOfCharacters (by core) for insert 0 digit that comes before the first nonzero digit.
• Renamed bootstrap to template for the handling different templates though string.
• Dropped amend and invalidMessage since the new core does not allow to exceed the properties maximum and minimum.

StyleMinimum number of characters (leading zero)

• Change/Update classes (style css) default of Bootstrap 4.6 to Bootstrap 5.1.
• Dropped wrapperPrependClass for change in structure of Bootstrap 5.

Events

• Dropped exceeded since the new core does not allow to exceed the properties maximum and minimum.

I need for Vue2

Install for Vue2

1npm i v-money-spinner@0.1.8

Configuration for Vue2

References

• https://github.com/JoaoPedroAS51/v-money
• https://github.com/jonathanpmartins/v-money3