vuetify-numeric v0.2.1
vuetify-numeric
Numeric input components for use with vuetifyjs.
Features
- Built-in calculator
- Smart numeric input
- Locale support number format
- Adjustable text color
- Groupping digits
- Right number alignement
- Show prefix (currency ...) near your number
- No thirdpatry solutions is used
Vuetify VTextField compatible
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
Demo & Playground
See Live demo . or Codesandbox example codesandbox
The v-numeric component
The component extends the Vuetify v-text-field
component.
How to use
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)
Once the plugin has been installed, you can now use the v-numeric
component in your templates.
Use v-model
to bind to the value.
<template>
<v-numeric text outlined v-model="amount"></v-numeric>
</template>
<script>
export default {
data() {
return {
amount: 0,
};
},
};
</script>
Props:
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 object properties:
This object uses for customizing calculator buttons, and consist of the same Vuetify v-btn properies. For details, see official documentation
calcStyle: {
fab: false,
outlined: false,
rounded: false,
text: false,
tile: false,
large: false,
small: false
}
Anover props are derived from v-text-field component
Events:
@input
: Emitted when value is changed after user input.
@change
: Emitted formatted value as string when that is changed after user input.
CDN example:
You can use this library without installation, via cdn provider
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-row>
<v-numeric text outlined ></v-numeric>
</v-row>
<v-row>
<v-numeric text ></v-numeric>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify-numeric@0.2.x/vuetify-numeric.umd.min.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify({})
})
</script>
</body>
</html>