vue封装自定义分页器组件与使用方法分享

下面详细讲解“Vue封装自定义分页器组件与使用方法分享”的攻略：

1. 前言

在实际开发中，分页器是一个非常重要的组件，它可以帮助我们展示大量数据并提高用户的浏览效率。但是，常见的分页器组件往往无法满足我们的需求，因此我们需要自己动手来封装一个自定义的分页器组件。本篇攻略将会介绍如何封装自定义分页器组件并提供两个使用示例。

2. 分页器组件的设计

首先，我们需要确定分页器的设计。一般来说，分页器由三个部分组成：分页按钮、当前页数和总页数。我们可以使用 Vue.js 来封装这个组件。

我们先来确定组件的 props 和 data：

props: {
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  }
},
data() {
  return {
    totalPages: 0
  }
}

这里我们定义了三个 props：currentPage、pageSize 和 total，分别表示当前页、每页数量和数据总数。同时我们定义了一个 data：totalPages，表示总页数。

接下来是组件的模板代码：

<template>
  <div class="pagination">
    <a href="javascript:;" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">&lt;</a>
    <a href="javascript:;" v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }" @click="changePage(page)">{{ page }}</a>
    <a href="javascript:;" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">&gt;</a>
  </div>
</template>

这里我们使用了三个 a 标签作为分页按钮，使用一个 v-for 循环来生成页数，同时在点击时调用 changePage 方法。其中，disabled 类型表示不可用的状态，active 表示当前页。

最后是组件的样式：

.pagination {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 0;
}

.pagination a {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.pagination a:hover {
  background-color: #f5f5f5;
}

.pagination a.active,
.pagination a.disabled {
  background-color: #337ab7;
  color: #fff;
}

.pagination a.disabled:hover {
  cursor: default;
  background-color: initial;
}

.pagination a.active:hover {
  cursor: default;
  background-color: #337ab7;
}

这个样式定义了分页器的基础样式，其中 active、disabled 分别表示当前页和不可用的状态。

现在组件的基础部分就完成了。接下来我们需要添加 changePage 方法和监控 props 的变化。

我们先来看看 changePage 方法：

methods: {
  changePage(page) {
    if (page < 1 || page > this.totalPages) {
      return
    }

    this.$emit('page-change', page)
  }
}

这里我们首先判断页面是否越界，如果越界就直接返回。否则，我们就把最新的页面值通过 $emit 方法传递出去，供父组件调用。

最后是监控 props 的变化：

watch: {
  currentPage() {
    this.getTotalPages()
  },
  total() {
    this.getTotalPages()
  },
  pageSize() {
    this.getTotalPages()
  }
},
created() {
  this.getTotalPages()
},
methods: {
  getTotalPages() {
    this.totalPages = Math.ceil(this.total / this.pageSize)
  }
}

这里我们监控了 currentPage、total 和 pageSize 这三个 prop 值的变化，并在变化时重新计算 totalPages。其中，created 生命周期钩子表示在组件实例创建后立即执行的代码。

3. 分页器组件的使用示例

现在我们已经完成了分页器组件的设计和实现，接下来让我们看看如何使用这个组件。

示例一：基础用法

我们先从一个简单的例子开始。假设我们有一个 Product 组件，用来展示产品列表。我们的产品数据是通过 ajax 请求获取的，同时需要分页显示。那么我们只需要在 Product 组件中使用我们的分页器组件即可。

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }} - {{ product.price }}</li>
    </ul>
    <pagination :current-page="currentPage" :total="total" :page-size="pageSize" @page-change="handlePageChange"></pagination>
  </div>
</template>
<script>
import Pagination from './Pagination.vue'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      products: [],
      currentPage: 1,
      total: 0,
      pageSize: 10
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      // ajax请求获取数据
      // 将获取到的数据和总数赋值到 this.products 和 this.total 中
    },
    handlePageChange(page) {
      this.currentPage = page
      this.getData()
    }
  }
}
</script>

这里我们只需要在 Product 组件中引用我们的分页器组件，并传递 currentPage、pageSize 和 total 这三个 prop 值即可。在 handlePageChange 这个回调函数中，我们可以获取到最新的 currentPage 值，并调用 ajax 请求获取数据，从而实现数据的分页显示。

示例二：自定义样式

如果我们觉得默认的样式不够好看，或者不符合项目要求，那么我们可以根据自己的需求来自定义样式。

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }} - {{ product.price }}</li>
    </ul>
    <pagination :current-page="currentPage" :total="total" :page-size="pageSize" @page-change="handlePageChange" class="my-pagination"></pagination>
  </div>
</template>

<style>
.my-pagination .active {
  background-color: red;
}
.my-pagination a {
  border: none;
  background-color: #ccc;
}
.my-pagination a.active,
.my-pagination a.active:hover {
  background-color: red;
}
</style>

这里我们只需要在样式中定义一个名为 my-pagination 的类，并按照自己的需求来自定义样式即可。

4. 总结

以上就是我们完整的 Vue 自定义分页器组件的攻略。希望这篇攻略能够对你有所帮助。如果你对以上内容有疑问或者有更好的实现方式，也欢迎在评论区中留言和我一起讨论。