以 Vue3 开发分页组件：前端技术的新高度

2024-02-20 09:15:41

在 Vue3 中实现 Pagination 分页组件

在当今数据量爆炸的时代，构建高效的分页组件对于前端开发人员而言至关重要。Vue3，作为目前最受欢迎的 JavaScript 框架之一，以其简洁的语法和丰富的特性受到广泛青睐。本文将带领您一步步构建一个基础的分页组件，让您体验 Vue3 的强大功能。

1. 搭建项目脚手架

首先，我们需要创建一个新的 Vue3 项目。您可以使用 Vue CLI 或 Vite 等工具来完成这一步。创建一个新的项目后，您需要在项目中安装必要的依赖项，例如 axios 和 element-ui。

2. 创建组件

接下来，让我们创建一个新的 Vue 组件，并将其命名为 Pagination.vue。在这个组件中，我们将定义组件的模板和逻辑。

<template>
  <div class="pagination">
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
    };
  },
};
</script>

3. 样式

最后，我们需要为组件添加一些样式，使它看起来更加美观。您可以根据自己的喜好来设计样式。

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

4. 使用组件

现在，您已经创建了一个基础的分页组件，可以将其导入到其他组件中使用了。在需要使用分页组件的地方，只需导入 Pagination.vue 组件，并将其作为子组件使用即可。

<template>
  <div>
    <Pagination />
  </div>
</template>

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

export default {
  components: {
    Pagination,
  },
};
</script>