本文主要介绍Vue2.0如何封装分页查询的组件
一、业务场景
1.1适用于Vue,PC端使用的小伙伴,养成封装的习惯,可以方便你我他。
1.2案例展示图
二、完整代码
2.1组件页面
在src\components目录下创建Pager.vue
<template>
<div class="pager-wrapper" ref="pager">
<div class="pager-box">
<span class="pager-prev" :class="{'pager-disabled':prevDisable}" @click="jumpPrev()">上一页</span>
<div v-for="(i,index) in pageSize" :key="index">
<span v-if="i==pageNo" class="pager-curr">
<em class="pager-em"></em>
<em>{{i}}</em>
</span>
<span class="pager-discurr" v-else-if="pageNo<5&&(i)<6" @click="jump(i)">{{i}}</span>
<span
class="pager-discurr"
v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2) || (pageNo > pageSize - 4 && i > pageSize - 5)"
@click="jump(i)"
>{{i}}</span>
<template v-else>
<span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
<span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
<span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
<span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
<span v-if="pageNo > pageSize - 5 && i > pageSize - 6" class="pager-spr">…</span>
</template>
</div>
<span class="pager-next" :class="{'pager-disabled':nextDisable}" @click="jumpNext()">下一页</span>
</div>
<div class="pager-input">
<span class="input-tip">共{{pageSize}}页,到第</span>
<input class="input-item" type="text" v-model.trim="jumpPage" />
<span class="input-tip">页</span>
<span
class="pager-btn-go"
:class="{'pager-disabled':!(jumpPage&&jumpPage.length)}"
@click="Go()"
>确定</span>
</div>
</div>
</template>
<script>
export default {
model: {
//通过v-model传过来的参数
prop: "pageNo",
event: "jumpPage"
},
props: {
pageSize: {
type: Number,
default: 1
},
pageNo: {
//通过v-model传过来的参数
type: Number,
default: 1
}
},
data() {
return {
jumpPage: "" //避免操作props参数
};
},
computed: {
prevDisable: function() {
//“上一页”按钮是否可点
if (this.pageNo > 1) {
return false;
} else {
return true;
}
},
nextDisable: function() {
//“下一页”按钮是否可点
if (this.pageNo < this.pageSize && this.pageSize > 1) {
return false;
} else {
return true;
}
}
},
methods: {
jumpPrev: function() {
//点击上一页
if (this.pageNo == 1) {
return;
} else {
this.$emit("jumpPage", this.pageNo - 1);
this.$emit("on-jump", this.pageNo - 1);
}
},
jumpNext: function() {
//点击下一页
if (this.pageNo == this.pageSize) {
return;
} else {
this.$emit("jumpPage", this.pageNo + 1); //修改当前页码
this.$emit("on-jump", this.pageNo + 1); //跳转
}
},
jump: function(id) {
//直接跳转
if (id > this.pageSize) {
id = this.pageSize;
}
this.jumpPage = "";
this.$emit("jumpPage", id); //修改当前页码
this.$emit("on-jump", id); //跳转
},
Go: function() {
if (this.jumpPage == "") {
//判空处理
return;
} else if (/^\d*$/.test(parseInt(this.jumpPage))) {
//填写数字才能跳转
this.jump(parseInt(this.jumpPage));
this.jumpPage = "";
} else {
this.jumpPage = "";
return;
}
}
}
};
</script>
<style scoped lang="less">
.pager-wrapper {
display: flex;
.pager-box {
display: flex;
align-items: center;
justify-content: center;
.pager-prev,
.pager-next {
width: 60px;
height: 28px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
cursor: pointer;
&.pager-disabled {
color: #999;
}
}
.pager-curr {
width: 40px;
height: 28px;
background: rgba(216, 30, 33, 1);
border: 1px solid rgba(229, 229, 229, 1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-right: 8px;
cursor: pointer;
}
.pager-discurr {
width: 40px;
height: 28px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
cursor: pointer;
}
.pager-spr {
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(51, 51, 51, 1);
margin-right: 8px;
}
}
.pager-input {
display: flex;
align-items: center;
justify-content: center;
.input-tip {
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(51, 51, 51, 1);
line-height: 14px;
}
.input-item {
width: 40px;
height: 28px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
margin: 0 8px;
text-align: center;
}
.pager-btn-go {
width: 60px;
height: 28px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(229, 229, 229, 1);
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
cursor: pointer;
&.pager-disabled {
color: #999;
}
}
}
}
</style>
2.2列表页List.vue页面件引入pager.vue
<template>
<div class="pager-wrapper">
<pager :pageSize="pageSize" v-model="pageNo" @jump="jump"></pager>
</div>
</template>
import pager from "@/components/pager.vue";
export default {
components: {
pager
},
data() {
return {
pageSize: 0, // 总页数
pageNo: 1, // 当前页
}
},
methods: {
jump(id) {
this.pageNo = id;
}
}
}
友情提供-总页数计算公式
this.pageSize = Math.ceil(res.totalNum / this.pages);
20200620-更新日志
1.完善分页查询,当页面为最后5页时的条件处理。