vue3封装自己的分页组件

下面是关于“vue3封装自己的分页组件”的完整攻略。

什么是分页组件

分页组件是前端常见的组件之一，用于展示大量数据时，将其拆分成多个页面展示，实现数据的分页浏览。包括页码、下一页、上一页、跳转页面等功能。

如何封装自己的分页组件

在 Vue3 中，可以使用 Composition API 封装自己的分页组件。下面是一个简易的分页组件封装示例：

1. 引入 Pagination 组件

<template>
  <div>
    <ul class="pagination">
      <li :class="{disabled: currentPage == 1}" @click="prevPage"><a>上一页</a></li>
      <li v-for="page in totalPages" :key="page" :class="{active: currentPage === page}" @click="changePage(page)"><a>{{ page }}</a></li>
      <li :class="{disabled: currentPage == totalPages}" @click="nextPage"><a>下一页</a></li>
    </ul>
  </div>
</template>

1. 创建 Pagination 组件

在创建 Pagination 组件时，需要考虑的是数据层的实现和方法的定义。下面给出一个简单的示例：

<script>
import { ref } from 'vue'

export default {
  props: {
    pageSize: {
      type: Number,
      default: 10 // 默认每页10条数据
    },
    total: {
      type: Number,
      default: 0 // 数据总数，默认为0
    }
  },
  setup(props, context) {
    const currentPage = ref(1) // 当前页码，默认为1
    const totalPages = ref(Math.ceil(props.total / props.pageSize)) // 总页数

    function changePage(page) {
      if (page > 0 && page <= totalPages.value) {
        currentPage.value = page
        context.emit('changePage', currentPage.value)
      }
    }

    function prevPage() {
      if (currentPage.value > 1) {
        currentPage.value--
        context.emit('changePage', currentPage.value)
      }
    }

    function nextPage() {
      if (currentPage.value < totalPages.value) {
        currentPage.value++
        context.emit('changePage', currentPage.value)
      }
    }

    return {
      currentPage,
      totalPages,
      changePage,
      prevPage,
      nextPage,
    }
  }
}
</script>

上面示例中，我们使用了 Composition API 中的 ref 用于数据的响应式处理。同时，定义了三个方法：changePage、prevPage 和 nextPage，用于响应页面切换的监听事件。

1. 使用 Pagination 组件

在使用上述封装的 Pagination 组件时，我们需要传递两个参数：pageSize 和 total。pageSize表示每一页要显示的数据数量，total表示当前要展示的数据总数。同时可以监听组件emit出的changePage事件，来实现真正的数据展示更新。

<template>
  <div>
    <ul>
      <li v-for="item in displayedItems" :key="item">{{ item }}</li>
    </ul>
    <pagination :page-size="pageSize" :total="items.length" @changePage="handlePageChange" />
  </div>
</template>

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

export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      items: [...], // 一大批数据
    }
  },
  computed: {
    displayedItems() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.items.slice(start, end)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>

上述示例中，handlePageChange 方法用于响应 Pagination 组件emit出的 changePage 事件，从而实现数据的更新。同时在 computed 中计算展示的数据列表，然后在模板中遍历展示即可。

示例

示例1：Vue3中使用分页组件

下面给出使用上述封装的 Pagination 组件的示例。在组件内部通过计算currentPage和displayedItems，将数据进行分页，并更新界面。

<template>
  <div>
    <ul>
      <li v-for="item in displayedItems" :key="item">{{ item }}</li>
    </ul>
    <pagination :page-size="pageSize" :total="items.length" @changePage="handlePageChange" />
  </div>
</template>

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

export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      items: [1, 2, 3, ...,100], // 一大批数据
    }
  },
  computed: {
    displayedItems() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.items.slice(start, end)
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>

示例2：增加一些自定义配置来实现更加灵活的功能

在上述示例中，Pagination 组件的上一页、下一页和数字页码部分均是写死的，无法进行自定义。下面对该组件进行升级，增加自定义配置功能。示例代码如下：

<template>
  <div>
    <ul class="pagination">
      <li :class="{['disabled', prevDisabled]}"><a @click.stop.prevent="prevPage">{{ prevButtonText }}</a></li>
      <li v-for="page in visiblePages" :key="page" :class="{active: currentPage === page}" @click.stop.prevent="changePage(page)"><a>{{ page }}</a></li>
      <li :class="{['disabled', nextDisabled]}"><a @click.stop.prevent="nextPage">{{ nextButtonText }}</a></li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    pageSize: {
      type: Number,
      default: 10 // 默认每页10条数据
    },
    total: {
      type: Number,
      default: 0 // 数据总数，默认为0
    },
    prevButtonText: {
      type: String,
      default: '上一页' // 上一页按钮的文本
    },
    nextButtonText: {
      type: String,
      default: '下一页' // 下一页按钮的文本
    },
    visiblePages: {
      type: Number,
      default: 5 // 可见页码数量（不包括上一页和下一页按钮）
    }
  },
  setup(props, context) {
    const currentPage = ref(1) // 当前页码，默认为1
    const totalPages = ref(Math.ceil(props.total / props.pageSize)) // 总页数

    function changePage(page) {
      if (page > 0 && page <= totalPages.value) {
        currentPage.value = page
        context.emit('changePage', currentPage.value)
      }
    }

    function prevPage() {
      if (currentPage.value > 1) {
        currentPage.value--
        context.emit('changePage', currentPage.value)
      }
    }

    function nextPage() {
      if (currentPage.value < totalPages.value) {
        currentPage.value++
        context.emit('changePage', currentPage.value)
      }
    }

    const prevDisabled = computed(() => currentPage.value === 1)
    const nextDisabled = computed(() => currentPage.value === totalPages.value)

    const visiblePagesCount = computed(() => {
      return totalPages.value > props.visiblePages ? props.visiblePages : totalPages.value
    })

    const centerIndex = computed(() => {
      return Math.floor(visiblePagesCount.value / 2) + (visiblePagesCount.value % 2)
    })

    const pageStart = computed(() => {
      const start = currentPage.value - centerIndex.value
      return start < 0 ? 0 : start
    })

    const visiblePages = computed(() => {
      const adjustedEnd = Math.min(totalPages.value, pageStart.value + visiblePagesCount.value)
      const arr = []
      for (let i = pageStart.value; i < adjustedEnd; i++) {
        arr.push(i + 1)
      }
      return arr
    })

    return {
      currentPage,
      totalPages,
      changePage,
      prevPage,
      nextPage,
      prevDisabled,
      nextDisabled,
      visiblePages
    }
  }
}
</script>

上述示例中，我们增加了三个可选的 props 属性：prevButtonText、nextButtonText 和 visiblePages，分别用于设置上一页和下一页按钮的文本以及可见页码数量。同时在 setup 中使用 computed 计算出当前可见页码，增加了更多的自定义和灵活性。

总结

本文详细讲解了“Vue3封装自己的分页组件”的完整攻略，分别从引入和创建组件、使用组件以及示例说明等方面进行了讲解。Vue3的Composition API让组件的实现变得更加灵活和简便，同时还对其进行了增强，创造出了更多的组件开发方式和模式。