Licence
—
Version
2.0.1
Deps
0
Size
44 kB
Vulns
0
Weekly
0
Vuetify number field
A numeric field component built from Vuetify's v-text-field component.
Installation
Global
Note: The numeral package may also need to be installed.
import Vue from "vue";
import VNumberField from "flexerant-vuetify-number-field";
Vue.use(VNumberField);
Vue.component("v-number-field", VNumberField);In-Component Import
Note: The numeral package may also need to be installed.
// component.vue
import VNumberField from "flexerant-vuetify-number-field";
export default {
components: {
"v-number-field": VNumberField,
},
};Usage
The component uses Vuetify's text-field API, therfore the same props, slots, events, and functions can be used.
<v-number-field />Additional props are listed below;
| Name | Description | Type | Default |
|---|---|---|---|
format |
Prepends/appends the appropriate symbol based on the selected locale. | 'none' | 'currency' | 'percent' | 'none' |
min |
The minimum allowed value. Values below it will be discarded. | number | Number.MIN_SAFE_INTEGER |
max |
The maximum allowed value. Values above it will be discarded. | number | Number.MAX_SAFE_INTEGER |
decimal-places |
The number of decimal places to display. Applies to the model also. | number | 2 |
step |
The step used when increment/decrement buttons are clicked. | number | 0.1 |
locale |
The locale used for the currency and percent symbols. | number | 'en' |
Any locale supported by numeral can be used.