kuailelunwen_new_houtai/src/components/Pagination.vue

<template>
    <div class="pagination">
        <button @click="click('first')" :disabled="cur_page === 1">首页</button>
        <button @click="click('prev')" :disabled="cur_page === 1">上一页</button>
        <span class="page-info">第 {{ cur_page }} 页</span>
        <button @click="click('next')" :disabled="!hasNext">下一页</button>
        <button @click="click('last')" :disabled="!hasNext">尾页</button>
        <input type="number" v-model.number="jumpPage" min="1" />
        <button @click="click('jump')">跳转</button>
    </div>
</template>

<script>
export default {
    name: 'SimplePager',
    props: {
        curPage: {
            type: Number,
            required: true
        },
        hasNext: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            jumpPage: null,
            cur_page: this.curPage,
        };
    },
    watch: {
        curPage(newVal) {
            this.jumpPage = newVal;
            this.cur_page = newVal;
        }
    },
    methods: {
        click(type) {
            let payload = {
                first: 0,
                prev: 0,
                next: 0,
                last: 0,
                jump: 0,
                cur_page: this.cur_page
            };

            switch (type) {
                case 'first':
                    payload.first = 1;
                    payload.cur_page = 1;
                    break;
                case 'prev':
                    payload.prev = 1;
                    payload.cur_page = Math.max(1, this.cur_page - 1);
                    break;
                case 'next':
                    if (!this.hasNext) return;
                    payload.next = 1;
                    payload.cur_page = this.cur_page + 1;
                    break;
                case 'last':
                    payload.last = 1;
                    payload.cur_page = this.cur_page;
                    break;
                case 'jump':
                    if (this.jumpPage && this.jumpPage > 0) {
                        payload.jump = this.jumpPage;
                        payload.cur_page = this.jumpPage;
                    } else {
                        return;
                    }
                    break;
            }

            this.$emit('change', payload);
        }
    }
};
</script>
<style scoped>
.pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s;
}

button:hover:not(:disabled) {
    background-color: #e6f7ff;
    border-color: #91d5ff;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.page-info {
    font-size: 14px;
    margin: 0 6px;
}

input[type='number'] {
    width: 70px;
    padding: 8px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

input[type='number']:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>