Skip to content

alziqziq/vue-paginate-al

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Demo

Click here.

Install via NPM

    npm install --save vue-paginate-al

Register as Plugin

    import Vue from 'vue'
    import VuePaginateAl from 'vue-paginate-al'

    Vue.component('vue-paginate-al', VuePaginateAl)

Usage

    <template>
        <div>
            // example 1
            <vue-paginate-al :totalPage="10" @btnClick="goToFunction"></vue-paginate-al>

            // example 2 => with background color
            <vue-paginate-al :totalPage="15" activeBGColor="success" :withNextPrev="false"></vue-paginate-al>

            // example 3 => with single data
            <vue-paginate-al :totalPage="20" :myData="'myname'" @btnClick="goToFuncWithData"></vue-paginate-al>

            // example 4 => with multiple data
            <vue-paginate-al :totalPage="20" :myData="['myname', 'myemail']" @btnClick="goToFuncWithMultipleData"></vue-paginate-al>
        </div>
    </template>

    <script>
        import VuePaginateAl from 'vue-paginate-al'

        export default {
            name: 'App',
            components: {
                VuePaginateAl
            },
            methods : {
                goToFunction : function(n)
                {
                    console.log(n);
                },

                goToFuncWithData : function(n, data)
                {
                    console.log(n, data);
                },

                goToFuncWithMultipleData : function(n, data)
                {
                    console.log(n, data[0], data[1]);
                }
            }
        }
    </script>

Props

Props Description Type Required Example
totalPage Total paginate Number true 10
currentPage Current page Number false 2
myData For callback data without process String false 'myname'
withNextPrev To show or hide button next/prev Boolean false true
nextText Text for button Next String false 'Next'
prevText Text for button Prev String false 'Prev'
activeBGColor Background color String false 'primary'
customActiveBGColor Background color custom String false '#bb06a9'