Vue.js开发分页组件

Vue.js开发分页组件

前言

目前有很多成熟的框架，比如element-ui等，为何还需要自己造轮子？首先别人的轮子会考虑到跟多功能，但有很多功能我们是用不到的，故用的轮子看着过于臃肿，导致页面性能受影响，其次用轮子出bug不好找到问题，最后就是自己定制的轮子才最符合自己项目需求，用久了别人的框架，总感觉某些功能需求实现有点曲线救国、南辕北辙的迹象。

1. 需求

1.1 提出需求

• 动态改变每页容纳的条目数（page-size）
• 实现上一页、下一页功能
• 当页面过多时可以动态用省略号代替部分页面
• 可以输入页码，按回车或者确认按钮可以直接跳转至指定页面
• 当页面状态改变时，可触发事件

1.2 需求分析

• 需求1页码组件可通过props属性接收父组件传递的参数，问题不大。
• 需求2在页码组件中摆两button控件，绑定相应事件，问题也不大。
• 需求3需要动态省略部分页面，并用省略号代替省略部分，有点啰嗦。
• 需求4在页码组件中摆个input控件和确认button控件，绑定相应事件，问题也不大。
• 需求5 在页码组件中通过emit方法对父组件传值，问题也不大，就是需要注意些坑。

总之，一通分析下来，页码组件还是不难实现的。接下来问题不大的需求不会重点讲，最后我会把自己写的源码贴出来，相信自己看代码就会了。所以本文主要讲的就是需求3了。

2. UI界面

UI有点丑。。。麻雀虽小五脏俱全，各位将就着看吧。

3. js逻辑设计

从上图UI来看，有些是固定的，稍微有点变化的就是页码元素（page-item）了。具体的场景大家都很熟，但是还是想不厌其烦的描述一下，以便加深此组件的机制。场景：当页码数量较少时，所有页码都显示。当页码数量过多时，需要根据当前页码的位置来决定哪些显示哪些不显示。所以有哪些页码需要显示出来取决于当前页码的位置。

在这里我准备分四种情况来分析，分别是无省略号、仅右边出现省略号、仅左边出现省略号、两边出现省略号。为了实现统一，准备用两个变量不同的值来表示这四种情况，分别表示的是左边省略号后第一个页码索引showPageStart和右边省略号前一个页码索引showPageEnd。如果没有左边省略号showPageStart为2，如果没有右边省略号showPageEnd为总页数pageCount。

3.1 无省略号

判断条件：pageCount小于等于需要显示的页码数pageItemCount（父组件传入，不传默认为5）。
变量赋值：showPageStart为1，showPageEnd为pageCount。

3.2 仅右边有省略号

判断条件：当前页码索引小于(pageItemCount - 3) / 2。为什么要减去3？减去首页、尾页和当前页。为什么除2？因为对称轴是当前页码。
变量赋值：showPageStart为1，showPageEnd为pageItemCount – 1.</