153 lines
3.2 KiB
Vue
153 lines
3.2 KiB
Vue
<script setup>
|
|
import { ref, watch } from "vue";
|
|
|
|
const props = defineProps({
|
|
page: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['loadList']);
|
|
|
|
const pages = ref({
|
|
page: 1,
|
|
total: 0,
|
|
limit: 10,
|
|
pageAll: 1,
|
|
})
|
|
|
|
watch(() => props.page, (n, o) => {
|
|
Object.keys(n).forEach(key => {
|
|
pages.value[key] = n[key];
|
|
})
|
|
}, { deep: true, immediate: true })
|
|
|
|
|
|
|
|
const prev = () => {
|
|
if (pages.value.page > 1) pages.value.page--;
|
|
emit('loadList', pages.value);
|
|
}
|
|
const next = () => {
|
|
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
|
emit('loadList', pages.value)
|
|
}
|
|
const setPage = (page = 1) => {
|
|
pages.value.page = page;
|
|
emit('loadList', pages.value)
|
|
}
|
|
const blur = (e) => {
|
|
let value = pages.value.page;
|
|
if (typeof value === 'number' || (typeof value === 'string' && !isNaN(Number(value)))) {
|
|
if (value > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
|
if (value < 1) pages.value.page = 1;
|
|
emit('loadList', pages.value)
|
|
} else {
|
|
pages.value.page = 1;
|
|
emit('loadList', pages.value)
|
|
}
|
|
}
|
|
|
|
emit('loadList', pages.value)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pad-box">
|
|
<div class="total">共 {{ pages.total }} 条</div>
|
|
<div class="num" @click="prev">{{ "<" }}</div>
|
|
<div class="num" :class="{ c_num: pages.page == 1 }" @click="setPage(1)">
|
|
1
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == 2 }"
|
|
v-if="pages.pageAll > 1"
|
|
@click="setPage(2)"
|
|
>
|
|
2
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == 3 }"
|
|
v-if="pages.pageAll > 2"
|
|
@click="setPage(3)"
|
|
>
|
|
3
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == '' }"
|
|
v-if="pages.pageAll - 3 > 3"
|
|
>
|
|
...
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == pages.pageAll - 2 }"
|
|
v-if="pages.pageAll - 2 > 3"
|
|
@click="setPage(pages.pageAll - 2)"
|
|
>
|
|
{{ pages.pageAll - 2 }}
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == pages.pageAll - 1 }"
|
|
v-if="pages.pageAll - 1 > 3"
|
|
@click="setPage(pages.pageAll - 1)"
|
|
>
|
|
{{ pages.pageAll - 1 }}
|
|
</div>
|
|
<div
|
|
class="num"
|
|
:class="{ c_num: pages.page == pages.pageAll }"
|
|
v-if="pages.pageAll > 3"
|
|
@click="setPage(pages.pageAll)"
|
|
>
|
|
{{ pages.pageAll }}
|
|
</div>
|
|
<div class="num" @click="next">{{ ">" }}</div>
|
|
<div class="btn">
|
|
<div>前往</div>
|
|
<input v-model="pages.page" @blur="blur" @keyup.enter="blur" />
|
|
<div>页</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.pad-box {
|
|
display: flex;
|
|
cursor: pointer;
|
|
div {
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
.total {
|
|
margin: 0 0.5rem;
|
|
}
|
|
.num {
|
|
margin: 0 0.5rem;
|
|
}
|
|
.c_num {
|
|
color: rgba(91, 219, 246, 1);
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
margin-left: 0.5rem;
|
|
align-items: center;
|
|
input {
|
|
background-color: rgba(0, 156, 255, 0.2);
|
|
border: 1px solid rgba(91, 219, 246, 0.4);
|
|
border-radius: 0.2rem;
|
|
width: 2rem;
|
|
margin: 0 1rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |