122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
/** 旧版风格分页（像素复刻 admin.html .pagination）+ 每页条数下拉（10/20/50/100）。
|
||
* props: total / page / pageSize / sizes(默认 10/20/50/100) / showTotal(默认 true) / jump(默认 true)。 */
|
||
import { computed, ref } from 'vue'
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
total: number
|
||
page: number
|
||
pageSize: number
|
||
sizes?: number[]
|
||
showTotal?: boolean
|
||
jump?: boolean
|
||
}>(),
|
||
{ sizes: () => [10, 20, 50, 100], showTotal: true, jump: true },
|
||
)
|
||
const emit = defineEmits<{
|
||
(e: 'change', page: number): void
|
||
(e: 'size-change', size: number): void
|
||
}>()
|
||
|
||
const jumpPage = ref('')
|
||
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
|
||
|
||
function go(next: number) {
|
||
if (next < 1 || next > totalPages.value || next === props.page) return
|
||
emit('change', next)
|
||
}
|
||
|
||
function goJump() {
|
||
const n = Number.parseInt(jumpPage.value, 10)
|
||
if (Number.isNaN(n)) return
|
||
jumpPage.value = ''
|
||
go(Math.min(Math.max(n, 1), totalPages.value))
|
||
}
|
||
|
||
function onSizeChange(event: Event) {
|
||
const value = Number((event.target as HTMLSelectElement).value)
|
||
if (Number.isFinite(value) && value > 0) emit('size-change', value)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="old-pagination">
|
||
<span v-if="showTotal" class="page-total">共 {{ total }} 条</span>
|
||
<select class="page-size-select" :value="pageSize" @change="onSizeChange">
|
||
<option v-for="size in sizes" :key="size" :value="size">{{ size }}条/页</option>
|
||
</select>
|
||
<button type="button" :disabled="page <= 1" @click="go(page - 1)">上一页</button>
|
||
<span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
|
||
<button type="button" :disabled="page >= totalPages" @click="go(page + 1)">下一页</button>
|
||
<span v-if="jump" class="page-jump">
|
||
跳至
|
||
<input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
|
||
页
|
||
<button type="button" @click="goJump">跳转</button>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.old-pagination {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
color: #5b6f83;
|
||
font-size: 13px;
|
||
}
|
||
.old-pagination button {
|
||
min-height: 30px;
|
||
padding: 4px 12px;
|
||
border: 1px solid #c7d7e5;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
color: #5b6f83;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
}
|
||
.old-pagination button:hover:not(:disabled) {
|
||
background: #edf5fb;
|
||
border-color: #95b1cb;
|
||
color: #2f5d8b;
|
||
}
|
||
.old-pagination button:disabled {
|
||
background: #eef3f7;
|
||
color: #9baaba;
|
||
cursor: not-allowed;
|
||
}
|
||
.page-total {
|
||
margin-right: 4px;
|
||
}
|
||
.page-size-select {
|
||
min-height: 30px;
|
||
padding: 3px 8px;
|
||
border: 1px solid #cbd9e6;
|
||
border-radius: 8px;
|
||
background: #f8fbfd;
|
||
color: #24384d;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
}
|
||
.page-jump {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.page-jump input {
|
||
width: 56px;
|
||
min-height: 30px;
|
||
padding: 4px 8px;
|
||
border: 1px solid #cbd9e6;
|
||
border-radius: 8px;
|
||
background: #f8fbfd;
|
||
color: #24384d;
|
||
font-size: 13px;
|
||
font-family: inherit;
|
||
}
|
||
</style>
|