vue-input-spinner

    0.1.4 • Public • Published

    Vue Input Spinner

    Vue 2.x component for spinning inputs

    NPM

    License: MIT npm package downloads

    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

    Install

    npm i vue-input-spinner

    DownloadsWeekly Downloads

    27

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    16.6 kB

    Total Files

    3

    Last publish

    Collaborators

    • kaangokdemir