Vue Input Spinner

Vue 2.x component for spinning inputs

Demo

https://vue-input-spinner.netlify.com/

Installation

# Yarn 
yarn add vue-input-spinner

# NPM 
npm i vue-input-spinner

How to use

Import at individual .vue files

import VueInputSpinner from 'vue-input-spinner'
 
export default {
  components: {
    VueInputSpinner
  },
// ...
};

Or register as a global component

import Vue from 'vue'
import VueInputSpinner from 'vue-input-spinner'
 
Vue.use(VueInputSpinner)
 
/* Or you can set options */
 
Vue.use(VueInputSpinner, {
  buttonClass: 'fancy-class',
  minValue: 10,
  editable: false,
  // ...
})

Template

<vue-input-spinner v-model="myData"></vue-input-spinner>

or use with props

<vue-input-spinner 
  v-model="myData"
  minValue="1"
  maxValue="10"
  step="0.5"
  inputClass="fancy-input"
  buttonClass="fancy-button"
  buttonLeftClass="this-class-will-overwrite"
  buttonRightClass="this-one-as-well"
  buttonLeftText="Minus (-)"
  buttonRightText="Plus (+)"
  :editable="false"
  :readonly="false"
  >
</vue-input-spinner>

Available Props

Attribute	Type	Default	Description
:value	Number	0	Value for binding
:minValue	Number	0	Minimum value
:maxValue	Number	10**1000	Maximum value (default infinite)
:step	Number	1	Step between increase and decreases
:inputClass	String	vis-default-input	width: 50px; height: 50px; text-align: center; font-size: 24px;
:buttonClass	String	vis-default-button	width: 50px; height: 50px;
:buttonLeftClass	String	""	This will overwrite buttonClass
:buttonRightClass	String	""	This will overwrite buttonClass
:buttonLeftText	String	-	Text in left button
:buttonRightText	String	+	Text in right button
:editable	Boolean	true	Toggling this converts input into a label
:readonly	Booelan	false	Readonly input

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Contributors

Kaan Gökdemir - Author (@kaangokdemir) - kaangokdemir.com

License

MIT