vue仿element实现分页器效果
2018-09-13 08:23
801 查看
1 .起因
今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习.
2.实现难点
分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下:
<div class="pagination" @click="pageClick"> <button class="pre">上一页</button> <ul class="pages"> <li :class="['first', { 'active' : current == 1 }]" v-if="total"> 1 </li> <li :class="[ testLeft,goback]" 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 :class="[ testRight,gogo]" v-show="showNextMore" @mouseenter="testRight='more-right'" @mouseleave="testRight='more'"></li> <li :class="['last', { 'active' : current == $last }]" v-if="total"> {{ $last }} </li> </ul> <button class="next">下一页</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实现分页器效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- vue+ElementUI实现订单页动态添加产品效果
- vue+Element-ui实现分页效果
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 基于vue-element组件实现音乐播放器功能
- 基于vue实现分页效果
- vue+element的表格实现批量删除功能示例代码
- 函数fadeout(element)实现了元素的淡出效果(即透明度从1变到0),动画时间为1秒钟。用定时器setInterval实现动画
- vue实现多个元素或多个组件之间动画效果
- vue.js组件vue-waterfall-easy实现瀑布流效果
- vue 实现数字滚动增加效果的实例代码
- vue移动端实现红包雨效果
- Vue-router结合transition实现app前进后退动画切换效果的实例
- vue实现横向滚动效果(better-scroll)
- vue 指令之气泡提示效果的实现代码
- 使用Vue组件实现一个简单弹窗效果
- Vue实现6位数密码效果
- vue + element-ui实现简洁的导入导出功能
- Vue 实现展开折叠效果的示例代码