1.0.1 • Published 6 years ago

vue-paginate-ml v1.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

Install via NPM

    npm install --save vue-paginate-ml

Register as Plugin

    import Vue from 'vue'
    import VuePaginateMl from 'vue-paginate-ml'

    Vue.component('vue-paginate-ml', VuePaginateMl)

Usage

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

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

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

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

    <script>
        import VuePaginateMl from 'vue-paginate-ml'

        export default {
            name: 'App',
            components: {
                VuePaginateMl
            },
            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

PropsDescriptionTypeRequiredExample
totalPageTotal paginateNumbertrue10
currentPageCurrent pageNumberfalse2
myDataFor callback data without processStringfalse'myname'
withNextPrevTo show or hide button next/prevBooleanfalsetrue
nextTextText for button NextStringfalse'Next'
prevTextText for button PrevStringfalse'Prev'
activeBGColorBackground colorStringfalse'primary'
customActiveBGColorBackground color customStringfalse'#bb06a9'