Vue分页并返回您的数据

Vue-paginate-al (vue-paginate-al)

Vue paginate with return your data.

Vue分页并返回您的数据。

View demo 查看演示 Download Source 下载源

通过NPM安装 (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'

道具	描述	类型	需要	例
总页数	总分果	数	真正	10
当前页面	当前页面	数	假	2
myData	对于没有过程的回调数据	串	假	'我的名字'
withNextPrev	显示或隐藏下一个/上一个按钮	布尔型	假	真正
nextText	按钮文字下一步	串	假	'下一个'
prevText	按钮上一页的文字	串	假	'上一页'
activeBGColor	背景颜色	串	假	'主'
customActiveBGColor	自定义背景色	串	假	'＃bb06a9'

翻译自: https://vuejsexamples.com/vue-paginate-with-return-your-data/