71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="paging">
|
||
|
|
<el-icon
|
||
|
|
class="prev"
|
||
|
|
:style="{
|
||
|
|
cursor: page === 1 ? 'not-allowed' : 'pointer',
|
||
|
|
color: page === 1 ? '#999' : '#fff',
|
||
|
|
}"
|
||
|
|
@click="prev"
|
||
|
|
>
|
||
|
|
<ArrowLeftBold />
|
||
|
|
</el-icon>
|
||
|
|
<div class="page-num">{{ page }}</div>
|
||
|
|
<el-icon
|
||
|
|
class="next"
|
||
|
|
:style="{
|
||
|
|
cursor: Math.ceil(total / 5) <= page ? 'not-allowed' : 'pointer',
|
||
|
|
color: Math.ceil(total / 5) <= page ? '#999' : '#fff',
|
||
|
|
}"
|
||
|
|
@click="next"
|
||
|
|
>
|
||
|
|
<ArrowRightBold />
|
||
|
|
</el-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { toRefs } from "vue";
|
||
|
|
const emit = defineEmits(["update:page"]);
|
||
|
|
const props = defineProps({
|
||
|
|
total: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
page: {
|
||
|
|
type: Number,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const { total, page } = toRefs(props);
|
||
|
|
|
||
|
|
const prev = () => {
|
||
|
|
if (page.value == 1) return;
|
||
|
|
emit("update:page", page.value - 1);
|
||
|
|
};
|
||
|
|
const next = () => {
|
||
|
|
if (Math.ceil(total.value / 5) <= page.value) return;
|
||
|
|
emit("update:page", page.value + 1);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.paging {
|
||
|
|
width: 100px;
|
||
|
|
z-index: 9999;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -40px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.prev,
|
||
|
|
.next {
|
||
|
|
user-select: none;
|
||
|
|
cursor: pointer;
|
||
|
|
color: #fff;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|