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日

相关文章

  • ASP获取数据库表名、库名、字段名的方法

    获取数据库表名、库名、字段名是网站开发中常见的需求。在ASP中，可以通过ADO对象的属性和方法来实现。下面是具体的完整攻略： 获取数据库库名 要获取一个数据库的库名，在连接数据库的字符串（ConnectionString）中加入“Initial Catalog=数据库名”即可。然后，打开连接，通过Connection对象的属性Catalog获取库名。 示例代…

    other 2023年6月26日
    00

  • Android动态加载布局实现技巧介绍

    Android动态加载布局实现技巧介绍 在Android开发中，动态加载布局是一种非常有用的技巧，它允许我们在运行时根据需要动态地加载和显示布局。这种技术可以帮助我们实现更灵活和可扩展的界面设计。本攻略将详细介绍如何在Android应用中实现动态加载布局，并提供两个示例说明。 1. 使用LayoutInflater动态加载布局 LayoutInflater是…

    other 2023年8月20日
    00

  • 7——使用textview实现跑马灯

    7——使用TextView实现跑马灯 在Android应用的开发中，使用跑马灯效果可以给用户带来视觉上的特殊体验，增加应用的吸引力。在Android中，我们可以使用TextView实现跑马灯效果。 基本实现 使用TextView实现跑马灯效果非常简单。我们只需要在布局文件中添加TextView，并设置相关属性即可。以下是实现跑马灯效果的示例代码： <T…

    其他 2023年3月28日
    00

  • 详解C++编程中数组的基本用法

    详解C++编程中数组的基本用法 1. 数组的定义、初始化和访问 数组是一种由相同类型元素组成的数据结构，在C++中可以使用以下方式定义一个数组： <数据类型> <数组名>[<数组长度>]; 数组长度必须是一个正整数常量，例如： int a[10]; // 定义一个由10个整型元素组成的数组a double b[5]; //…

    other 2023年6月25日
    00

  • C++基本组件之内存池详解

    C++基本组件之内存池详解 什么是内存池？ 内存池是一种用于管理内存分配和释放的技术。它通过预先分配一块连续的内存空间，并将其划分为多个固定大小的块，以提高内存分配和释放的效率。内存池可以减少频繁的内存分配和释放操作，从而提高程序的性能。 内存池的实现原理 内存池的实现原理如下： 预先分配一块连续的内存空间。 将内存空间划分为多个固定大小的块。 使用一个数据…

    other 2023年8月1日
    00

  • windows8系统用户名微软ID和管理员账户概念详解

    Windows 8系统用户名微软ID和管理员账户概念详解 在Windows 8操作系统中，有两个重要的概念：用户名微软ID和管理员账户。本文将详细讲解这两个概念，并提供相关示例说明。 用户名微软ID 用户名微软ID是Windows 8中的一种新用户类型，它的实现是为了与Windows Live和Microsoft在线服务更好地集成。通过使用用户名微软ID，用…

    other 2023年6月27日
    00

  • C++对数组的引用实例分析

    C++中，数组是一组相同类型的数据结构，可以作为一个整体进行操作。使用数组时，常常需要传递数组的引用。那么本篇攻略就会给你详细讲解C++对数组的引用实例分析，结合两条示例实现对数组的引用。 常规数组的引用 #include <iostream> using namespace std; const int ARRAY_SIZE = 10; voi…

    other 2023年6月25日
    00

  • win10系统git的安装与使用命令

    以下是对“win10系统git的安装与使用命令的完整攻略”的详细讲解，包括基本介绍、安装步骤、使用命令和示例说明等内容。 1. 基本介绍 Git是一分布式版本控制系统，可以帮助开发者管理和协作开发代码。Git具有分支管理、版本回退、代码合并等功能，是开发过程中必不可少的工具之一。 2. 安装步骤 以下是在Win10系统下安装Git的详细步骤： 下载Git安装…

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