index.vue
1.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!--
* @Date: 2025-11-18 16:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-18 16:48:02
* @FilePath: /data-table/src/components/PaginationField/index.vue
* @Description: 分页组件
-->
<template>
<div class="pagination-field">
<div class="indicator">第{{ current + 1 }}页 / 共{{ total }}页</div>
<div class="actions">
<van-button v-if="showPrev" round type="primary" class="btn" @click="onPrev">上一页</van-button>
<van-button v-if="showNext" round type="primary" class="btn" @click="onNext">下一页</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">提交</van-button>
</div>
</div>
<div class="placeholder" />
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
current: { type: Number, default: 0 },
total: { type: Number, default: 1 },
isLast: { type: Boolean, default: false },
})
const emit = defineEmits(['prev', 'next', 'submit'])
const showPrev = computed(() => props.current > 0)
const showNext = computed(() => props.current < props.total - 1)
const showSubmit = computed(() => props.current === props.total - 1)
const onPrev = () => emit('prev')
const onNext = () => emit('next')
const onSubmit = () => emit('submit')
</script>
<style lang="less" scoped>
.pagination-field {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
padding: 0.75rem 1rem;
border-top: 1px solid #eaeaea;
display: flex;
flex-direction: column;
align-items: center;
z-index: 10;
.indicator {
font-size: 0.85rem;
color: #666;
margin-bottom: 0.5rem;
}
.actions {
display: flex;
gap: 0.75rem;
.btn {
min-width: 6rem;
}
}
}
.placeholder {
height: 3.75rem;
}
</style>