vue中怎么实现一个翻页组件

这篇文章将为大家详细讲解有关Vue中怎么实现一个翻页组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

首先，翻页组件(以下称“pager组件”)一般拥有的元素有：

• 上一页

• ***页

• 中间显示的页码

• ***一页

• 下一页

初始化时需要的配置有：

• totalPage(总页数)

• initPage(初始页)

• showPrev(是否显示上一页)

• showNext(是否显示下一页)

• showItems(中间显示几页)

• showJump(是否显示跳转到第几页)

这些可以通过vue的props来接收。

另外，pager组件本身需要有一个记录当前页的currentPage，pages数组用来容纳中间显示的页码，jumpPage绑定输入的跳转页码。

基本实现

对应的代码为：

<template>     <div class="pager-wrapper" v-if="totalPage > 0">         <div class="pager-pages">             <a v-show="currentPage > 1 && showPrev" @click="Go(currentPage - 1)">上一页</a>             <a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>             <strong v-show="pages[0] > 2">...</strong>             <a v-for="page in pages" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>             <strong v-show="pages[pages.length-1] < totalPage - 1">...</strong>             <a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>             <a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)">下一页</a>         </div>         <div v-if="showJump" v-show="totalPage > 1" class="pager-jump">             <span>共<em class="jump-total">{{totalPage}}</em>页 ，跳至</span>             <input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">             <span>页</span>             <a @click="go(jumpPage)">确定</a>         </div>     </div> </template> <script>   export default {         props: {             totalPage: { // 总页数                 type: Number,                 default: 1,                 required: true             },             showItems: { // 显示出来的页数，如: 1 ... 34[5]67 ... 10                 type: Number,                 default: 5             },             showPrev: { // 是否显示“上一页”                 type: Boolean,                 default: true             },             showNext: { // 是否显示“下一页”                 type: Boolean,                 default: true             },             showJump: { // 是否显示“跳转”                 type: Boolean,                 default: true             },             initPage: {                 type: Number,                 default: 1             }         },         data () {             return {                 currentPage: 0,                 pages: [],                 jumpPage: 0,             }         },         created () {// 初始化时currentPage赋值             this.currentPage = this.initPage         }         methods: {             go (page) {                 if(page < 1) {                     page = 1                 }                 if(page > this.totalPage) {                     page = this.totalPage                 }                 if(page === this.currentPage) {                     return                 }                 this.currentPage = parseInt(page,10)                 this.$emit('go-page',{                     page: this.currentPage                 })             }         },         watch: {             currentPage (newVal) {                 this.jumpPage = newVal             },             initPage (newVal) {                 if(this.currentPage !== newVal) {                     this.currentPage = newVal                 }             }         }     } </script>

接下来就是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中怎么实现一个翻页组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。