vue 仿百度分页

效果图

代码

1. 公用组件

<template><nav class="pagination_nav"><ul class="pagination"><li :class="{ 'disabled': current == 1 }"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li><li :class="{ 'disabled': current == 1 }"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li><li v-for="p in grouplist" :class="{ 'active': current == p.val }"><a href="javascript:;"@click="setCurrent(p.val)"> {{ p.text }} </a></li><li :class="{ 'disabled': current == page }"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li><li :class="{ 'disabled': current == page }"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li></ul></nav>
</template><script type="es6">
export default {data() {return {current: this.currentPage}},props: {total: {// 数据总条数type: Number,default: 0},pageSize: {// 每页显示条数type: Number,default: 10},currentPage: {// 当前页码type: Number,default: 1},pagegroup: {// 分页条数type: Number,default: 10,coerce: function (v) {v = v > 0 ? v : 5;return v % 2 === 1 ? v : v + 1;}}},computed: {page: function () { // 总页数return Math.ceil(this.total / this.pageSize);},grouplist: function () { // 获取分页页码var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;if (len <= this.pagegroup) {while (len--) {temp.push({ text: this.page - len, val: this.page - len });};return temp;}while (len--) {temp.push(this.page - len);};var idx = temp.indexOf(center);(idx < count) && (center = center + count - idx);(this.current > this.page - count) && (center = this.page - count);temp = temp.splice(center - count - 1, this.pagegroup);do {var t = temp.shift();list.push({text: t,val: t});} while (temp.length);if (this.page > this.pagegroup) {(this.current > count + 1) && list.unshift({ text: '...', val: list[0].val - 1 });(this.current < this.page - count) && list.push({ text: '...', val: list[list.length - 1].val + 1 });}return list;}},methods: {setCurrent: function (idx) {if (this.current != idx && idx > 0 && idx < this.page + 1) {this.current = idx;this.$emit('pagechange', this.current);}}}
}
</script><style lang="less">
.pagination_nav {background-color: #FFF;box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);height: 56px;display: flex;align-items: center;padding: 0 10px;.pagination {overflow: hidden;display: table;margin: 0 auto;height: 50px;li {float: left;height: 40px;border-radius: 5px;margin: 3px;color: #666;margin-right: 10px;& :hover {background: rgba(77, 167, 56, 1);color: #fff;a {color: #fff;}}a {display: block;width: 40px;height: 40px;text-align: center;line-height: 40px;font-size: 16px;border-radius: 5px;text-decoration: none;color: #333;}}.active {background: #4DA738;a {color: #fff;}}}
}
</style>

2. 调用

<template><Pagination :current-page="query.current" :page-size="query.size" :total="total" @pagechange="handlePageChange" />
</template><script>
import Pagination from "@/component/pagination.vue";
export default {components: { Pagination },data() {return {query: {current: 1,size: 10},total: 0,}},methods:{/*** 当前是第几页* @param {Int} val*/handlePageChange(val) {this.query.current = val;this.fetchData();}}
}
</script>