一、在components文件夹下新建 pagination.vue
<template>
<div class="page-wrap">
<ul>
<li class="li-page" :plain="true" @click="goPrePage">«</li>
<li v-for="(i, index) in showPageBtn" :key="index"
:class="{active: i === currentPage, pointer: i, hover: i && i !== currentPage}" @click="pageOffset(i)">
<a v-if="i">{{i}}</a>
<a v-else>···</a>
</li>
<li class="li-page" :plain="true" @click="goNextPage">»</li>
</ul>
</div>
</template>
<script>
export default {
name: "pagination",
props: {
num: Number,
limit: Number
},
data: () => ({
offset: 0
}),
computed: {
prePage() {
return this.offset !== 0 && this.num;
},
nextPage() {
return (this.offset + this.limit < this.num) && this.num
},
totalPage() {
return Math.ceil(this.num / this.limit)
},
currentPage() {
return Math.ceil(this.offset / this.limit) + 1
},
showPageBtn() {
const pageNum = this.totalPage;
const index = this.currentPage;
if (pageNum <= 5) return [...new Array(pageNum)].map((v, i) => i + 1);
if (index <= 2) return [1, 2, 3, 0, pageNum];
if (index >= pageNum - 1) return [1, 0, pageNum - 2, pageNum - 1, pageNum];
if (index === 3) return [1, 2, 3, 4, 0, pageNum];
if (index === pageNum - 2) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
return [1, 0, index - 1, index, index + 1, 0, pageNum]
}
},
methods: {
pageOffset(i) {
if (i === 0 || i === this.currentPage) return;
this.offset = (i - 1) * this.limit;
this.$emit('getNew', this.offset);
},
goPrePage() {
if (!this.prePage) {
// alert("这里是第一页呀，亲!");
this.$message({
showClose: true,
message: '这是第一页哦！',
type: 'warning'
});
return;
}
this.offset -= this.limit;
this.$emit('getNew', this.offset);
},
goNextPage() {
if (!this.nextPage) {
// alert("已经是最后一页了呢~");
this.$message({
showClose: true,
message: '这是最后一页啦！',
type: 'warning'
});
return;
}
this.offset += this.limit;
this.$emit('getNew', this.offset);
}
}
}
</script>
<style scoped>
.li-page {
/* line-height: 25px; */
cursor: pointer;
color: #505362;
background-color: #f4f4f5;
}
.active {
border-color: #0C9F9A;
background-color: #0C9F9A;
}
.pointer {
cursor: pointer;
}
.hover {
color: #FFF;
background-color: #FFF;
}
.active a {
color: #FFF;
}
.page-wrap {
font-size: 14px;
margin-top: 10px;
text-align: center;
}
.page-wrap ul {
display: inline-block;
list-style: none;
overflow: hidden;
padding-inline-start: 0px;
}
.page-wrap li {
float: left;
color: #505362;
padding: 10px 17px;
margin: 0 5px;
border-radius: 3px;
user-select: none;
border: 1px solid transparent;
}
</style>
二、在需要分页的页面引入组件
<script>
import pagination from "../../components/pagination.vue"
export default {
components: {
pagination
},
data(){
return {
numpage: 0,
limit: 10,
currentList: [],
list:[{
name:'dsa',id:1
},{
name:'dsa',id:2
},{
name:'dsa',id:3
},]
}
},
mounted() {
this.getNew(0);
this.numpage = this.list.length;
},
methods:{
// 分页
getNew(value) {
this.currentList = this.list.slice(value, value + this.limit);
},
}
}
</script>
三、将组件引入到页面使用
<div>
<!-- 分页 -->
<pagination :num="numpage" :limit="limit" @getNew="getNew"></pagination>
</div>
好啦，一个分页组件就这么封装好啦！
/********
*
* .-~~~~~~~~~-._ _.-~~~~~~~~~-.
* __.' 欢迎访问 ~. .~ `.__
* .'// 我的博客 \./ ☞ 送你小 ☜ \\`.
* .'// | \\`.
* .'// .-~"""""""~~~~-._ | _,-~~~~"""""""~-. \\`.
* .'//.-" `-. | .-' "-.\\`.
* .'//______.============-.. \ | / ..-============.______\\`.
* .'______________________________\|/______________________________`.
*/
vue 单独封装分页组件的相关教程结束。
