大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关vue中怎么实现一个翻页组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司专注于网站建设|网站维护公司|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖成都木屋等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身策划品质网站。
首先,翻页组件(以下称“pager组件”)一般拥有的元素有:
上一页
***页
中间显示的页码
***一页
下一页
初始化时需要的配置有:
totalPage(总页数)
initPage(初始页)
showPrev(是否显示上一页)
showNext(是否显示下一页)
showItems(中间显示几页)
showJump(是否显示跳转到第几页)
这些可以通过vue的props来接收。
另外,pager组件本身需要有一个记录当前页的currentPage,pages数组用来容纳中间显示的页码,jumpPage绑定输入的跳转页码。
基本实现
对应的代码为:
接下来就是pages数组的值如何获取到。由于pages始终是跟当前页currentPage以及配置中需要显示的showItems强相关的,那么完全可以将pages改为计算属性:
computed: { pages () { // 根据起始页码和结束页码得到页码数组 let getPages = (start,end) => { if(start <= 1 || start > end || start >= this.totalPage) { start = 2 } if(end >= this.totalPage || end < start || end <= 1) { end = this.totalPage - 1 } let arr = [] for(let i = start; i <= end; i++) { arr.push(i) } return arr } let counts = this.showItems if(this.totalPage < counts + 2) { return getPages(2,this.totalPage) } else { if(this.currentPage <= Math.ceil(counts/2)) { return getPages(2,counts) } else if(this.currentPage >= this.totalPage - Math.floor(counts/2)) { return getPages(this.totalPage + 1 - counts,this.totalPage - 1) } else { let half = Math.ceil(counts/2) - 1 let end = this.currentPage + half if(counts % 2 === 0) { end++ } return getPages(this.currentPage - half,end) } } } }
功能拓展
到这里一个普通的翻页组件基本上就实现了(样式自己可以去定制)。但是很多时候(特别是一些管理后台),结合vue-router做成SPA,通常会有这样的需求:
翻到某个列表的某一页之后,点击某一项到编辑页,编辑完成后希望能够返回到跳转之前的那一页。
这个需求如果仅仅用上面的pager组件,实现起来就不是很方便。也许有人会说结合vuex可以,但是这样的话需要在state中记录下跳转前的页码。假如有很多个翻页列表,就需要记录多个,这显然并不优雅。
不过因为vue-router实现的优雅,我们要满足上面的需求也很简单:
首先props上增加mode配置,由于当mode为params时,跳转需要知道是在哪一个路由下,所以:
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') { let query = this.$route.query query.page = this.currentPage this.$router.go({query: query}) } else if(this.mode == 'params') { let params = this.$route.params params.page = this.currentPage this.$router.go({name: this.routeName,params: params}) } else { this.$emit('go-page',{ page: this.currentPage }) } }
关于vue中怎么实现一个翻页组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。