分页组件
于2023-08-10 23:18:08发布
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
ul {
list-style-type: none;
display: flex;
}
li {
padding: 0 10px;
cursor: pointer;
}
.on {
color: #c00;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-if="pageNum > maxShowNum" @click="set('prev')">上一页</li>
<template v-if="pageNum > maxShowNum">
<li @click="set(1, true)">1</li>
<li>...</li>
</template>
<li v-for="(item, key) in list" :key="key" :class="{'on' : item === pageNum}" @click="set(item)">{{ item }}</li>
<template v-if="list.length >= maxShowNum && !list.includes(pagination[pagination.length - 1])">
<li>...</li>
<li @click="set(pagination[pagination.length - 1], true)">{{ pagination[pagination.length - 1] }}</li>
<li @click="set('next')">下一页</li>
</template>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
total: 50, // 总条数
pageSize: 3, // 一页显示多少条
pageNum: 1, // 当前页码
pagination: [], // 页码数组
list: [], // 要显示的页码数组
maxShowNum : 5, // 最大展示的页码数
start: 0, // 开始
end: 0, // 结束
}
},
methods: {
set(item, flag) {
if (item === 'prev') {
this.pageNum--;
if (this.pageNum <= 0) {
this.pageNum = 1;
}
if (!this.list.includes(this.pageNum)) {
this.start -= this.maxShowNum;
this.end -= this.maxShowNum;
this.list = this.pagination.slice(this.start, this.end);
}
} else if (item === 'next') {
this.pageNum++;
if (this.pageNum > this.pagination.length) {
this.pageNum = this.pagination.length;
}
if (!this.list.includes(this.pageNum)) {
this.start += this.maxShowNum;
this.end += this.maxShowNum;
this.list = this.pagination.slice(this.start, this.end);
}
} else {
this.pageNum = item;
if (flag) {
if (this.pageNum >= this.pagination[this.pagination.length - 1]) {
const num = Math.ceil(this.pageNum / this.maxShowNum) * this.maxShowNum;
this.start = num - this.maxShowNum;
this.end = num;
} else {
this.start = 0;
this.end = this.maxShowNum;
}
this.list = this.pagination.slice(this.start, this.end);
}
}
},
addPagination() {
var p = Math.ceil(this.total / this.pageSize);
for (var i = 1; i <= p; i++) {
this.pagination.push(i);
}
this.list = this.pagination.slice(this.start, this.end);
}
},
created() {
this.end = this.maxShowNum;
if (this.pageSize <= 0) {
this.pageSize = 1;
}
this.addPagination();
}
})
</script>
</body>
</html>