以Vue3构建组件：分页控件，简化数据量庞大的应用体验

2023-11-08 04:05:47

在Vue3中构造分页控件

Vue3的Pagination分页控件可以帮助您在B端Web开发中创建更优质的用户体验。它能在数据量大的情况下，将数据分页拆解，让用户一次仅查看部分数据。随着互联网发展，这种设计越来越受欢迎，本文将手把手指导您如何构建Pagination组件，为用户提供更便捷的分页功能。

创建Pagination组件

首先，您需要在Vue3中创建一个新的组件文件。在这里，我们称之为“Pagination.vue”。组件结构如下：

<template>
  <div>
    <nav>
      <ul class="pagination">
        <!-- 分页按钮 -->
        <li v-for="page in pages" :key="page" class="page-item">
          <a class="page-link" :href="'#page-' + page" @click="changePage(page)">{{ page }}</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 0,
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    },
  },
};
</script>

使用Pagination组件

现在，您已经创建了Pagination组件，就可以在您的应用程序中使用它。以下是如何使用组件的示例：

<Pagination :total-pages="totalPages" @change-page="changePage" />

请确保在Vue实例中注册了Pagination组件，然后将组件添加至需要分页的页面即可。

为Pagination组件添加样式

为了使Pagination组件更具美感，您需要为其添加样式。您可以使用CSS来做到这一点。以下是一些简单的样式，您可以根据需要进行修改：

.pagination {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}

.page-item {
  display: inline-block;
}

.page-link {
  display: block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.page-link:hover {
  background-color: #efefef;
}

.page-link:active {
  background-color: #dedede;
}

.current-page {
  background-color: #dedede;
}