如何通过vue实现一个简单通用的翻页组件

预览第一波效果图：基本元素首先，翻页组件（以下简称“pager组件”）一般有以下几个元素：上一页***页面中间显示的页码***下一页初始化需要的配置为：totalPage(总页数)initPage(初始页)showPrev(是否显示上一页)showNext(是否显示下一页)showItems(中间显示多少页)showJump(是否显示要跳转到的页面)这些都可以通过vue的props来接收。另外，pager组件本身需要有一个currentPage记录当前页面，pages数组用来保存中间显示的页码，jumpPage绑定输入的跳转页码。基本实现对应的代码为：接下来就是如何获取页面数组到达由于pages始终与当前Page和配置中需要显示的showItems强相关，所以完全可以将pages改为computed属性：computed:{pages(){//根据起始页获取页码数组编号和结束页码letgetPages=(start,end)=>{if(start<=1||start>end||start>=this.totalPage){start=2}if(end>=this.totalPage||end=this.totalPage-Math.floor(counts/2)){returngetPages(this.totalPage+1-counts,this.totalPage-1)}else{lethalf=Math.ceil(counts/2)-1letend=this.currentPage+halfif(counts%2===0){end++}returngetPages(this.currentPage-half,end)}}}}功能扩展到这里，基本实现了一个普通的翻页组件（样式可自行定制）。但是很多时候（尤其是一些管理后台），结合vue-router做SPA，通常会有这样的需求：翻到某个列表的某个页面后，点击某个item到编辑页面，希望能够编辑完成后返回跳转前的页面。如果只使用上面的pager组件，实现这个需求不是很方便。可能有人会说可以和vuex结合使用，但是这种情况下需要在state中记录跳转前的页码。如果翻页列表很多，需要记录多条记录，显然不够优雅。不过由于vue-router的优雅实现，我们要满足上面的需求也很简单：首先在props中添加mode配置，因为当mode为params时，跳转需要知道自己在哪个route下，so:mode:{type:String,default:'event'//'event'|'query'|'params'},routeName:{type:String}然后在实际的跳转逻辑方法go??(page)中，做一些更改：go(page){if(page<1){page=1}if(page>this.totalPage){page=this.totalPage}if(page===this.currentPage){return}this.currentPage=parseInt(page,10)if(this.mode=='query'){letquery=this.$route.queryquery.page=this.currentPagethis.$router.go({query:query})}elseif(this.mode=='params'){letparams=this.$route.paramsparams.page=this.currentPagethis.$router.go({name:this.routeName,params:params})}else{this.$emit('go-page',{page:this.currentPage})}}这样一个简单通用的翻页组件就基本完成了，接下来就是不能发到仓库给大家使用了。本文最终实现的翻页组件已经发布。可以看看源码：vue-simple-pagersummary总体来说比较简单，希望对大家有所帮助。