xjc-vue/src/components/Pagination/index.vue

<template>
    <div :class="{ 'hidden': hidden }" class="pagination-container">
        <el-pagination
                :background="background"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :layout="layout"
                :page-sizes="pageSizes"
                :pager-count="pagerCount"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                next-text="下一页" prev-text="上一页"
        />
    </div>

    <!--<div :class="{ 'hidden': hidden }" class="pagination-container">-->
    <!--<el-pagination-->
    <!--:background="background"-->
    <!--v-model:current-page="currentPage"-->
    <!--v-model:page-size="pageSize"-->
    <!--:layout="layout"-->
    <!--:page-sizes="pageSizes"-->
    <!--:pager-count="pagerCount"-->
    <!--:total="total"-->
    <!--@size-change="handleSizeChange"-->
    <!--@current-change="handleCurrentChange"-->
    <!--/>-->
    <!--</div>-->
</template>

<script setup>
    import {scrollTo} from '@/utils/scroll-to'

    const props = defineProps({
        total: {
            required: true,
            type: Number
        },
        page: {
            type: Number,
            default: 1
        },
        limit: {
            type: Number,
            default: 20
        },
        pageSizes: {
            type: Array,
            default() {
                return [10, 20, 30, 50]
            }
        },
        // 移动端页码按钮的数量端默认值5
        pagerCount: {
            type: Number,
            default: document.body.clientWidth < 992 ? 5 : 7
        },
        layout: {
            type: String,
            // default: 'total, sizes, prev, pager, next, jumper'
            default: 'prev, pager, next'
        },
        background: {
            type: Boolean,
            default: true
        },
        autoScroll: {
            type: Boolean,
            default: true
        },
        hidden: {
            type: Boolean,
            default: false
        }
    })

    const emit = defineEmits()
    const currentPage = computed({
        get() {
            return props.page
        },
        set(val) {
            emit('update:page', val)
        }
    })
    const pageSize = computed({
        get() {
            return props.limit
        },
        set(val) {
            emit('update:limit', val)
        }
    })

    function handleSizeChange(val) {
        if (currentPage.value * val > props.total) {
            currentPage.value = 1
        }
        emit('pagination', {page: currentPage.value, limit: val})
        if (props.autoScroll) {
            scrollTo(0, 800)
        }
    }

    function handleCurrentChange(val) {
        emit('pagination', {page: val, limit: pageSize.value})
        if (props.autoScroll) {
            scrollTo(0, 800)
        }
    }
</script>

<style scoped lang="scss">
    .pagination-container {
        background: #f4f4f4;
        color: #64748b;
        width:100%;
        height: 40px;
    }

    .pagination-container.hidden {
        display: none;
    }

    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .btn-pager,
    ::v-deep .el-pager li {
        background-color: #f4f4f4; /* 替换为你想要的背景色 */
        color : #64748b;
        font-size: 30px;
    }

    ::v-deep .el-pagination.is-background .btn-next .is-active,
    ::v-deep .el-pagination.is-background .btn-prev.is-active,
    ::v-deep .el-pagination.is-background
    .el-pager li.is-active {
        background-color: #036143 !important;

    }

</style>