自定义vue组件之仿百度分页逻辑

时间:2022-12-20 09:58:07

自定义vue组件之仿百度分页逻辑

<template>
<div>
<ul :total="total" :pageSize="pageSize" :pageNum="pageNum">
<li @click="leftRight(1)">
<上一页
</li>
<li @click="pageClick(item)" :style="{color:item==page?'red':'black'}" v-for="item in arr" :key="item">{{item}}
</li>
<li @click="leftRight(2)">下一页></li>
</ul>
</div>
</template>

<script>
export default {
props: {
total: {
type: Number,
default: 0
},
pageSize: {
type: Number,
default: 10
},
pageNum: {
type: Number,
default: 1
},
},
data() {
return {
length: 0,
page: 1,
arr: [],
}
},
mounted() {
this.getLength()
},
methods: {
getLength() {//获取页码大小并初始化页面
let shuzu = [];
if (this.total % this.pageSize == 0) {
this.length = this.total / this.pageSize;
} else {
this.length = parseInt(this.total / this.pageSize) + 1;

}
// console.log(this.length + 'this.length')
if (this.length >= 10) {
shuzu.length = 10
} else {
shuzu.length = this.length
}
for (let i = 0; i <shuzu.length; i++) {
shuzu[i] = i + 1
}
this.arr = shuzu
},
getpage(page) {
let shuzu = [];
let j = 0
let str = 0
if (page + 5 <= this.length) {
str = page + 5
j = page - 5
} else {
str = page + (this.length - page)
j = str - 10
}

for (let i = j+1; i <= str; i++) {
shuzu.push(i)
}
this.arr = shuzu
},
pageClick(page) {
this.page = page
// console.log(this.arr.length)
if (page <= this.arr.length / 2 || this.length <= 10) {
alert('1')
this.getLength()
} else {
this.getpage(page)
}
this.pageNumChange(this.page)
},
leftRight(e){
switch (e){
case 1:
if(this.page==1){
this.page=1
}
else {
this.page-=1
}
this.pageClick(this.page)
break;
case 2:
if(this.page==this.length){
this.page=this.length
}else {
this.page+=1
}
this.pageClick(this.page)
break;
}
this.pageNumChange(this.page)
},
pageNumChange(page){
this.$emit('pageNumChange',page)
}
}
}
</script>

<style scoped>
* {
margin: 0;
padding: 0;
}

ul > li {
-ms-user-select:none;
margin:0 2px;
display: inline-block;
border: 1px black solid;
min-width: 20px;
height: 20px;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}

li:hover {
border: 1px cornflowerblue solid;
}
</style>

  

自定义vue组件之仿百度分页逻辑

页面样式没有调整好  不过逻辑是完成了