Components

vc-pagination

Install

npm install vc-pagination --save
// build version
import vcPagination from 'vc-pagination'
// recommend for *.vue project for small bundle size
import vcPagination from 'vc-pagination/src/Pagination.vue'
// commonjs
require('./dist/build.min.js')
// script tag
<script src='./dist/build.min.js'></script>

Usage

props

simple

普通版本

align

prevText

nextText

firstPageText

lastPageText

displayNum

可看见的页码数目

edgeNum

页码较多时，前后空余的可选页码数量

current

当前页码数

pageSize

页面数据量

total

全部结果集数目

onPageChange

jumpable

是否显示跳转控件（页码输入框和跳转按钮）

goLabel

跳转按钮的文案

invalidCallback: {

pageSizeEditable

pageSizeArr

onPageSizeChange

example

import Vue from 'vue'
import vcPagination from '../dist/build.js'
new Vue({
    el: '#app',
    data () {
        return {
            bools: {
                'true': true,
                'false': false
            },
            simple: true,
            align: 'center',
            firstPageText: '首页',
            lastPageText: '末页',
            displayNum: 6,
            edgeNum: 2,
            total: 200,
            current: 1,
            pageSize: 20,
            pageSizeEditable: true, 
            pageSizeArr: [10, 20, 40, 100],
            jumpable: true,
            goLabel: '跳转',
            invilidPageHandler: null,
            onPageChange: null,
            onPageSizeChange: null,
            pageSizeArrStr: '', // just for demo
        }
    },
    methods: {
        setPageSizeArr: function () {
            this.pageSizeArr = this.pageSizeArrStr.replace(/\s/, '').split(',')
        }
    },
    components: {
        vcPagination
    }
})
<vc-pagination
    :simple="simple"
    :align="align"
    :first-page-text="firstPageText"
    :last-page-text="lastPageText"
    :display-num="displayNum"
    :edge-num="edgeNum"
    :total="total"
    :current.sync="current"
    :page-size.sync="pageSize"
    :page-size-editable="pageSizeEditable"
    :page-size-arr="pageSizeArr"
    :jumpable="jumpable"
    :go-label="goLabel"
    :invilid-page-handler="invilidPageHandler"
    :on-page-change="onPageChange"
    :on-page-size-change="onPageSizeChange"
>
</vc-pagination>