Number Input Component For Vue.js 3

Install & Download:

Description:

A pretty simple and cross-browser number input spinner component for Vue.js 3 applications.

Basic Usage:

1. Import and register the number input component.

import { createApp } from 'vue';
import VueNumberInput from '@chenfengyuan/vue-number-input';
const app = createApp({});
app.component(VueNumberInput.name, VueNumberInput);

2. Add the vue-number-input component to the app.

<vue-number-input controls></vue-number-input>

3. Available component props.

attrs: {
  type: Object,
  default: undefined,
},
center: Boolean,
controls: Boolean,
disabled: Boolean,
inputtable: {
  type: Boolean,
  default: true,
},
inline: Boolean,
max: {
  type: Number,
  default: Infinity,
},
min: {
  type: Number,
  default: -Infinity,
},
name: {
  type: String,
  default: undefined,
},
placeholder: {
  type: String,
  default: undefined,
},
readonly: Boolean,
rounded: Boolean,
size: {
  type: String,
  default: undefined,
},
step: {
  type: Number,
  default: 1,
},
modelValue: {
  type: Number,
  default: NaN,
},

4. Events.

<vue-number-input @update:model-value="onUpdate" @change="onChange" @input="onInput" controls></vue-number-input>

export default {
  methods: {
    onUpdate(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    onChange(event) {
      console.log(event);
    },
    onInput(event) {
      console.log(event);
    },
  },
};