<template>
<!-- <div class="model" v-dragable></div> -->
<!-- <div class="models" v-dragable></div> -->
<div class="page">
<div class="page_c">
<el-button type="primary" text class="prev" @click="prev">上一页</el-button>
<div class="page_left Normal" v-if="page_flag" @click="setColor($event, 1,'')">{{ pageNum_left }}</div>
<div class="page_middle Normal" v-for="(item, index) in list" @click="setColor($event, item, index)">
{{ item }}
</div>
<div class="page_right Normal" @click="setColor($event, pageNum,'')">{{ pageNum }}</div>
<el-button type="primary" text @click="next">下一页</el-button>
<el-button type="primary" text>去</el-button>
<div class="Normalstring">
<el-input-number v-model="pageNavator" class="ipt" @blur="blur" :min="1"></el-input-number>
</div>
<el-button type="primary" text>页</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
// import { useRouter } from "vue-router";
// const router = useRouter()
// import Api from '../api/login/login.ts';
// Api.Login({ username: 'admin', password: 'admin123', type: 'pc' }, 'post', '/api/auth/login').then((res: any) => {
// console.log(res)
// })
let nomal: number = 8;
let page_flag: Boolean = true;
let total = ref(50); //这里是配置条数展示几页的
let pageNum_left: number = 1;
let pageNum:number = Math.ceil(total.value / 20);
let count = 0;
//定义一个页码常量
let pageNormal: number =1;
//定义一个跳转页码
let pageNavator =ref(1);
let time:any = null //定义定时器
let list:any[]=[]
let object = reactive({
list: [],
})
//初始化方法
const getIndex = () => {
//这里是小于配置走的方法
if (pageNum < nomal) {
if (pageNum - 2 < 0) {
//这里就是不需要去循环中间的数组
page_flag = false;
} else {
//这里就是需要去循环中间数据的
for (let i = 2; i < pageNum; i++) {
list.push(i)
}
}
}
//这里是大于配置走的方法
else {
for (let i = 2; i < nomal - 1; i++) {
list.push(i)
}
list.push('...')
}
}
//统一改变class方法
const changeColor = (h:any) => {
let color = document.querySelectorAll('.Normal');
for (var i = 0; i < color.length; i++) {
color[i].classList.add('tive');
color[i].classList.remove('ative')
if (color[i].innerHTML == h) {
color[i].classList.remove('tive')
color[i].classList.add('ative');
}
}
}
//统一执行中间渲染的方法
const render = (list:any, h:any) => {
list = [];
list.push('...');
for (let i = h - 2; i < h; i++) {
list.push(i);
}
for (let i = h; i <= h + 2; i++) {
list.push(i);
}
list.push('...');
}
//统一执行最右侧的数据；
const renderRight = (list:any, h:any) => {
list = [];
list.push('...');
for (let i = h - 2; i < h; i++) {
list.push(i);
}
for (let i = h; i < h + 3; i++) {
list.push(i);
}
}
//统一点击大于最后一页的数据
const renderRightAll = (list:any, h:any) => {
list = [];
list.push('...');
for (let i = h - 5; i <= h - 1; i++) {
list.push(i);
}
}
//统一点击最后一页；
const renderafter = (list:any, h:number) => {
list = [];
list.push('...');
for (let i = pageNum - 5; i < h; i++) {
list.push(i);
}
for (let i = h; i < h; i++) {
list.push(i);
}
}
//执行初始化方法
getIndex();
//设置页码的方法
const setColor = (e:any, item:any, index:any) => {
let html = item
let h:any = null;
e;
//这里是判断是否为...
if (html == '...') {
if (index > 0) {
//说明这里是增加
setColor('', pageNormal + 5,'')
} else {
//说明这里是减少
setColor('', pageNormal - 5,'')
}
return
} else {
//这里是设置页码的实现
h = Number(html)
pageNormal = h;
pageNavator.value=h;
//如果是0和1直接初始化渲染就可以
if (h == 1 || h == 0) {
list = [];
getIndex();
setTimeout(() => {
changeColor(1);
}, 0.1);
return
}
//如果直接点击的是最后一页
else if (h == pageNum) {
if (h >= nomal) {
renderRightAll(object, h);
}
}
else {
//通过5去计算默认的页码
if (h % 5 == 0) {
count = 0
//小于页码就要显示...
if (h + 3 < pageNum) {
render(object, h)
setTimeout(() => {
changeColor(h);
}, 0.1);
return
}
//小于页码就要显示...
if (h + 3 == pageNum) {
renderRight(object, h)
}
//小于页码就要显示...
if (h > pageNum) {
renderafter(object, pageNum - 1)
setTimeout(() => {
changeColor(pageNum);
}, 0.1);
return
}
}
//大于5个页码的逻辑
else if (h > 5) {
count = 0
if (h + 3 < pageNum) {
render(object, h)
clearTimeout(time)
time = setTimeout(() => {
changeColor(h);
}, 0.1);
return
} else {
if (h + 3 == pageNum) {
renderRight(object, h)
} else {
count++;
if (count > 1) {
setTimeout(() => {
changeColor(h);
}, 0.1);
return
}
renderafter(object, pageNum)
}
}
}
//小于5个页码的逻辑
else if (h < 5) {
count = 0;
if (h - 3 <= 1) {
list = [];
getIndex();
}
}
}
}
setTimeout(() => {
changeColor(h);
}, 0.1);
}
//上一页按钮
const prev = () => {
pageNormal--
if (pageNormal < 1) {
pageNormal =1
}
pageNavator.value=pageNormal
setColor('', pageNormal,'')
}
//下一页按钮
const next = () => {
pageNormal++
if (pageNormal > pageNum) {
pageNormal = pageNum
}
pageNavator.value=pageNormal
setColor('', pageNormal,'')
}
//输入页码跳转分页
const blur=(e:any)=>{
let h=Number(e.target.value)
if(h>pageNum){
h=pageNum
}
setColor('',h,'')
}
</script>
<style scoped>
.tive{
background-color:#fff !important;
color:#666 !important;
}
.ative{
background-color:#409eff !important;
color:#fff !important;
}
.ipt{
width:70px;
}
.prev {
margin-right: 10px
}
:deep(.el-input-number__increase) {
display:none;
}
:deep(.el-input-number__decrease){
display:none;
}
:deep(.el-input__wrapper){
padding:0;
}
:deep(.el-input__inner){
text-align:left;
padding-left:16px;
}
.Normal {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 0.13rem !important;
color:#666;
font-weight:bolder;
}
.Normal:nth-of-type(1) {
background-color: #409eff;
color: #fff;
}
.page {
width: 100%;
height: 50px;
border: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.16rem;
}
.page_c {
display: flex;
}
.models {
width: 1rem;
height: 1rem;
background-color: yellow;
cursor: pointer;
position: absolute;
top: 125px;
left: 0px;
}
.model {
width: 1rem;
height: 1rem;
background-color: red;
cursor: pointer;
position: absolute;
top: 25px;
left: 0px;
}
.Index {
font-size: 0.16rem
}
</style>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
