UNPKG

@emmanuelbett/vue-number-input

Version:

A Vue 3 input component that formats numbers with commas as you type

66 lines (46 loc) • 1.59 kB
# Vue Number Input A Vue 3 component that formats numbers with commas as you type. ## Installation ```bash npm install @emmanuelbett/vue-number-input ------------------------------------------------------------------------------------------ šŸš€ Usage <script setup> import { ref } from 'vue'; import { NumberInput } from 'vue-number-input'; // Optional: import custom styles if included in your build // import 'vue-number-input/dist/style.css'; const amount = ref(""); </script> <template> <NumberInput v-model="amount" label="Amount" /> </template> šŸ”§ Props Prop Type Description v-model String | Number The bound input value label String Label for the input field rules Array Vuetify-style validation rules (optional) ----------------------------------------------------------------------------------------- šŸ“¤ Events Event Description update:modelValue Emitted with the unformatted number value ------------------------------------------------------------------------------------------ 🧠 Example Rule Usage const rules = [ v => !!v || "Required", v => parseFloat(v.replace(/,/g, '')) <= 100000 || "Too large" ]; ------------------------------------------------------------------------------------------- šŸ’” Features Formats numbers with commas (1,000,000) Maintains cursor position while typing Supports decimal values Validates using Vuetify's rules system -------------------------------------------------------------------------------------------- āœ… Requirements Vue 3 Vuetify 3 šŸ“„ License MIT šŸ‘¤ Author Made with ā¤ļø by Emmanuel Bett