1 .起因
今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.
2.实现难点
分页器的实现难点主要是什么时候显示分页器的省略,我的思路是: 规定一个值foldPage,意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:
上一页
今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.
分页器的实现难点主要是什么时候显示分页器的省略,我的思路是: 规定一个值foldPage,意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:
$pages是一个计算属性,用于动态生成中间的页码,以及控制folder1和folder2的显示,代码如下:
所有的点击都用一个函数处理,根据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
}
}
}
}
},
pagination组件在element中算是一个很简单的组件,静下心来看不是很复杂,理解其思路以后可以自己尝试去写出来,细节可以无需在意.
以上所述是小编给大家介绍的vue仿element实现分页器效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30255.html