Overview:
Vue-Numeric is a Vue input field component that displays a formatted currency value. It offers various features such as setting currency symbols, limiting min and max values, enabling decimal precision, and customizing separators. Vue-Numeric is compatible with Vue 2.*
Features:
- Currency symbol: Easily add a currency symbol within the input field.
- Minimum & maximum constraint: Set limits for minimum and maximum values.
- Disable/enable negative values: Option to allow or disallow negative numbers.
- Enable decimal precision: Customize the decimal precision for input values.
- Thousands separator: Easily change the thousands separator symbol.
- Output Type customization: Choose between outputting a Number or String type.
- Read-only mode: Display the value as text with an optional read-only class.
- Support for custom separators: Use custom decimal and thousand separators.
Installation:
To install Vue-Numeric, you can follow these steps:
- Install via CDN:
<script src="https://cdn.jsdelivr.net/npm/vue-numeric"></script>
- Install via NPM:
npm install vue-numeric
- Register as Component:
import VueNumeric from 'vue-numeric';
Vue.component('vue-numeric', VueNumeric);
- Register as Plugin:
import VueNumeric from 'vue-numeric';
Vue.use(VueNumeric);
Summary:
Vue-Numeric is a versatile input field component for Vue applications that simplifies the display of currency values. With its customizable features, such as currency symbols, decimal precision, and separators, Vue-Numeric provides a user-friendly experience for handling financial input data. Whether you need to limit values, enable or disable negative numbers, or customize output types, Vue-Numeric offers the flexibility and functionality required for efficient currency input handling in Vue.js applications.