基于vue2.0的一个分页组件
2017-08-22 01:07
826 查看
基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂,
没耐心看自己动手造轮子写了一个,用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。
效果图
在线demo地址
github地址
文章如有误之处烦请指正谢谢
by 冷无缺
标
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能。于是百度发现几篇文章介绍的实在方式有点复杂,
没耐心看自己动手造轮子写了一个,用vue的计算属性去实现真正的逻辑代码大约在20行左右相当好理解现实原理简单没什么好介绍的直接上代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue-router</title> <script src="./vue.js" ></script> <style> body{ font-family:"Segoe UI"; } li{ list-style:none; } a{ text-decoration:none; } .pagination { position: relative; } .pagination li{ display: inline-block; margin:0 5px; } .pagination li a{ padding:.5rem 1rem; display:inline-block; border:1px solid #ddd; background:#fff; color:#0E90D2; } .pagination li a:hover{ background:#eee; } .pagination li.active a{ background:#0E90D2; color:#fff; } </style> </head> <body> <script type="text/x-template" id="page"> <ul class="pagination" > <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li> <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index"> <a href="#" >{{index}}</a> </li> <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li> </ul> </script> <div id="app"> <page></page> </div> <script> Vue.component("page",{ template:"#page", data:function(){ return{ current:1, showItem:5, allpage:13 } }, computed:{ pages:function(){ var pag = []; if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数 //总页数和要显示的条数那个大就显示多少条 var i = Math.min(this.showItem,this.allpage); while(i){ pag.unshift(i--); } }else{ //当前页数大于显示页数了 var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始 i = this.showItem; if( middle > (this.allpage - this.showItem) ){ middle = (this.allpage - this.showItem) + 1 } while(i--){ pag.push( middle++ ); } } return pag } }, methods:{ goto:function(index){ if(index == this.current) return; this.current = index; //这里可以发送ajax请求 } } }) var vm = new Vue({ el:'#app', }) </script> </body> </html>
效果图
在线demo地址
github地址
文章如有误之处烦请指正谢谢
by 冷无缺
标
相关文章推荐
- 基于vue2.0的一个分页组件
- 基于Vue2.0的分页组件
- 基于vue实现分页/翻页组件paginator示例
- VUE实现一个分页组件的示例
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- Rubik UI 是一个基于 Vue.js 2.0
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- 一个可复用的vue分页组件
- 基于Vue.js的表格分页组件
- vue学习系列-完成一个分页组件的封装
- vue实现一个分页组件
- 基于 Vue2.0 的移动端 / PC 端验证码输入组件.
- 基于Vue如何封装分页组件
- 基于Vue.js的表格分页组件
- Vue.js 学习10 Element基于Vue2.0的组件库
- Vue2.0+ElementUi封装table组件实现分页功能
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程