文章目录
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
.</