From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/Pagination/index.vue | 87 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 87 insertions(+), 0 deletions(-)
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
new file mode 100644
index 0000000..6bb00b3
--- /dev/null
+++ b/src/components/Pagination/index.vue
@@ -0,0 +1,87 @@
+<!-- 鍩轰簬 ruoyi-vue3 鐨� Pagination 閲嶆瀯锛屾牳蹇冩槸绠�鍖栨棤鐢ㄧ殑灞炴�э紝骞朵娇鐢� ts 閲嶅啓 -->
+<template>
+ <el-pagination
+ v-show="total > 0"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ :background="true"
+ :page-sizes="[10, 20, 30, 50, 100]"
+ :pager-count="pagerCount"
+ :total="total"
+ :small="isSmall"
+ class="float-right mb-15px mt-15px"
+ layout="total, sizes, prev, pager, next, jumper"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+</template>
+<script lang="ts" setup>
+import { computed, watchEffect } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+
+defineOptions({ name: 'Pagination' })
+
+// 姝ゅ瑙ｅ喅浜嗗綋鍏ㄥ眬size涓簊mall鐨勬椂鍊欏垎椤电粍浠舵牱寮忓お澶х殑闂
+const appStore = useAppStore()
+const layoutCurrentSize = computed(() => appStore.currentSize)
+const isSmall = ref<boolean>(layoutCurrentSize.value === 'small')
+watchEffect(() => {
+ isSmall.value = layoutCurrentSize.value === 'small'
+})
+
+const props = defineProps({
+ // 鎬绘潯鐩暟
+ total: {
+ required: true,
+ type: Number
+ },
+ // 褰撳墠椤垫暟锛歱ageNo
+ page: {
+ type: Number,
+ default: 1
+ },
+ // 姣忛〉鏄剧ず鏉＄洰涓暟锛歱ageSize
+ limit: {
+ type: Number,
+ default: 20
+ },
+ // 璁剧疆鏈�澶ч〉鐮佹寜閽暟銆� 椤电爜鎸夐挳鐨勬暟閲忥紝褰撴�婚〉鏁拌秴杩囪鍊兼椂浼氭姌鍙�
+ // 绉诲姩绔〉鐮佹寜閽殑鏁伴噺绔粯璁ゅ�� 5
+ pagerCount: {
+ type: Number,
+ default: document.body.clientWidth < 992 ? 5 : 7
+ }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
+const currentPage = computed({
+ get() {
+ return props.page
+ },
+ set(val) {
+ // 瑙﹀彂 update:page 浜嬩欢锛屾洿鏂� limit 灞炴�э紝浠庤�屾洿鏂� pageNo
+ emit('update:page', val)
+ }
+})
+const pageSize = computed({
+ get() {
+ return props.limit
+ },
+ set(val) {
+ // 瑙﹀彂 update:limit 浜嬩欢锛屾洿鏂� limit 灞炴�э紝浠庤�屾洿鏂� pageSize
+ emit('update:limit', val)
+ }
+})
+const handleSizeChange = (val) => {
+ // 濡傛灉淇敼鍚庤秴杩囨渶澶ч〉闈紝寮哄埗璺宠浆鍒扮 1 椤�
+ if (currentPage.value * val > props.total) {
+ currentPage.value = 1
+ }
+ // 瑙﹀彂 pagination 浜嬩欢锛岄噸鏂板姞杞藉垪琛�
+ emit('pagination', { page: currentPage.value, limit: val })
+}
+const handleCurrentChange = (val) => {
+ // 瑙﹀彂 pagination 浜嬩欢锛岄噸鏂板姞杞藉垪琛�
+ emit('pagination', { page: val, limit: pageSize.value })
+}
+</script>
--
Gitblit v1.8.0