admin-ui/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"
		/>
	</div>
</template>

<script lang="ts">
import { toRefs, defineComponent, computed, ref, onMounted } from 'vue';
const props = {
	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',
	},
	background: {
		type: Boolean,
		default: true,
	},
	hidden: {
		type: Boolean,
		default: false,
	},
};
export default defineComponent({
	name: 'pagination',
	props: props,
	setup(props, { emit }) {
		const { page, limit } = toRefs(props);
		const isInitialized = ref(false);

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

		const handleSizeChange = (val: number) => {
			if (isInitialized.value) {
				emit('pagination', { page: currentPage.value, limit: val });
			}
		};
		const handleCurrentChange = (val: number) => {
			if (isInitialized.value) {
				emit('pagination', { page: val, limit: pageSize.value });
			}
		};

		// 组件挂载后标记为已初始化
		onMounted(() => {
			isInitialized.value = true;
		});

		return {
			currentPage,
			pageSize,
			handleSizeChange,
			handleCurrentChange,
		};
	},
});
</script>

<style scoped lang="scss">
.pagination-container {
	padding: 32px 16px;
}
.pagination-container.hidden {
	display: none;
}
</style>