1. Python技术站首页
  2. other

vue3封装自己的分页组件

• other

下面是关于“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让组件的实现变得更加灵活和简便，同时还对其进行了增强，创造出了更多的组件开发方式和模式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue3封装自己的分页组件 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • 深入Android HandlerThread 使用及其源码完全解析

    以下是关于深入Android HandlerThread使用及其源码完全解析的完整攻略： 深入Android HandlerThread 使用及其源码完全解析 什么是HandlerThread HandlerThread是Android中的一个线程类，它继承自Thread类，并且内部封装了一个Looper和一个Handler，可以方便地在后台线程中执行任务，…

    other 2023年10月15日
    00

  • 在android中将string转换为int

    以下是关于“在Android中将String转换为int”的完整攻略，包含两个示例。 在Android中将String转换为int 在Android开发中，我们经常需要将String类型的数据转换为int类型。以下是关于如何在Android中将String转换为int的详细攻略。 1. 使用Integer.parseInt()方法 在Android中，我们可…

    other 2023年5月9日
    00

  • 让服务器支持中文文件名下载的设置方法

    为了让服务器支持中文文件名的下载，通常需要进行一些配置。下面是一些常用的配置方法。 Apache服务器配置 如果你使用的是Apache服务器，可以在httpd.conf配置文件中添加以下内容来支持中文文件名下载： AddDefaultCharset UTF-8 AddCharset GB2312 .gb2312 .gb 其中，第一行让服务器默认使用UTF-8…

    other 2023年6月26日
    00

  • 浅谈Vue2.0父子组件间事件派发机制

    浅谈Vue2.0父子组件间事件派发机制 父子组件通信 在Vue中，父子组件通过props和$emit的方式进行通信。props是从父组件向子组件传递数据的方式，而$emit则是从子组件向父组件传递事件的方式。 父组件通过props向子组件传递值： <template> <div> <ChildComponent :value=&…

    other 2023年6月27日
    00

  • 详解Java单元测试之JUnit篇

    当然！以下是关于Java单元测试之JUnit的详细攻略，包含两个示例说明： JUnit简介 JUnit是一个流行的Java单元测试框架，用于编写和运行可重复的、自动化的单元测试。它提供了一组注解和断言方法，使得编写和执行测试变得简单和高效。 步骤1：导入JUnit依赖 首先，确保在项目的构建文件（如Maven的pom.xml）中添加JUnit依赖。在depe…

    other 2023年10月19日
    00

  • Java中泛型通配符的使用方法示例

    Java中泛型通配符的使用方法示例 介绍 Java中的泛型通配符（Wildcard）是一种特殊的类型参数，用于表示未知的类型。通配符可以增加代码的灵活性，使得我们可以处理不同类型的数据。在本攻略中，我们将详细讲解泛型通配符的使用方法，并提供两个示例说明。 通配符的类型 Java中的通配符有两种类型：上界通配符（? extends T）和下界通配符（? sup…

    other 2023年6月28日
    00

  • Java NIO服务器端开发详解

    下面详细讲解一下“Java NIO服务器端开发详解”的完整攻略。 简介 Java NIO（New IO，非阻塞IO）是Java中一套支持IO多路复用的新的API，相比于传统的IO，Java NIO能够更好地利用多核CPU的性能，同时也可以更好地实现高并发。 在Java NIO中，以Channel为中心，数据的读写以及网络的传输都是通过Channel进行的。C…

    other 2023年6月27日
    00

  • centos查看环境变量

    以下是“CentOS查看环境变量的完整攻略，过程中至少包含两条示例说明”。 CentOS查看环境变量的完整攻略 在CentOS中，我们可以使用多种方法查看环境变量。以下是一份关于CentOS查看环境变量的攻略，包括两个示例说明。 1. CentOS查看环境变量的基础知识 在开始查看环境变量之前，我们需要掌握一些基础知识，例如： CentOS的基础知识，包括C…

    other 2023年5月10日
    00
合作推广
合作推广
分享本页
返回顶部