146 lines
4.0 KiB
Plaintext
146 lines
4.0 KiB
Plaintext
<template>
|
||
<view class="pagination-footer">
|
||
<text class="total-txt">共 {{ total }} 条</text>
|
||
|
||
<picker class="page-select" :range="pageSizeOptionLabels" :value="pageSizeIndex" @change="onPageSizeChange">
|
||
<view class="page-select-inner">
|
||
<text class="page-val">{{ pageSize }} 条/页</text>
|
||
<text class="arrow-down">▼</text>
|
||
</view>
|
||
</picker>
|
||
|
||
<view class="page-btns">
|
||
<view class="p-btn" :class="{ disabled: currentPage <= 1 }" @click="onPageBtnClick(currentPage - 1)">
|
||
<text>＜</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="(p, index) in visiblePages"
|
||
:key="index"
|
||
class="p-btn"
|
||
:class="{ active: p === currentPage, 'ellipsis-btn': p === -1 }"
|
||
@click="onPageBtnClick(p)">
|
||
<text>{{ p === -1 ? '...' : p }}</text>
|
||
</view>
|
||
|
||
<view class="p-btn" :class="{ disabled: currentPage >= totalPage }" @click="onPageBtnClick(currentPage + 1)">
|
||
<text>＞</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="page-jump">
|
||
<text class="jump-txt">前往</text>
|
||
<input
|
||
class="jump-input"
|
||
type="number"
|
||
:value="jumpPageInput"
|
||
@input="onJumpInputChange"
|
||
@confirm="onJumpPage"
|
||
@blur="onJumpPage"
|
||
placeholder="页码"
|
||
/>
|
||
<text class="jump-txt">页</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
const props = defineProps({
|
||
total: { type: Number, default: 0 },
|
||
loading: { type: Boolean, default: false },
|
||
currentPage: { type: Number, default: 1 },
|
||
pageSize: { type: Number, default: 10 },
|
||
pageSizeOptionLabels: { type: Array, default: (): string[] => [] },
|
||
pageSizeIndex: { type: Number, default: 0 },
|
||
visiblePages: { type: Array, default: (): number[] => [] },
|
||
totalPage: { type: Number, default: 1 },
|
||
jumpPageInput: { type: String, default: '' }
|
||
})
|
||
|
||
const emit = defineEmits(['page-size-change', 'page-change', 'update:jumpPageInput', 'jump-page'])
|
||
|
||
const onPageSizeChange = (e : any) => {
|
||
emit('page-size-change', e)
|
||
}
|
||
|
||
const onPageBtnClick = (p : number) => {
|
||
if (p !== -1 && p >= 1 && p <= props.totalPage) {
|
||
emit('page-change', p)
|
||
}
|
||
}
|
||
|
||
const onJumpInputChange = (e : any) => {
|
||
emit('update:jumpPageInput', e.detail.value as string)
|
||
}
|
||
|
||
const onJumpPage = () => {
|
||
emit('jump-page')
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 分页 */
|
||
.pagination-footer {
|
||
padding: 16px 24px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 16px;
|
||
border-top: 1px solid #e8eaec;
|
||
background-color: #fff;
|
||
}
|
||
.total-txt { font-size: 14px; color: #515a6e; }
|
||
|
||
.page-select {
|
||
border: 1px solid #dcdee2;
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
cursor: pointer;
|
||
transition: border 0.2s;
|
||
}
|
||
.page-select:hover { border-color: #2d8cf0; }
|
||
.page-select-inner {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 0 12px;
|
||
height: 32px;
|
||
gap: 8px;
|
||
}
|
||
.page-val { font-size: 14px; color: #515a6e; }
|
||
.arrow-down { font-size: 10px; color: #c0c4cc; }
|
||
|
||
.page-btns { display: flex; flex-direction: row; gap: 4px; }
|
||
.p-btn {
|
||
min-width: 32px; height: 32px; padding: 0 4px; border: 1px solid #dcdee2; border-radius: 4px;
|
||
display: flex; align-items: center; justify-content: center; font-size: 14px; color: #515a6e;
|
||
background-color: #fff; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.p-btn:hover:not(.disabled):not(.active):not(.ellipsis-btn) {
|
||
border-color: #2d8cf0; color: #2d8cf0;
|
||
}
|
||
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
||
.p-btn.disabled { color: #c5c8ce; background-color: #f7f7f7; cursor: not-allowed; border-color: #dcdee2; }
|
||
.p-btn.ellipsis-btn { border: none; cursor: default; }
|
||
|
||
.page-jump {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.jump-txt { font-size: 14px; color: #515a6e; }
|
||
.jump-input {
|
||
width: 50px;
|
||
height: 32px;
|
||
border: 1px solid #dcdee2;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #515a6e;
|
||
transition: border 0.2s;
|
||
}
|
||
.jump-input:focus { border-color: #2d8cf0; outline: none; }
|
||
</style>
|