minnan-website/components/controls/Pagination.vue

<template>
  <!-- 分页组件 -->
  <div class="pagination">
    <!-- 上一页按钮 -->
    <a
      :class="[
        'page-button',
        currentPage > 1 ? 'enable' : ''
      ]"
      :href="ssrUrl + '?page=' + (currentPage - 1)"
      @click.prevent="goToPage(currentPage - 1)"
    >
      &lt;
    </a>

    <!-- 页码按钮 -->
    <a
      v-for="page in visiblePages"
      :key="page"
      class="page-button enable"
      :class="{ active: page === currentPage }"
      :href="ssrUrl + '?page=' + page"
      @click.prevent="goToPage(page)"
    >
      {{ page }}
    </a>

    <!-- 下一页按钮 -->
    <a
      :class="[
        'page-button',
        currentPage < totalPages ? 'enable' : ''
      ]"
      :href="ssrUrl + '?page=' + (currentPage + 1)"
      @click.prevent="goToPage(currentPage + 1)"
    >
      &gt;
    </a>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";

const props = defineProps({
  ssrUrl: {
    type: String,
    default: '',
  },
  /**
   * 当前页码
   */
  currentPage: {
    type: Number,
    required: true,
  },
  /**
   * 总页数
   */
  totalPages: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(["update:currentPage"]);

// 计算显示的页码范围
const visiblePages = computed(() => {
  const pages = [];
  const maxPagesToShow = 10; // 最多显示 10 个页码
  const halfMax = Math.floor(maxPagesToShow / 2);

  // 计算起始页码
  let startPage = Math.max(1, props.currentPage - halfMax);
  let endPage = startPage + maxPagesToShow - 1;

  // 如果超出总页数，调整起始页码
  if (endPage > props.totalPages) {
    endPage = props.totalPages;
    startPage = Math.max(1, endPage - maxPagesToShow + 1);
  }

  for (let i = startPage; i <= endPage; i++) {
    pages.push(i);
  }

  return pages;
});

// 跳转到指定页码
const goToPage = (page: number) => {
  if (page >= 1 && page <= props.totalPages) {
    emit("update:currentPage", page);
  }
};
</script>

<style lang="scss" scoped>
@use "@/assets/scss/colors" as *;

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.page-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $box-inset-color;
  color: $text-color;
  cursor: pointer;
  opacity: 0.4;

  &:hover {
    background-color: $box-hover-color;
  }
  &.enable {
    opacity: 1;
  }
}
.page-button.active {
  background-color: $primary-color;
  color: $text-color-light;
}
</style>