效果
说在前面
分页器是列表展示页面必备组件之一,由于项目需要,所以我也简单的封装了一个分页器组件,效果如上图。
组件设计
入参
props: { //总数 total: { type: Number, default: 100, }, //每页条数 pageSize: { type: Number, default: 10, }, //数字页码展示个数 showNum: { type: Number, default: 3, }, //当前页码 currentPage: { type: Number, default: 1, }, //当前页码颜色 activePageColor: { type: String, default: '#2A97FF', }, },
变量监听,动态计算展示的页码
watch: { currentPage(newVal) { this.calPages(newVal); this.currentPageT = newVal; }, pageSize() { this.calPages(this.currentPage); }, }, methods: { calPages(newVal) { const left = Math.ceil(this.showNum / 2); this.startPage = left > newVal ? 0 : Math.min(newVal - left, this.getPageNum() - this.showNum); this.endPage = Math.min( this.getPageNum(), this.startPage + this.showNum ); }, getPageNum() { return Math.ceil(this.total / this.pageSize); }, }
页码跳转事件
jumpPage(currentPageT) { if (currentPageT <= 0 || currentPageT > this.getPageNum()) return; this.currentPageT = parseInt(currentPageT); this.$emit('currentPageChange', parseInt(currentPageT)); },
完整代码
<template> <div class="pagination-item"> <div class="total">总共{{ getPageNum() }}页,{{ total }}条数据</div> <div class="pagination-content"> <span >每页<input v-model="pageSizeT" @change="pageSizeChange(pageSizeT)" />条</span > <span class="btn btn-pre" @click="jumpPage(currentPageT - 1)" ><</span > <span v-for="num in endPage - startPage" :key="num" :style=" currentPageT === num + startPage ? 'color:' + activePageColor + ';' : '' " class="btn btn-num" @click="jumpPage(num + startPage)" >{{ num + startPage }}</span > <span class="btn btn-next" @click="jumpPage(currentPageT + 1)" >></span > <span ><input v-model="currentPageT" type="number" /><span class="btn btn-jump" @click="jumpPage(currentPageT)" >跳转</span ></span > </div> </div> </template> <script> export default { name: 'pagination', props: { //总数 total: { type: Number, default: 100, }, //每页条数 pageSize: { type: Number, default: 10, }, //数字页码展示个数 showNum: { type: Number, default: 3, }, //当前页码 currentPage: { type: Number, default: 1, }, //当前页码颜色 activePageColor: { type: String, default: '#2A97FF', }, }, data() { return { totalT: this.total, pageSizeT: this.pageSize, currentPageT: '', startPage: 0, endPage: 0, }; }, watch: { currentPage(newVal) { this.calPages(newVal); this.currentPageT = newVal; }, pageSize() { this.calPages(this.currentPage); }, }, mounted() { this.initData(); }, methods: { calPages(newVal) { const left = Math.ceil(this.showNum / 2); this.startPage = left > newVal ? 0 : Math.min(newVal - left, this.getPageNum() - this.showNum); this.endPage = Math.min( this.getPageNum(), this.startPage + this.showNum ); }, getPageNum() { return Math.ceil(this.total / this.pageSize); }, initData() { this.endPage = Math.min( this.getPageNum(), this.startPage + this.showNum ); if (this.endPage !== 0) this.currentPageT = 1; }, jumpPage(currentPageT) { if (currentPageT <= 0 || currentPageT > this.getPageNum()) return; this.currentPageT = parseInt(currentPageT); this.$emit('currentPageChange', parseInt(currentPageT)); }, pageSizeChange(pageSizeT) { this.$emit('pageSizeChange', parseInt(pageSizeT)); }, }, }; </script> <style lang="less" scoped> .pagination-item { font-size: 4vw; .total { text-align: center; } .pagination-content { display: flex; flex-wrap: wrap; justify-content: space-around; input { width: 10vw; border: rgb(201, 194, 194) 1px solid; text-align: center; } } } </style>
组件引用
<template> <div class="search-result-page"> <pagination v-if="currentTab !== 3" :total="total" :page-size="pageSize" :show-num="showNum" :current-page="currentPage" @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange" ></pagination> </div> </template> <script> import pagination from '../components/pagination.vue'; export default { name: 'searchResult', components: { pagination, }, data() { return { total: 100, showNum: 5, pageSize: 10, currentPage: 1, }; }, mounted() { }, methods: { currentPageChange(currentPage) { this.currentPage = currentPage; }, pageSizeChange(pageSize) { this.pageSize = pageSize; }, }, }; </script> <style lang="less" scoped></style>
写在后面
更多有趣组件可以查看 http://120.79.163.94/JYeontuComponents/#/homePage