<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>
