vue实现通过点击自定义按钮实现分页

实现效果图

代码：

<template>
  <div>
    <div class="carousel">

      <div class="page-content">
        <!-- 根据当前页渲染内容 -->
        <div v-for="item in paginatedData" :key="item.id">
          {{ item.name }}
        </div>
      </div>

    </div>

    <div class="pagination-container">
      <el-button
          v-for="page in totalPages"
          :key="page"
          :class="['circle-page-button', { active: currentPage === page }]"
          @click="handlePageChange(page)"
      >
        {{ page }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      totalItems: 20, // 总项数
      data: [] // 数据源
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.data.slice(start, start + this.pageSize);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  },
  mounted() {
    // 初始化数据
    this.data = Array.from({ length: this.totalItems }, (_, i) => ({
      id: i + 1,
      name: `Item ${i + 1}`
    }));
  }
};
</script>

<style>
.carousel {
  display: flex;
  align-items: center;
}

.page-content {
  flex: 1;
  text-align: center;
}

.circle-button {
  border-radius: 50%; /* 圆形 */
  width: 40px; /* 根据需求调整宽度 */
  height: 40px; /* 根据需求调整高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* 背景色 */
  border: none; /* 去掉边框 */
}

.circle-button:hover {
  background-color: #d0d0d0; /* 悬停时的背景色 */
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.circle-page-button {
  border-radius: 50%; /* 圆形 */
  width: 30px; /* 根据需求调整宽度 */
  height: 30px; /* 根据需求调整高度 */
  margin: 0 5px; /* 间距 */
  background-color: #f0f0f0; /* 背景色 */
  border: none; /* 去掉边框 */
}

.circle-page-button.active {
  background-color: #409EFF; /* 当前页的背景色 */
  color: white; /* 当前页的字体颜色 */
}

.circle-page-button:hover {
  background-color: #d0d0d0; /* 悬停时的背景色 */
}
</style>