微信预约小程序制作_vue仿element完成分页器效果

vue仿element实现分页器效果       这篇文章主要介绍了vue仿element实现分页器效果,实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),具体实例代码大家参考下本文

1 .起因

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

2.实现难点

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

 div @click="pageClick" 
 button 上一页 /button 
 li :class="['first', { 'active' : current == 1 }]" v-if="total" 
 /li 
 li : v-show="showPreMore"
 @mouseenter="testLeft='more-left'"
 @mouseleave="testLeft='more'" /li 
 li :class="['page-item', { 'active' : current == item }]" v-for="item in $pages" 
 {{ item }}
 /li 
 li : 
 v-show="showNextMore"
 @mouseenter="testRight='more-right'"
 @mouseleave="testRight='more'" /li 
 li :class="['last', { 'active' : current == $last }]" v-if="total" 
 {{ $last }}
 /li 
 /ul 
 button 下一页 /button 
 /div 

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

computed:{
 // 中间页数组
 $pages(){
 const foldPage = this.foldPage 
 const current = Number(this.current)
 const halfFoldPage = Math.floor((foldPage-2)/2) 
 if (this.$last 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判断点击的目标.从而做出相应的逻辑:

methods:{
 pageClick(e){
 let newPage = Number(e.target.textContent)
 this.current = Number(this.current);
 if (!isNaN(newPage) newPage){
 this.current = newPage
 }else {
 // 下一页
 if (e.target.className.indexOf('next') != -1){
 if (this.current == this.$last){
 return;
 this.current ++
 // 上一页
 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实现分页器效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关阅读