1.2.3 • Published 3 years ago

@mgcodeur/vue-number-picker v1.2.3

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

Vue 3 number picker

Vue Number Picker Vue Number Picker Vue Number Picker

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>
1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago