<template>
? ? <div class="orderbottom">
? ? ? ? <div class="orderBottomLeft">共{{ list > limit list / limit : 1 }} 页</div>
? ? ? ? <div class="orderBottomRight">
? ? ? ? ? ? <button @click="() => resve()">上一页</button>
? ? ? ? ? ? <button v-show="feature(index)" class="list" :class="{ 'cusese': dataindex == index + 1 }"
? ? ? ? ? ? ? ? v-for="(item, index) in list > limit list / limit : 1" :key="index" @click="() => dataindex = index + 1">
? ? ? ? ? ? ? ? <!-- {{ index + 1 }} -->
? ? ? ? ? ? ? ? {{ s(index) }}
? ? ? ? ? ? </button>
? ? ? ? ? ? <button @click="() => add()">下一页</button>
? ? ? ? </div>
? ? </div>
</template>
<script setup>
import { defineProps, ref, computed } from 'vue';
const dataindex = ref(1)
//传两个参数 总条数和一页多少条数据
const props = defineProps(['list', 'limit'])
const add = () => {
? ? if (dataindex.value < props.list / props.limit) {
? ? ? ? dataindex.value = dataindex.value + 1
? ? }
}
const resve = () => {
? ? if (dataindex.value > 1) {
? ? ? ? dataindex.value--
? ? }
}
//判断是否要隐藏的page
const feature = (index) => {
? ? let falge = false
? ? let num = props.list / props.limit
? ? if (num >= 17) {
? ? ? ? falge = dataindex.value < 4
? ? ? ? ? ? index + 1 <= 4 || index + 1 <= dataindex.value + 14 && index + 1 >= dataindex.value + 13
? ? ? ? ? ? : dataindex.value >= num - 13 && dataindex.value <= num - 10
? ? ? ? ? ? ? ? index + 1 <= num && index + 1 >= num - 1 || index + 1 > dataindex.value - 3 && index + 1 < dataindex.value + 2
? ? ? ? ? ? ? ? : dataindex.value <= num - 3 && dataindex.value > num - 13
? ? ? ? ? ? ? ? ? ? index + 1 <= num && index + 1 >= num - 1 || index + 1 > dataindex.value - 3 && index + 1 < dataindex.value + 2
? ? ? ? ? ? ? ? ? ? : dataindex.value >= num - 3
? ? ? ? ? ? ? ? ? ? ? ? index + 1 > num - 6
? ? ? ? ? ? ? ? ? ? ? ? : index + 1 >= dataindex.value - 2 && index + 1 <= dataindex.value + 1 || index + 1 <= dataindex.value + 11 && index + 1 >= dataindex.value + 10
? ? } else if (num < 17 && num > 6) {
? ? ? ? falge = dataindex.value < 4
? ? ? ? ? ? index + 1 <= dataindex.value - dataindex.value + 4 || index + 1 <= num && index + 1 >= num - 1
? ? ? ? ? ? : dataindex.value >= num - 13 && dataindex.value <= num - 10
? ? ? ? ? ? ? ? index + 1 <= num && index + 1 >= num - 1 || index + 1 > dataindex.value - 3 && index + 1 < dataindex.value + 2
? ? ? ? ? ? ? ? : dataindex.value >= num - 3
? ? ? ? ? ? ? ? ? ? index + 1 > num - 6
? ? ? ? ? ? ? ? ? ? : index + 1 <= dataindex.value + 1 && index + 1 > dataindex.value - 3 || index + 1 <= num && index + 1 >= num - 1
? ? }
? ? else {
? ? ? ? falge = true
? ? }
? ? return falge
}
//计算什么时候用...
const s = computed(() => (index) => {
? ? let text = ''
? ? if (dataindex.value < props.list / props.limit - 3) {
? ? ? ? if (index + 1 > dataindex.value + 2 && index + 1 < dataindex.value + 4 && dataindex.value < 2) {
? ? ? ? ? ? text = '...'
? ? ? ? } else if (index + 1 > dataindex.value + 1 && index + 1 < dataindex.value + 3 && dataindex.value == 2) {
? ? ? ? ? ? text = '...'
? ? ? ? } else if (index + 1 > dataindex.value && index + 1 < dataindex.value + 2 && dataindex.value > 2) {
? ? ? ? ? ? text = '...'
? ? ? ? } else {
? ? ? ? ? ? text = index + 1
? ? ? ? }
? ? } else {
? ? ? ? text = index + 1
? ? }
? ? return text
});
</script>
<style lang='less' scope>
.orderbottom {
? ? box-sizing: border-box;
? ? // padding: ?0 15px;
? ? // border: 1px solid rgb(106, 104, 104);
? ? width: 100%;
? ? display: flex;
? ? justify-content: space-between;
? ? .orderBottomRight {
? ? ? ? // width: 350px;
? ? ? ? // display: flex;
? ? ? ? text-align: right;
? ? ? ? // border: 1px solid #000;
? ? ? ? .list {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? margin: 0 5px;
? ? ? ? }
? ? ? ? .cusese {
? ? ? ? ? ? background-color: aqua;
? ? ? ? }
? ? }
}
</style>