vue仿element实现分页器效果

前端之家收集整理的这篇文章主要介绍了vue仿element实现分页器效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1 .起因

今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.

2.实现难点

分页器的实现难点主要是什么时候显示分页器的省略,我的思路是: 规定一个值foldPage,意为当前最多显示标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:

上一页

$pages是一个计算属性,用于动态生成中间的页码,以及控制folder1和folder2的显示,代码如下:

foldPage){ if (current - halfFoldPage > 2){ this.showPreMore = true }else { this.showPreMore = false } if (current + halfFoldPage < this.$last){ this.showNextMore = true }else { this.showNextMore = false } } let array = [] // folder1显示 if (this.showNextMore && !this.showPreMore){ for(let i = 2; i < foldPage; i++){ array.push(i) } // folder1 和 folder2都显示 }else if ( this.showPreMore && this.showNextMore ){ for(let i = current - halfFoldPage; i <= current + halfFoldPage; i++ ){ array.push(i) } // folder2显示 }else if (!this.showNextMore && this.showPreMore){ // 当folder2显示的时候,页码不能大于$last,需要往前多显示差额 let dis = current + halfFoldPage - this.$last + 1; for(let i = current - halfFoldPage - dis ; i < this.$last; i++){ array.push(i) } // 都不显示 }else { for(let i = 2; i < this.$last; i++){ array.push(i) } } return array },// 总页数 $last(){ return Math.ceil(this.total/this.size) } }

所有的点击都用一个函数处理,根据e.target判断点击的目标.从而做出相应的逻辑:

if (!isNaN(newPage) && newPage){ this.current = newPage }else { // <a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a> if (e.target.className.indexOf('next') != -1){ if (this.current == this.$last){ return; } this.current ++ } // <a href="https://www.jb51.cc/tag/shangyiye/" target="_blank" class="keywords">上一页</a> else if (e.target.className.indexOf('pre') != -1){ if (this.current == 1){ return } this.current -- } // 省略向左 else if (e.target.className.indexOf('left') != -1){ this.current -= this.foldPage - 2 if (this.current <= 1){ this.current = 1 return } } // 省略向右 else if(e.target.className.indexOf('right') != -1){ this.current += this.foldPage - 2 if (this.current >= this.$last){ this.current = this.$last return } } } }

},

3.总结

pagination组件在element中算是一个很简单的组件,静下心来看不是很复杂,理解其思路以后可以自己尝试去写出来,细节可以无需在意.

总结

以上所述是小编给大家介绍的vue仿element实现分页效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/30255.html

猜你在找的Vue相关文章