<script setup>
|
|
const props = defineProps({
|
total: Number,
|
offset: Number,
|
limit: Number,
|
})
|
|
const emit = defineEmits(["go"])
|
|
function goStart () {
|
const {offset, limit, total} = props
|
console.log("goStart", {offset, limit, total})
|
emit("go", 0)
|
}
|
|
function goEnd () {
|
const {offset, limit, total} = props
|
console.log("goEnd ", {offset, limit, total})
|
emit("go", Math.floor(total / limit) * limit)
|
}
|
|
function goPrev () {
|
const {offset, limit, total} = props
|
console.log("goPrev", {offset, limit, total})
|
emit("go", Math.max(0, offset - limit))
|
}
|
|
function goNext () {
|
const {offset, limit, total} = props
|
console.log("goNext", {offset, limit, total})
|
console.log(total%limit)
|
const maxNext = Math.floor(total/limit)*limit
|
const nextNext = offset+limit
|
let noffset = Math.min(maxNext, nextNext)
|
// console.log({maxNext,nextNext,noffset})
|
emit("go", noffset)
|
}
|
|
|
</script>
|
|
<template>
|
|
<div class="pagination">
|
<input type="button" @click="goStart()" class="start" value="«" >
|
<input type="button" @click="goPrev()" class="prev" value="‹" >
|
<span class="current">
|
{{ offset }} - {{ offset + limit }}
|
/ {{ total }}
|
</span>
|
<input type="button" @click="goNext()" class="next" value="›" >
|
<input type="button" @click="goEnd()" class="end" value="»" >
|
</div>
|
|
</template>
|
|
<style scoped lang="stylus">
|
|
.pagination
|
font-size 1.33rem
|
display flex;
|
gap 1em
|
align-items center;
|
justify-content center;
|
margin -1em 0 1em 0;
|
|
& > div
|
cursor: pointer
|
color #6464b5
|
font-weight bold;
|
|
&:hover
|
color orange
|
|
.start, .end, .prev, .next
|
font-size 130%
|
//width 1em
|
.current
|
width 12em;
|
text-align center;
|
|
input
|
//all: unset
|
border none
|
width 1em
|
|
</style>
|
