autonumeric-vue
A Vue JS wrapper over the awesome AutoNumeric input formatter library
autonumeric-vue wraps the awesome AutoNumeric library.
Installation
yarn add autonumeric-vue
# or
npm install autonumeric-vue --save
You will as usual be able to use the autonumeric-vue
component in your Vue components using:
import AutoNumericVue from 'autonumeric-vue/src/components/AutoNumericVue';
export default {
components: {
AutoNumericVue
}
}
How to use?
The AutoNumeric component can be instantiated the same way AutoNumeric
can.
With an option object:
<AutoNumericVue
v-model="myValue"
:options="{
digitGroupSeparator: '.',
decimalCharacter: ',',
decimalCharacterAlternative: '.',
currencySymbol: '\u00a0€',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0'
}"
></AutoNumericVue>
With a predefined option name:
<AutoNumericVue
v-model="myValue"
:options="'French'"
></AutoNumericVue>
With multiple option objects/predefined options:
<AutoNumericVue
v-model="myValue"
:options="['euro', { minimumValue: '0' }]"
></AutoNumericVue>
Other props
Placeholder
You can define the input placeholder using:
<AutoNumericVue
v-model="myValue"
:options="'euro'"
:placeholder="'Enter your value here'"
></AutoNumericVue>
Caveats
Please note that directly setting a :value='42'
on the <AutoNumericVue>
component will break it (really!).
Do NOT do that:
<AutoNumericVue
v-model="myValue"
:options="{ minimumValue: '0' }"
:value="42042.69" <!-- This fails -->
></AutoNumericVue>
Demo
The official AutoNumeric documentation is using this component extensively :)
Requirements
-
AutoNumeric
^v4
-
Vue.js
^v2
Browser support
This supports the same browsers than AutoNumeric supports:
- Firefox and
- Chrome
(latest 2 versions)
If you use IE/Edge/Safari/Opera, this might work ;)
The contribution guidelines for vue-autoNumeric are the same than for the parent AutoNumeric project.
Support
As always, if you find this useful, please consider supporting its development!
Huge Thanks :)
License
autonumeric-vue
is open-source and released under the MIT License.
Copyright © 2021 Kirill Malyhin