vue3 封装一个分页组件

好的，下面是一个简单的示例代码，演示如何封装一个基于 Vue 3 的分页组件：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
    <span>{{ currentPage }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 5px;
}
</style>

这个示例中，我们创建了一个名为 `Pagination` 的组件，它接受两个 props：`totalItems`（总项数）和 `itemsPerPage`（每页显示的项数，默认为 10）。组件内部维护了一个 `currentPage` 的响应式数据，用于跟踪当前页码。

在模板中，我们使用了两个按钮来实现上一页和下一页的功能，并通过计算属性 `totalPages` 来计算总页数。在方法中，我们定义了 `prevPage` 和 `nextPage` 分别用于处理上一页和下一页的点击事件，并更新 `currentPage` 的值。

这是一个简单的分页组件示例，你可以根据需求进行修改和扩展。