用Vue3实现分页：从零构建你的分页组件

2023-10-06 03:06:54

前言

在现代web开发中，分页功能可谓无处不在，无论是电商网站的产品展示，还是博客文章的浏览，分页组件都扮演着不可或缺的角色。它可以将大量数据合理地分割成多个页面，让用户能够轻松浏览和检索所需信息。作为一名前端开发者，掌握分页组件的实现技巧至关重要。本文将带你从零开始，使用Vue3构建一个简洁、易用的分页组件。

实现步骤

1. 构思组件功能

在开始编码之前，我们需要明确分页组件需要具备哪些功能。一般来说，分页组件应该能够做到以下几点：

接收总数据量和每页数据量作为参数
计算出总页数
显示当前页码和总页数
提供上一页、下一页和跳转到指定页面的功能
当页码发生变化时，能够触发相应的事件

2. 搭建组件骨架

有了清晰的功能定义，我们就可以开始搭建组件的骨架。首先，在Vue3中创建一个名为Pagination的新组件，其模板代码如下：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }}/{{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    <input type="number" v-model="gotoPage" @keyup.enter="goToPage">
  </div>
</template>

这段代码定义了一个基本的分页组件结构，包括了上一页、下一页按钮和一个输入框，用户可以在其中输入页码并跳转到指定页面。

3. 添加组件逻辑

接下来，我们需要添加组件的逻辑，以实现其功能。在Pagination组件的脚本部分，添加以下代码：

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    perPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1,
      totalPages: Math.ceil(this.total / this.perPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.$emit('page-change', this.currentPage);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.$emit('page-change', this.currentPage);
      }
    },
    goToPage(e) {
      e.preventDefault();
      if (this.gotoPage >= 1 && this.gotoPage <= this.totalPages) {
        this.currentPage = this.gotoPage;
        this.$emit('page-change', this.currentPage);
      }
    }
  }
};
</script>

这段代码实现了分页组件的基本功能。它通过props接收总数据量和每页数据量，并计算出总页数。当用户点击上一页或下一页按钮时，组件会更新当前页码并触发page-change事件，以便父组件能够做出相应的响应。用户也可以在输入框中输入页码并跳转到指定页面。

4. 使用组件

现在，我们的分页组件已经完成了。我们可以将其导入到需要使用它的组件中，并通过v-bind和v-on指令绑定数据和事件。例如：

<template>
  <div>
    <Pagination :total="totalItems" @page-change="handlePageChange" />
    <ul>
      <li v-for="item in currentItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: {
    Pagination
  },
  data() {
    return {
      totalItems: 100,
      currentItems: []
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentItems = this.totalItems.slice((currentPage - 1) * this.perPage, currentPage * this.perPage);
    }
  }
};
</script>