Vue3封装分页组件

分页组件：

<template>
	<div class="paginationBox" :style="{justifyContent: alignPosition}">
        <el-pagination
            class="pagination"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :layout="layout"
            :total="total"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
const props = defineProps({
    total: {
        required: true,
        type: Number,
        default: 0
    },
    // 当前页数
    currentPage: {
        required: true,
        type: Number,
        default: 1
    },
    // 分页
    pageSize: {
        required: true,
        type: Number,
        default: 10
    },
    //每页显示个数选择器的选项设置
    pageSizes: {
        type: Array,
        default: () => ([10, 20, 30, 50, 100])
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    // 对齐方式
    align: { // left | center | right  居左、居中、居右
        type: String,
        default: 'right',
    },
});

const emit = defineEmits(['onChange']);

// 分页切换
const handleCurrentChange = (val)=>{
    emit('onChange', { currentPage: val, pageSize: props.pageSize });
}

// 每页数量切换
const handleSizeChange = (val)=>{
    emit('onChange', { currentPage: props.currentPage, pageSize: val });
}

// 对齐方式样式
const alignPosition = computed(() => {
    let cssCode = 'flex-end';
    switch (props.align) {
        case 'left':
            cssCode = 'flex-start';
            break;
        case 'center':
            cssCode = 'center';
            break;
        default:
            cssCode = 'flex-end';
            break;
    }
    return cssCode;
})

</script>

<style lang="scss" scoped>

.paginationBox {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
:deep(.pagination) {
    padding: 10px;
    button {
        border-radius: 50%;
        margin: 0 4px;
        width: 30px;
        height: 30px;
    }
    .el-pager {
        li {
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            margin: 0 4px;
            color: #757B92;
            &.is-active {
                border: 1px solid #006EFF;
                background: #006EFF;
                box-shadow: 0 0 10px 0#6268FF;
                color: #ffffff;
                font-weight: normal;
            }
        }
    }
}
</style>

调用：

// HTML
<Pagination 
	:current-page="paginationData.currentPage"
	:page-size="paginationData.pageSize"
	:total="paginationData.total"
	@onChange="paginationData.onChange"
/>

// Js
const paginationData = reactive({
	currentPage:1,
	pageSize: 10,
	total: 0,
	onChange: ({currentPage, pageSize}) => {
		paginationData.currentPage = currentPage;
		paginationData.pageSize = pageSize;
        //请求接口
		getList();
	},
})

效果：