修复翻页控件

Web/src/components/Pagination.vue

@@ -2,94 +2,133 @@
   <div class="pagination">
     <!-- 第一行：导航按钮 -->
     <div class="pagination-nav">
-      <span v-if="currentPage > 1" @click="changePage('first')">首页 . </span>
+      <span v-if="currentPage > 1" @click="changePage('first')">首页</span>
-      <span v-if="currentPage > 1" @click="changePage('prev')">上一页 .</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('next')">下一页</span>
       <span v-if="currentPage < totalPages" @click="changePage('last')">尾页</span>      
     </div>
     <!-- 第二行：页码信息与跳转 -->
     <div class="pagination-info">
       <span>第{{ currentPage }}/{{ totalPages }}页</span>
-      <input v-model.number="currentPage" type="number" min="1" :max="totalPages" class="page-input"
+      <input 
-        @keyup.enter="changePage('input')" />
+        v-model.number="goPage" 
+        type="number" 
+        min="1" 
+        :max="totalPages" 
+        class="page-input"
+        @keyup.enter="changePage('input')" 
+      />
       <button @click="changePage('input')">跳转</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+// 定义Props
 interface Props {
-  currentPage: number;
+  currentPage: number;  // 当前页
-  limit: number;
+  limit: number;        // 每页条数
-  total: number;
+  total: number;        // 总条数
 }
 
 const props = withDefaults(defineProps<Props>(), {
   currentPage: 1,
   limit: 10,
-  total: 1,
+  total: 0,
-});
+})
 
-let currentPage = ref(props.currentPage);
+const emit = defineEmits<{
-let limit = ref(props.limit);
+  pageChange: [page: number]
-let total = ref(props.total);
+}>()
-let totalPages = total.value / limit.value;
 
-const emit = defineEmits(['pageChange'])
+// 响应式存储当前页（不直接修改props）
+const currentPage = ref(props.currentPage)
+// 跳转输入框绑定值
+const goPage = ref(props.currentPage)
 
+// 计算属性：自动计算总页数（核心修复）
+const totalPages = computed(() => {
+  const { total, limit } = props
+  if (total <= 0 || limit <= 0) return 1
+  return Math.ceil(total / limit)
+})
 
-const changePage = (type: any) => {
+// 监听父组件传入的页码变化，同步内部值
-  if (type == 'input' && currentPage.value < 1) {
+watch(
+  () => props.currentPage,
+  (val) => {
+    currentPage.value = val
+    goPage.value = val
+  }
+)
+
+//回到顶部
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth' // 平滑动画，去掉就是瞬间置顶
+  })
+}
+
+// 分页切换方法
+const changePage = (type: 'first' | 'prev' | 'next' | 'last' | 'input') => {
+  const pages = totalPages.value
+  
+  if (type === 'input') {
+    // 输入跳转：边界校验
+    let page = goPage.value
+    page = Math.max(1, Math.min(page, pages))
+    currentPage.value = page
+  } else {
+    // 按钮跳转
+    switch (type) {
+      case 'first':
         currentPage.value = 1
+        break
+      case 'prev':
+        currentPage.value = Math.max(1, currentPage.value - 1)
+        break
+      case 'next':
+        currentPage.value = Math.min(pages, currentPage.value + 1)
+        break
+      case 'last':
+        currentPage.value = pages
+        break
     }
-  if (type == 'input' && currentPage.value > totalPages) {
-    currentPage.value = totalPages
   }
 
-  if (type == 'prev' && currentPage.value == 1) {
+  // 更新输入框显示
-    return
+  goPage.value = currentPage.value
-  }
+  // 向父组件抛出最新页码
-  if (type == 'next' && currentPage.value == totalPages) {
-    return
-  }
-
-
-  if (type == 'first') {
-    currentPage.value = 1
-  } else if (type == 'prev') {
-    currentPage.value--
-  } else if (type == 'next') {
-    currentPage.value++
-  } else if (type == 'last') {
-    currentPage.value = totalPages
-  }
   emit('pageChange', currentPage.value)
+    scrollToTop();
 }
-
-
 </script>
 
 <style scoped>
 .pagination {
   text-align: left;
   font-size: 18px;
+  margin: 16px 0;
 }
 
 .pagination-nav {
-  margin-bottom: 0px;
+  display: flex;
+  gap: 12px;
 }
 
 .pagination-nav span {
   display: inline-block;
   cursor: pointer;
-  color: #0066cc;
+  color: #1e5494;
-  margin-right: 5px;
 }
 
 .pagination-nav span.disabled {
   color: #999;
   cursor: not-allowed;
-  text-decoration: none;
+  pointer-events: none; /* 禁用点击 */
 }
 
 .pagination-info {
@@ -100,14 +139,19 @@ const changePage = (type: any) => {
 }
 
 .page-input {
-  width: 30px;
+  width: 46px;
-  padding: 2px 4px;
+  padding: 4px 6px;
   text-align: center;
   border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
 .pagination-info button {
-  padding: 2px 8px;
+  padding: 4px 10px;
   cursor: pointer;
+  border: 1px solid #1e5494;
+  background: #fff;
+  border-radius: 4px;
+  color: #1e5494;
 }
 </style>