微客导航 » 文章资讯 » vue仿element实现分页器效果

vue仿element实现分页器效果

2023-09-08 05:42:04 165

1.起因

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

2.实现难点

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


上一页


1



{{item}}



{{$last}}


下一页

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

computed:{
//中间页数组
$pages(){
constfoldPage=this.foldPage
constcurrent=Number(this.current)
consthalfFoldPage=Math.floor((foldPage-2)/2)
if(this.$last>foldPage){
if(current-halfFoldPage>2){
this.showPreMore=true
}else{
this.showPreMore=false
}
if(current+halfFoldPage
所有的点击都用一个函数处理,根据e.target判断点击的目标.从而做出相应的逻辑:
methods:{
pageClick(e){
letnewPage=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++
}
//上一页
elseif(e.target.className.indexOf('pre')!=-1){
if(this.current==1){
return
}
this.current--
}
//省略向左
elseif(e.target.className.indexOf('left')!=-1){
this.current-=this.foldPage-2

if(this.current<=1){
this.current=1
return
}
}
//省略向右
elseif(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实现分页器效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue仿element实现分页器效果

热门推荐

随机推荐