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