Number Input Component For Vue.js 3

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);
    },
  },
};

Preview:

Number Input Component For Vue.js

Changelog:

v2.0.0 (02/07/2022)

  • Bug Fixes

v2.0.0beta1 (04/10/2021)

  • fix: should emit a single value

v2.0.0beta (01/16/2021)

  • refactor: upgrade to Vue 3

Download Details:

Author: fengyuanchen

Live Demo: https://fengyuanchen.github.io/vue-number-input/

Download Link: https://github.com/fengyuanchen/vue-number-input/archive/master.zip

Official Website: https://github.com/fengyuanchen/vue-number-input

Install & Download:

You Might Be Interested In:

Add Comment