基于Vue.js实现类谷歌样式的Vuetify分页组件求助

Vuetify默认的v-pagination组件不直接支持谷歌那种「当前页前后显示少量页码、超出部分用省略号替代」的样式，需要通过自定义页码计算+插槽渲染+样式调整来实现，以下是具体方案：

1. 核心逻辑：计算要显示的页码集合 #

在组件的computed中添加计算属性，根据当前页和总页数生成符合谷歌样式的页码数组（包含数字和省略号标识）：

computed: {
  displayedPages() {
    const totalPages = this.length;
    const currentPage = this.page;
    const visiblePages = 2; // 当前页前后各显示2个页码，可按需调整
    const pages = [];

    // 总页数较少时直接显示所有页码
    if (totalPages <= visiblePages * 2 + 3) {
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
      return pages;
    }

    // 添加开头页码和前置省略号（如果需要）
    pages.push(1);
    if (currentPage > visiblePages + 2) {
      pages.push('...');
    }

    // 添加当前页周围的页码
    const start = Math.max(2, currentPage - visiblePages);
    const end = Math.min(totalPages - 1, currentPage + visiblePages);
    for (let i = start; i <= end; i++) {
      pages.push(i);
    }

    // 添加后置省略号和结尾页码（如果需要）
    if (currentPage < totalPages - visiblePages - 1) {
      pages.push('...');
    }
    pages.push(totalPages);

    return pages;
  }
}

2. 自定义分页模板 #

使用v-pagination的插槽自定义渲染每个页码项，同时保留前后导航按钮：

<template>
  <v-pagination
    v-model="page"
    :length="length"
    :withNextPrev="true"
    nextText="Next"
    prevText="Previous"
  >
    <template #item="{ page: itemPage, active, onClick }">
      <!-- 渲染省略号项 -->
      <v-btn
        v-if="typeof itemPage === 'string'"
        disabled
        text
        class="pagination-ellipsis"
      >
        {{ itemPage }}
      </v-btn>
      <!-- 渲染正常页码项 -->
      <v-btn
        v-else
        :active="active"
        text
        @click="onClick"
        class="pagination-page"
      >
        {{ itemPage }}
      </v-btn>
    </template>
  </v-pagination>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      length: 24 // 总页数
    };
  },
  computed: {
    displayedPages() {
      const totalPages = this.length;
      const currentPage = this.page;
      const visiblePages = 2;
      const pages = [];

      if (totalPages <= visiblePages * 2 + 3) {
        for (let i = 1; i <= totalPages; i++) {
          pages.push(i);
        }
        return pages;
      }

      pages.push(1);
      if (currentPage > visiblePages + 2) {
        pages.push('...');
      }

      const start = Math.max(2, currentPage - visiblePages);
      const end = Math.min(totalPages - 1, currentPage + visiblePages);
      for (let i = start; i <= end; i++) {
        pages.push(i);
      }

      if (currentPage < totalPages - visiblePages - 1) {
        pages.push('...');
      }
      pages.push(totalPages);

      return pages;
    }
  },
  watch: {
    // 防止省略号被误选中
    page(newVal) {
      if (typeof newVal === 'string') {
        this.page = this.page;
      }
    }
  }
};
</script>

3. 样式调整（匹配谷歌分页风格） #

添加CSS样式，调整按钮外观、选中状态、间距等：

<style scoped>
.pagination-page {
  border-radius: 50%;
  min-width: 40px;
  height: 40px;
  margin: 0 4px;
}

.pagination-page.active {
  background-color: #1a73e8;
  color: white;
}

.pagination-page:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.pagination-ellipsis {
  color: #5f6368;
  cursor: default;
}

.v-pagination__prev,
.v-pagination__next {
  border-radius: 4px;
  padding: 0 16px;
  margin: 0 8px;
}

.v-pagination__prev:hover,
.v-pagination__next:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
</style>

说明 #

• visiblePages变量可按需调整，控制当前页前后显示的页码数量
• 省略号项设置为禁用状态，避免被误点击
• 样式部分可根据需求进一步微调颜色、尺寸等细节

内容的提问来源于stack exchange，提问作者Kyoya