zestfulnation / vue-number-input-spinner

A customizable number input spinner component for Vuejs with character validation and min/max values

vue-number-input-spinner

A customizable number input spinner component for Vuejs

Demo

https://zestfulnation.github.io/vue-number-input-spinner/

Installation

• Install the package via NPM:

• npm install vue-number-input-spinner

• Load it in your project:

import NumberInputSpinner from 'vue-number-input-spinner'

export default {
  components: {
    NumberInputSpinner,
  },
}

Usage example:

<NumberInputSpinner
  :min="0"
  :max="10"
  :step="2"
  :inputClass="your-css-class"
  :buttonClass="your-other-css-class"
  :integerOnly="true"
  v-model="yourVModel"
/>

vue-number-input-spinner's Issues

v-model doesn't work

ths.
my code just like this:

when i changed "Num" by other function,the view doesn't change,but actually the value of "Num" has changed,i can get the correct value by "console.log()"。
i dont know where are you from,can you speack chinese?
unh,can you fixed as soon as possible,ths.

when the first time i changed "Num", the view can change correct,but after this , the problem happened,just like above

Mouse down support?

Most numeric spinners allow the user to hold the mouse down to increase or decrease rapidly. Can this be added?

v-model doesn't use initial value

Using v-model works when the input changes, however if my model is initially e.g. 4, the spinner still shows 0.

On increase button click, it appends the number instead of adding it

Reproducible Steps:

• Change the input value manually
• Increase number by using + button

you can use "dots" couple of times

Example:

you can type in 4.4.4444

Spin Buttons visible on Firefox

Hi,
I've looked the code and noticed you hide the native buttons on Webkit based browser, but not on Firefox.
Any problem with -moz-appeareance: textfield; ?

Just add a line in &__input rules:

&__input {
    /* ... */
    -moz-appearance: textfield; /* :) */

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Cheers.

Text input is ignored

First off, nice little component! I just integrated it into my app but I noticed that manually typing a number into it doesn't actually update numericValue. It's strange too because it seems to work on your demo page.

I tried with and without custom props, no dice. That said, I took a look at the code and it doesn't actually appear to have the relevant setter, so I'm not sure how it worked in the first place! 😅 It's possible I'm missing something, but since you're using v-bind:value instead of v-model, and the @keypress=validateInput doesn't ever actually modify numericValue, isn't a line like this necessary?

@input="numericValue = parseInt($event.target.value)"

I tried adding it locally and it works great. I'm using Vue 2.5 instead of 2.3, so maybe something has changed in the way v-bind:value works?

More info about custom classess

Hello,

I'm using your component but I don't know how to add my custom classess to input and button.
I try to define my classes and put it on component but it doesn't work.

Can you tell me how to use this feature?

My code is like:

.inputButton {
border-radius: 5px;
background-color: deepskyblue;
}

Thanks.

v-model is not working ???

What about decimal steps?

Hey there,

my component is

 <NumberInputSpinner
                :min="0"
                :max="10"
                :step="0.5"
                v-model="5.5"
              />

but is does not work as expected. Any tips?

Debounce feature?

Hi,

In the code I see a debounce value is supplied to the input control. But it doesn't seem to do much? The action is triggered immediately. My issue is that I show a notification on the screen everytime the changed quantity is actually saved, but when I do "holdMouseDown" to change the value quickly, I would get loads of notifications :)

If it would be possible to supply a debounce value so the linked method to the "input" event would only triggered after a certain amount of time, that would be handy I think.

When I tried to implement this with the _debounce feature of lodash I got some strange behavior.
Sometimes the spinner jumps by 2 instead of 1. My vue SFC has the following method.

    changeQuantity: _.debounce(function (id, qty) {
      return this.$store.dispatch('RECEIPT/CHANGE_PRODUCT_QUANTITY', { id, qty: parseInt(qty) })
        .then(data => {
          this.$toast.success(data.message)
        })
        .catch(data => this.$toast.error(data.message))
    }, 750)

Is there any way to disable the whole component simply?

as above,
May I set a property of component to disable it? including button and input?
thanks

Event Listener

Is there any event listener for this component,
like @change or @input, none is working

Each click counts as if it were 2

When clicking on add value, the input adds up 2 times

What is inputClass

the component requires inputClass and ButtonClass. What are these suppose to do? They are not mentioned in the documentation.

mouseDownSpeed prop

The mouseDownSpeed prop is defined but is not used inside the code.

The MouseDown interval is hardcode to 100.

whileMouseDown(callback) { if (this.timer === null) { this.timer = setInterval(() => { callback(); }, 100); } },