128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const pages = ref({
|
||
|
|
page: 1,
|
||
|
|
total: 63,
|
||
|
|
pageSize: 30,
|
||
|
|
pageAll: 7
|
||
|
|
})
|
||
|
|
|
||
|
|
const prev = () => {
|
||
|
|
if (pages.value.page > 1) pages.value.page--;
|
||
|
|
}
|
||
|
|
const next = () => {
|
||
|
|
if (pages.value.page < pages.value.pageAll) pages.value.page++;
|
||
|
|
}
|
||
|
|
const setPage = (page = 1) => {
|
||
|
|
pages.value.page = page;
|
||
|
|
}
|
||
|
|
const getPage = () => {
|
||
|
|
console.log(pages.value.page);
|
||
|
|
if (pages.value.page < 0) pages.value.page = 1;
|
||
|
|
if (pages.value.page > pages.value.pageAll) pages.value.page = pages.value.pageAll;
|
||
|
|
}
|
||
|
|
const input = (e) => {
|
||
|
|
if (e.data >= 0 && e.data <= 9) return getPage();
|
||
|
|
pages.value.page = 1;
|
||
|
|
}
|
||
|
|
</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" @input="input" />
|
||
|
|
<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>
|