基于bootstrap的分页器，Vue组件

基于bootstrap的分页器，需要引入bootstrap的相关依赖，点击页码数字可以进行相应的响应（换页/加载数据）

Pagenation.vue

<template>
    <div id="pagenation" class="row justify-content-center">
        <div class="col-auto">
            <ul v-if="pagenation.total>pagenation.pageSize" class="pagination ">
                <li class="page-item">
                    <a href="javascript:void(0);" @click="startPage" class="page-link">首页</a>
                </li>
                <li v-for="i in displayPage"
                    :key="'pagenation_'+i" :class="pagenationItemActive(i)">
                    <a href="#" @click="selectPage(i)" class="page-link">{{i}}</a>
                </li>
                <li class="page-item ">
                    <a href="javascript:void(0);" @click="endPage" class="page-link">尾页</a>
                </li>
            </ul>
        </div>
        <div class="col-auto  mb-3">
            <div class="input-group" style="width: 150px">
                <input type="text" class="form-control" :placeholder="jumpPageNumPlaceholder" v-model.number="jumpPageNum">
                <div class="input-group-append">
                    <button @click="jumpPageClick" @blur="jumpPageBlur" class="input-group-text">跳转</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Pagenation",
        data() {
            return {
                jumpPageNum: '',
                jumpPageNumPlaceholder: '跳转到...'
            }
        },
        props: {
            pagenation: Object,
            // pagenation: {
            //     total: 22,
            //     pageSize: 10,
            //     pageNum: 1,
            // },

            pageNumChange: Function,
        },
        computed: {
            displayPage() {
                let totalPage = this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1)
                let pageNum = this.pagenation.pageNum;
                if (totalPage < 10) {
                    return totalPage;
                } else {
                    let arr = []
                    if (pageNum < 5) {
                        for (let i = 1; i <= 10; i++) {
                            arr.push(i)
                        }
                    } else if (pageNum >= totalPage - 5) {
                        for (let i = totalPage - 9; i <= totalPage; i++) {
                            arr.push(i)
                        }
                    } else {
                        for (let i = pageNum - 4; i <= pageNum + 5 && i < totalPage; i++) {
                            arr.push(i)
                        }
                    }
                    return arr
                }
            }
        },
        watch: {
            'pagenation.pageNum'(newValue, oldValue) {
                console.log(newValue, oldValue)
                this.pageNumChange(newValue, oldValue)
            },
        },
        methods: {
            pagenationItemActive(i) {
                if (i == this.pagenation.pageNum) {
                    return 'page-item active'
                } else {
                    return 'page-item'
                }
            },
            selectPage(pageNum) {
                this.pagenation.pageNum = pageNum
            },
            startPage() {
                if (this.pagenation.pageNum !== 1) {
                    this.pagenation.pageNum = 1
                }
            },
            endPage() {
                let totalPage = this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1)
                if (this.pagenation.pageNum !== totalPage) {
                    this.pagenation.pageNum = totalPage
                }
            },
            jumpPageBlur() {
                this.jumpPageNumPlaceholder = '跳转到...'
            },
            jumpPageClick() {
                let regex = /^[0-9]+$/;
                if (regex.test(this.jumpPageNum)) {
                    let jumpPageNum = parseInt(this.jumpPageNum)
                    if (jumpPageNum > 0 && jumpPageNum <= (this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1))) {
                        this.pagenation.pageNum = jumpPageNum
                    } else {
                        this.jumpPageNumPlaceholder = '超出范围'
                    }
                } else {
                    this.jumpPageNumPlaceholder = '输入错误'
                }
                this.jumpPageNum = '';
            }
        }
    }
</script>

<style scoped>

</style>

应用：

引入组件Pagenation.vue

  <!--分页器-->
<Pagenation :pagenation="pagenation" :page-num-change="pageNumChange"></Pagenation>

data提供的数据
pagenation: {
    total: 22,//总数据量
    pageSize: 10,//每页显示数据量
    pageNum: 1,//当前页码
},

methods定义的方法pageNumChange：当当前页码改变时触发，用于加载数据

pageNumChange(newPageNum, oldPageNum){
//可以传入两个参数，newPageNum：新的页码，oldPageNum：之前的页码
  console.log("pageNumChange",newPageNum, oldPageNum)
},