Numeric input components for use with vuetifyjs
npm install vuetify-numeric ## Keyboard shortcuts
| Key | Action |
| ---- | -------- |
| Enter | Activate calculator or calculate your expression and close the calculator. (Note) You can change calculator's activation key |
| Delete | Reset calculator |
| . or , | Swich your input between integer and fraction part of number |
| - | Change your input number sign |
v-text-field component.Install the package:
```
yarn add vuetify-numeric
Add the package to your app entry point:
``
import VNumeric from 'vuetify-numeric/vuetify-numeric.umd.min'
Or (in develop case)
``
import VNumeric from 'vuetify-numeric/vuetify-numeric.umd'`
Than, register this plugin`
Vue.use(VNumeric)v-numeric
Once the plugin has been installed, you can now use the component in your templates.v-model
Use to bind to the value.`
`
| Prop | description | type | default |
| ---- | ---- | ------- | --- |
| min | Sets minimum value | Number | - Number.MAX (infinity) |
| max | Sets maximum value | Number | Number.MAX (infinity)|
| length | Sets maximum number of digits | Number | 10 |
| precision | Number of digits after decimal point | Number | 0 |
| negativeTextColor | Text color when number is negative | String | red |
| locale | Current locale | String | en-US |
| useGrouping | use grouping digits | Boolean | true |
| elevation | Sets the calculator elevation | Number | 10 |
| fab | FAB-kind calculator's button | Boolean | false |
| text | use transparent background in calculator | Boolean | false |
| calcStyle | You can customize calculator's button style separately from input field. This is not mandatory.| object | undefined |
| calcIcon | You can customize calculator's icon. If it's undefined, the calculator icon does not appear.| string | 'mdi-calculator' |
| useCalculator | Turn on/off calculator usage.| boolean | true |
| openKey | Key for open build-in calculator | String |'Enter'
| calcNoTabindex | Set or not tabindex attribute in calc icon | Boolean | false |
calcStyle: {
fab: false,
outlined: false,
rounded: false,
text: false,
tile: false,
large: false,
small: false
}
Anover props are derived from v-text-field component
@input: Emitted when value is changed after user input.@change: Emitted formatted value as string when that is changed after user input.
You can use this library without installation, via cdn provider
`
``