@mgcodeur/vue-number-picker v1.2.3

Vue 3 number picker

• Vue 3 number picker
• Installation:
• Usage:
• Customize input position

Installation:

npm install @mgcodeur/vue-number-picker@latest
 ou 
yarn add @mgcodeur/vue-number-picker@latest

Usage:

//using api composition
<script setup>
    //The component
    import { NumberPicker } from '@mgcodeur/vue-number-picker'

    //import the style
    import "@mgcodeur/number-picker/dist/vue-number-picker.css"
</script>

or

<script>
    //import component from node_modules
    import { NumberPicker } from "@mgcodeur/vue-number-picker";

    //import style from node_modules
    import "@mgcodeur/number-picker/dist/vue-number-picker.css";

    export default{
        components: {
            NumberPicker
        }
    }
</script>

In your vuejs template

<template>
    <number-picker 
        v-model="..." 
        :min="0" 
        :max="20" 
        :buttonClass="['class1', 'class2']" 
        :inputClass="['class1', 'class2', 'class3']"
        name="input_name"
    ></number-picker>
</template>

Customize input position

you just need to pass options in props

<script>
    //import component from node_modules
    import { NumberPicker } from "@mgcodeur/vue-number-picker";

    //import style from node_modules
    import "@mgcodeur/number-picker/dist/vue-number-picker.css";

    export default{
        components: {
            NumberPicker
        },
        data(){
            return {
                options: {
                    //by default this option value is **center**
                    inputPosition: "center" //possible value: center, right, left
                }
            }
        }
    }
</script>

in your template

<template>
    <number-picker 
        v-model="..." 
        :min="0" 
        :max="20" 
        :buttonClass="['class1', 'class2']" 
        :inputClass="['class1', 'class2', 'class3']"
        :options="options" // here is the options
        name="input_name"
    ></number-picker>
</template>