用vue写轮子的一些心得（八）——pager分页器组件

需求分析

• 支持传入当前页码参数并展示；
• 支持页数过多的部分用省略号显示，并会动态变化；
• 支持点击左右方向键切换页码；
• 支持在只有一页的时候隐藏pager；

 

方法实现

1、pager外部组件传参定义：

一共可传4个参数：

• total，页码条数
• current，当前页码
• current.sync，点击页码的current参数回调
• hide-one-page, 默认不填一页时显示，false则隐藏

2、pager组件内部实现：

HTML

JS

1. 省略号：通过计算属性pages，四重遍历动态计算出省略号的位置，小于5条total则不展示省略号。
2. 监听pager点击结构样式变化：onClickPage()方法，将变化的数据传出去，再通过current.sync接收，更新current的值，从而达到单向数据流的目的，实现功能的同时，还可简化逻辑。
3. 一页样式隐藏：通过css类做判断即可。
4. 左右方向箭头切换：增加或减少current的值即可，但要留意边界情况（小于1条大于最后一条），最后走‘update:current’单向数据流出发外部current参数回调即可。

 

3、在v-for中使用不同标签展示数据的方法：

参考下面的HTML代码，只需通过template模板遍历即可。应为template模板标签在浏览器渲染中不会变成标签。