父组件
<template>
<paging :val1="dataLength" :val2="pageNow" :val3="pageAll" :val4="numbers" :val5="changePage" />
</template>
<script setup>
import paging from "@/views/pageing.vue";
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
let jsonArrayList = ref(Array.apply(null, { length: 200 }).map((item, index) => { return index + 1 }));
let dataLength = jsonArrayList.value.length;
// let dataLength = 200;
let numbers = ref(15);// 每页数据条数
let pageNow = ref(1); // 当前页
let pageAll = ref(Math.ceil(dataLength / numbers.value)); // 总页数
let changePage = ref(1);
</script>
子组件
<template>
<div class="pagebox">
<span ref="getpageFirst" class="pageBtn firstPage " @click="pageNow = 1">首页</span>
<ul class="btnPages">
<!-- 动态切换类名 -->
<li :class="pageNow == itemNumList ? 'pageBtn focusePage' : 'pageBtn' " v-for="itemNumList in showPage()"
@click="pageNow = itemNumList">{{ itemNumList }}</li>
</ul>
<span class="pageBtn lastPage" @click="pageNow = pageAll">尾页</span>
<span class="pageBtn prePage" @click="pageNow > 1 ? pageNow-- : 0">上一页</span>
<span class="pageBtn nextPage" @click="pageNow < pageAll ? pageNow++ : 0">下一页</span>
<input class="inpbox" type="text" v-model="changePage"><span class="pageBtn" @click="changeFunpage">GO</span>
<span class="pageContent">第{{ pageNow }}页,每页{{ numbers }}条, 总计{{ pageAll }}页,{{ dataLength }}条数据</span>
</div>
</template>
<script setup>
import { ref, onMounted, computed, getCurrentInstance, nextTick } from "vue";
// 父传子--接收值
const jsonVal = defineProps({
val1: Number, val2: Number, val3: Number, val4: Number, val5: Number,
})
let dataLength = ref(jsonVal.val1);
let pageNow = ref(jsonVal.val2);
let pageAll = ref(jsonVal.val3);
let numbers = ref(jsonVal.val4);
let changePage = ref(jsonVal.val5);
// go
function changeFunpage() {
if (changePage.value > 0 && changePage.value <= pageAll.value) {
pageNow.value = changePage.value
return;
} else { console.log(0) }
}
// 功能--按钮的显示函数
function showPage() { // 按钮的显示
if (pageAll.value <= 4) {
return pageAll.value
} else if (pageNow.value == 1) {
return [pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
} else if (pageNow.value == 2) {
return [pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
} else if (pageNow.value == 3) {
return [pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
} else if (pageNow.value == 4) {
return [pageNow.value - 3, pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
} else if (pageNow.value == pageAll.value - 2) {
return [pageAll.value - 5, pageAll.value - 4, pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
} else if (pageNow.value == pageAll.value - 1) {
return [pageAll.value - 4, pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
} else if (pageNow.value > 4 && pageNow.value < pageAll.value - 2) {
return [pageNow.value - 3, pageNow.value - 2, pageNow.value - 1, pageNow.value, +pageNow.value + 1, +pageNow.value + 2, +pageNow.value + 3]
} else {
return [pageAll.value - 3, pageAll.value - 2, pageAll.value - 1, pageAll.value]
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
ul,
li {
display: inline;
list-style-position: inherit;
}
.pagebox {
margin-top: 50px;
padding-left: 50px;
/* background-color: aqua; */
display: flex;
justify-content: start;
align-items: center;
}
/* 正常 */
.pageBtn {
padding: 5px 10px;
background-color: rgb(210, 217, 215);
margin-right: 10px;
border-radius: 3px;
}
/* 选中 */
.focusePage {
background-color: rgb(42, 138, 190);
color: #fff;
font-weight: bold;
}
.inpbox {
width: 50px;
height: 33px;
border-right: transparent;
padding: 10px;
}
</style>
效果
需要加省略号的在 return 的数组里 直接加上就好了