增加

Web/src/components/Pagination.vue

@@ -2,10 +2,10 @@
   <div class="pagination">
     <!-- 第一行：导航按钮 -->
     <div class="pagination-nav">
-      <span v-if="currentPage !== 1" @click="changePage('first')">首页 . </span>
-      <span v-if="currentPage !== 1" @click="changePage('prev')">上一页 .</span>
-      <span v-if="currentPage !== totalPages" @click="changePage('next')">下一页 .</span>
-      <span v-if="currentPage !== totalPages" @click="changePage('last')">尾页</span>
+      <span v-if="currentPage > 1" @click="changePage('first')">首页 . </span>
+      <span v-if="currentPage > 1" @click="changePage('prev')">上一页 .</span>
+      <span v-if="currentPage < totalPages" @click="changePage('next')">下一页 .</span>
+      <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>
     </div>
     <!-- 第二行：页码信息与跳转 -->
     <div class="pagination-info">
@@ -20,16 +20,20 @@
 <script setup lang="ts">
 interface Props {
   currentPage: number;
-  totalPages: number;
+  limit: number;
+  total: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   currentPage: 1,
-  totalPages: 1,
+  limit:10,
+  total: 1,
 });
 
-let currentPage = ref(props.currentPage)
-let totalPages = ref(props.totalPages)
+let currentPage = ref(props.currentPage);
+let limit = ref(props.limit);
+let total = ref(props.total);
+let totalPages = total.value / limit.value;
 
 const emit = defineEmits(['pageChange'])
 
@@ -38,14 +42,14 @@ const changePage = (type: any) => {
   if (type == 'input' && currentPage.value < 1) {
     currentPage.value = 1
   }
-  if (type == 'input' && currentPage.value > totalPages.value) {
-    currentPage.value = totalPages.value
+  if (type == 'input' && currentPage.value > totalPages) {
+    currentPage.value = totalPages
   }
 
   if (type == 'prev' && currentPage.value == 1) {
     return
   }
-  if (type == 'next' && currentPage.value == totalPages.value) {
+  if (type == 'next' && currentPage.value == totalPages) {
     return
   }
 
@@ -57,7 +61,7 @@ const changePage = (type: any) => {
   } else if (type == 'next') {
     currentPage.value++
   } else if (type == 'last') {
-    currentPage.value = totalPages.value
+    currentPage.value = totalPages
   }
   emit('pageChange', currentPage.value)
 }
@@ -68,11 +72,11 @@ const changePage = (type: any) => {
 <style scoped>
 .pagination {
   text-align: left;
-  font-size: 14px;
+  font-size: 18px;
 }
 
 .pagination-nav {
-  margin-bottom: 8px;
+  margin-bottom: 0px;
 }
 
 .pagination-nav span {
@@ -96,7 +100,7 @@ const changePage = (type: any) => {
 }
 
 .page-input {
-  width: 50px;
+  width: 30px;
   padding: 2px 4px;
   text-align: center;
   border: 1px solid #ccc;