Vue封装复用组件：Pagination分页器

2024-01-05 10:45:11

前言

分页器是一个在网页中经常会用到的组件，它可以帮助用户对大量数据进行分页显示，从而提高用户体验。在 Vue 中，我们可以通过封装一个可复用的分页器组件，来方便地在不同的页面中使用。

实现步骤

1. 组件结构

首先，我们需要定义分页器组件的结构。我们可以使用 Vue 的单文件组件来定义组件的结构，如下所示：

<template>
  <div class="pagination">
    <ul class="pagination-list">
      <li class="pagination-item" v-for="page in pages" :key="page">
        <a class="pagination-link" :href="page.url" @click="changePage(page.index)">
          {{ page.number }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      pages: []
    };
  },
  computed: {
    pageRange() {
      const range = [];
      const start = this.currentPage - 2;
      const end = this.currentPage + 2;
      for (let i = start; i <= end; i++) {
        if (i > 0 && i <= this.totalPage) {
          range.push(i);
        }
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      this.$emit('change', page);
    }
  },
  created() {
    this.pages = this.pageRange;
  }
};
</script>

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

.pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
}

.pagination-item {
  margin-right: 10px;
}

.pagination-link {
  display: block;
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.pagination-link:hover {
  background-color: #eee;
}

.pagination-link.active {
  background-color: #333;
  color: #fff;
}
</style>

2. 组件功能

接下来，我们需要实现分页器组件的功能。主要包括：

生成分页器页码列表 ：根据当前页码和总页码，生成分页器页码列表。
切换页码 ：当用户点击页码时，触发组件的 change 事件，并把当前页码作为参数传递给事件处理函数。

3. 组件使用方式

在 Vue 项目中，我们可以通过以下方式使用分页器组件：

<template>
  <Pagination :current-page="currentPage" :total-page="totalPage" @change="changePage" />
</template>

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