Advanced Numeric Input With Calculator Included – vuetify-numeric

vuetify-numeric is a Vue.js component for Vuetifyjs that helps generate beautiful, customizable, and multilingual numeric input fields with calculator integrated.

How to use it:

1. Install and import the vuetify-numeric.

import VNumeric from 'vuetify-numeric/vuetify-numeric.umd.min'

2. Register the vuetify-numeric.

Vue.use(VNumeric);

3. Add the component to the template.

<template>
  <v-numeric text outlined v-model="amount"></v-numeric>
</template>

export default {
  data() {
    return {
      amount: 10,
    };
  },
};

4. Available component props.

min: {
  type: Number,
  default: -Number.MAX_VALUE
},
max: {
  type: Number,
  default: Number.MAX_VALUE
},
length: {
  type: Number,
  default: 10
},
precision: {
  type: [Number, String],
  default: 0
},
negativeTextColor: {
  type: String,
  default: 'red'
},
textColor: {
  type: Function,
  default: undefined
},
locale: {
  type: String,
  default: 'en-US'
},
useGrouping: {
  type: Boolean,
  default: true
},
/* customizing calculator */
elevation: {
  type: Number,
  default: 0
},
fab: {
  type: Boolean,
  default: false
},
rounded: {
  type: Boolean,
  default: false
},
text: {
  type: Boolean,
  default: false
},
calcIcon: {
  type: String,
  default: 'mdi-calculator'
},
useCalculator: {
  type: Boolean,
  default: true
},
/* {
  fab: false,
  outlined: false,
  rounded: false,
  text: false,
  tile: false,
  large: false,
  small: false
}
*/
calcStyle: {
  type: Object,
  default: undefined
},

Preview:

Changelog:

v0.2.0 (02/01/2022)

• Fixed Not work on mobile

Download Details:

Author: kolesnikovav

Live Demo: https://kolesnikovav.github.io/vuetify-numeric/

Download Link: https://github.com/kolesnikovav/vuetify-numeric/archive/refs/heads/master.zip

Official Website: https://github.com/kolesnikovav/vuetify-numeric

Install & Download:

# Yarn
$ yarn add vuetify-numeric

# NPM
$ npm i vuetify-numeric