使用Vue构建可重用的分页组件
47 浏览量
2020-12-10
12:43:40
上传
评论
收藏 239KB PDF 举报
使用使用Vue构建可重用的分页组件构建可重用的分页组件
Web应用程序中资源分页不仅对性能很有帮助，而且从用户体验的角度来说也是非常有用的。在这篇文章中，将了解如何使
用Vue创建动态和可用的分页组件。
基本结构基本结构
分页组件应该允许用户访问第一个和最后一个页面，向前和向后移动，并直接切换到近距离的页面。
大多数应用程序在用户每次更改页面时都会发出API请求。我们需要确保组件允许这样做，但是我们不希望在组件内发出这样
的请求。这样，我们将确保组件在整个应用程序中是可重用的，并且请求都是在操作或服务层中进行的。我们可以通过使用用
户单击的页面的数字触发事件来实现此目的。
有几种可能的方法来实现API端点上的分页。对于这个例子，我们假设API告诉我们每个页面的结果数、页面总数和当前页
面。这些将是我们的动态 props 。
相反，如果API只告诉记录的总数，那么我们可以通过将结果的数量除以每一页的结果数来计算页数： totalResults /
resultsPerPage 。
我们想要渲染一个按钮到 第一页 、 上一页 、 页面数量范围 、 下一页 和 最后一页 ：
[first] [next] [1] [2] [3] [previous] [last]
比如像下图这样的一个效果：
尽管我们希望渲染一个系列的页面，但并不希望渲染所有可用页面。让我们允许在我们的组件中设置一个最多可见按钮的
props 。
既然我们知道了我们想要的组件要做成什么，需要哪些数据，我们就可以设置HTML结构和所需要的 props 。
<template id="pagination">
<ul class="pagination">
<li>
<button type="button">« First</button>
</li>
<li>
<button type="button">«</button>
</li>
<!-- 页数的范围 -->
<li>
<button type="button">Next »</button>
</li>
<li>
<button type="button">»</button>
</li>
</ul>
</template>
Vue.component('pagination', {
template: '#pagination',
props: {
maxVisibleButtons: {
type: Number,
required: false,
default: 3
},
totalPages: {
type: Number,
required: true
},
total: {
type: Number,
required: true
},
currentPage: {
type: Number,
required: true
}
}
})
weixin_38722052
- 粉丝: 4
- 资源: 911
最新资源
- 数据源-数据可视化（七）：Pandas香港酒店数据高级分析，涉及相关系数，协方差，数据离散化，透视表等精美可视化展示
- linux常用命令大全.doc
- 格拉斯哥大学空缺职位申请详细介绍Applicant Guide.pdf
- mmexport1702953347189.mp4
- 2023NOC软件创意编程初中组C++决赛
- 2023NOC软件创意编程赛项真题-python初中决赛
- 2023NOC软件创意编程赛项真题-python小高决赛
- WA4320H-FIT-集客AP220G-FULL编程器固件
- 2023NOC软件创意编程赛项真题图形化小学高年级-决赛
- 2023NOC软件创意编程赛项真题图形化小学低年级-决赛
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0