/**
* 使用方法:
* <ui-page-count :query="doSubmit" :total="result.numbrs"></ui-page-count>
*
* query需要传入查询方法 total传入总条数
*/
<template>
<div class="select-frame ui-page-count">
<a class="left" @click="prev" :class="{'active':groupIndex>1}">上一组</a>
<ul class="page-list">
<template v-if="pageCount<=5">
<li
v-for="(page,index) in pageCount"
:key="index"
@click="go(index)"
:class="{'active':index==pageIndex}"
>{{page}}</li>
</template>
<template v-else v-for="(page,index) in pageCount">
<div :key="index" style="display:inline-block">
<!-- 1 -->
<li v-show="index==0" @click="go(index)" :class="{'active':index==pageIndex}">{{page}}</li>
<!-- left -->
<li class="left" title="向前4页" v-show="leftEllipsis&&index==0" @click="quickJump('left')"></li>
<li
@click="go(index)"
:class="{'active':index==pageIndex}"
v-show="index!=0&&index!=pageCount-1&&index<pageIndex+3&&index>pageIndex-3"
>{{page}}</li>
<!-- right -->
<li
class="right"
title="向后4页"
v-show="rightEllipsis&&index+1==pageCount"
@click="quickJump('right')"
></li>
<!-- last -->
<li
v-show="index+1==pageCount"
@click="go(index)"
:class="{'active':index==pageIndex}"
>{{page}}</li>
</div>
</template>
</ul>
<a class="right" @click="next" :class="{'active':groupIndex<Math.ceil(pageCount/4)}">下一组</a>
<span>跳转到</span>
<input type="text" v-model="toPageIndex" />
<span>每页</span>
<div>
<input type="text" v-select="List" v-model="pageNum" />
</div>
<span>/共{{total}}条</span>
<button @click="goPage">确定</button>
</div>
</template>
<script>
export default {
props: {
query: {
type: Function,
required: true
},
total: {
default: 0 //总条数
}
},
mounted() {
this.List = [2, 10, 50, 100, 500];
},
data() {
return {
groupIndex: 1, // 当前组位置
pageIndex: 0, //当前的页位置
pageNum: 10, //每页多少条
List: "",
toPageIndex: "", //跳转到第几页
leftEllipsis: false, //左省略号
rightEllipsis: false //右省略号
};
},
computed: {
pageCount() {
return Math.ceil(this.total / this.pageNum);
}
},
watch: {
pageIndex(nV, oV) {
if (nV != oV) {
//发送查询交易
this.query(+this.pageNum + "", +nV + 1 + "");
}
},
pageNum(nV, oV) {
if (nV != oV) {
this.pageIndex = 0;
this.groupIndex = 1;
//发送查询交易
this.query(+nV + "", +this.pageIndex + 1 + "");
}
},
pageCount(nV, oV) {
this.pageIndex + 1 - 4 > 0
? (this.leftEllipsis = true)
: (this.leftEllipsis = false);
this.pageCount - this.pageIndex > 4
? (this.rightEllipsis = true)
: (this.rightEllipsis = false);
}
},
methods: {
ellipsisEvent() {
this.pageIndex + 1 - 4 > 0
? (this.leftEllipsis = true)
: (this.leftEllipsis = false);
this.pageCount - this.pageIndex > 4
? (this.rightEllipsis = true)
: (this.rightEllipsis = false);
},
quickJump(direction) {
if (direction == "right") {
this.pageIndex = this.pageIndex + 4;
this.ellipsisEvent();
} else {
this.pageIndex = this.pageIndex - 4;
this.ellipsisEvent();
}
this.groupIndex = Math.ceil((this.pageIndex+1)/4);
},
go(index) {
//跳转页面 第一页为0
this.pageIndex = index;
this.groupIndex = Math.ceil((this.pageIndex+1)/4);
this.ellipsisEvent();
},
prev() {
// if (this.pageIndex === 0) {
// return;
// }
// this.pageIndex -= 1;
if (this.groupIndex === 1) {
return;
}
this.groupIndex -= 1;
this.quickJump("left")
this.ellipsisEvent();
},
next() {
// if (this.pageIndex >= this.pageCount - 1) {
// return;
// }
// this.pageIndex += 1;
if (this.groupIndex >= Math.ceil(this.pageCount / 4)) {
return;
}
this.groupIndex += 1;
this.quickJump("right")
this.ellipsisEvent();
},
goPage() {
// 目标页大于最大页
if (this.toPageIndex > this.pageCount) {
this.alert(`超出最大页数`);
this.toPageIndex = this.pageCount;
return;
} else {
//定位当前页码
this.groupIndex = Math.ceil(this.toPageIndex / 4);
}
if (
!+this.toPageIndex ||
this.toPageIndex < 0 || this.toPageIndex > this.pageCount
) {
return;
}
this.pageIndex = this.toPageIndex - 1;
this.ellipsisEvent();
},
resetPage() {
this.pageIndex = 0;
this.ellipsisEvent();
}
}
};
</script>
<style lang="scss">
/* 带页码的分页指令样式 */
.ui-page-count {
text-align: right;
padding-right: 0.2rem;
font-size: 0.12rem;
height: 0.43rem;
line-height: 0.35rem;
user-select: none;
position: relative;
padding-bottom: 0.1rem;
margin-top: 0.3rem;
& > a {
color: rgba(100, 100, 140, 0.5);
margin-right: 0.1rem;
vertical-align: top;
cursor: pointer;
&.active {
color: #fff;
background-color: #378bd3;
padding: 5px;
border-radius: 4px;
}
&.right {
margin-left: 0.1rem;
}
}
& > .page-list {
display: inline-block;
vertical-align: top;
& > div > li {
display: inline-block;
vertical-align: top;
width: 0.33rem;
height: 0.33rem;
line-height: 0.33rem;
text-align: center;
border-radius: 50%;
margin: 0 0.05rem;
cursor: pointer;
border: 1px #cccccc solid;
&.left {
background-image: url(../asset/tradesys/leftleft.png);
background-repeat: no-repeat;
background-position: center;
}
&.left:hover {
background-image: url(../asset/tradesys/leftleft_hover.png);
background-repeat: no-repeat;
background-position: center;
}
&.right {
background-image: url(../asset/tradesys/rightright.png);
background-repeat: no-repeat;
background-position: center;
}
&.right:hover {
background-image: url(../asset/tradesys/rightright_hover.png);
background-repeat: no-repeat;
background-position: center;
}
&.active {
background-color: rgb(55, 139, 211);
color: #fff;
}
}
& > li {
display: inline-block;
vertical-align: top;
width: 0.33rem;
height: 0.33rem;
text-align: center;
border-radius: 50%;
margin: 0 0.05rem;
cursor: pointer;
&.active {
background-color: rgb(55, 139, 211);
color: #fff;
}
}
}
& > input {
color: rgb(89, 89, 89);
margin: 0 0.05rem;
width: 0.4rem;
border: 1px solid #ccc;
height: 0.3rem;
line-height: 0.3rem;
}
& > div {
position: relative;
text-align: left;
display: inline-block;
& > input {
color: rgb(89, 89, 89);
margin: 0 0.05rem;
width: 0.6rem;
border: 1px solid #ccc;
height: 0.3rem;
line-height: 0.3rem;
padding-right: 0.1rem;
}
& > i {
width: 0.67rem;
}
}
& > button {
width: 0.4rem;
background-color: #15bdf4;
color: #fff;
margin-left: 0.05rem;
border: 0;
border-radius: 0.04rem;
padding: 0.05rem 0;
cursor: pointer;
}
}
</style>
vue自定义分页组件
最新推荐文章于 2024-08-01 17:00:44 发布