摸摸小手，封装一个vue分页组件

.page{padding:10px;背景颜色：#fff；&-block{显示：内联块；宽度：30px；高度：28px；填充：4px8px；字体大小：0.8em；行高：18px；-右：无；框大小：边框框；&:first-child{width:34px;边框左上角半径：4px；边框左下角半径：4px；}&:last-child{width:34px;border-right:1pxsolid#ddd;border-top-right-radius:4px;border-bottom-right-radius:4px;}}}关注前端小鱼，多看原创技术文章【组件化】是每个前端工程师的必备技能。诚然，我们使用element、iview、vant等UI组件库，在实际开发中，往往需要封装更合适的业务组件，这样既有利于快速开发，又能让代码简洁明了，能够也锻炼了我们的组件化能力。整理思路以node.js官网的分页组件为例。假设我们要实现如下分页：从产品角度梳理思路后，要实现的分页组件有以下特点：1.当前页码颜色变化2.最多显示5个页码,小于5则显示实际页数3。当总页数超过5时：总页数-当前页>2，则末尾显示省略号；当前页>2，则开头显示省略号4.当总页数超过5时：如果当前页为最后一页，则一共显示3个页码；如果当前页是倒数第二页，则一共显示4个页码；其余显示5个页码-当当前页>2且当前页>2时，当前页始终显示在5个页码的中间6.点击最左边和最右边的箭头跳转到第一个和最后一页。静态结构：.page{padding:10px;背景颜色：#fff；&-block{显示：内联块；宽度：30px；高度：28px；填充：4px8px；字体大小：0.8em；行高：18px；-右：无；框大小：边框框；&:first-child{width:34px;边框左上角半径：4px；边框左下角半径：4px；}&:last-child{width:34px;border-right:1pxsolid#ddd;border-top-right-radius:4px;border-bottom-right-radius:4px;}}}在父组件中引用该组件：此时的效果：你会看到一个标准的，大于5页的静态分页：props接收值组件的一些值应该由父组件传递，计算后挂载props：{//总内容total:{type:Number,default:0},//每页数量limit:{type:Number,default:10},//当前页码page:{type:Number,default:1},},data(){return{pageList:[]//页码列表};},computed:{//最大页数pageMax(){returnMath.ceil(this.total/this.limit);},},onLoad(){//我的框架是mpvue，vue使用createdthis.initData();},methods:{//生成pageList页码列表initData(){this.pageList=[];//清除页码vari=1;做{这个.pageList.push(i);我++；}while(i<=this.pageMax);this.pageList.length>5&&(this.pageList=this.pageList.slice(0,5));//最多显示5页}}父组件传递这些值：data(){return{dataList:[],//Listpage:1,//当前页数限制:20,//每页数量};},onLoad(){this.getData();},methods:{getData(){//获取列表动态-在后端分页例如this.dataList=(awaitgetDataList(this.limit,this.page)).data;}}此时的效果：分页组件会根据父组件的真实数据——即使用该组件的页面进行渲染页码大于5和小于5组件的内容不同，当前页码是首页事件事件回调组件中的附加事件，回调给父组件（被调用组件）：methods:{//子组件事件回调：分页pageChange(page){this.$emit("page-change",page);},}父组件执行子组件的事件回调：methods:{//分页pageChange(page){this.page=page;这个.getData();},}此时的效果：点击页码的颜色会发生变化，父组件收到子组件的回调事件返回一个值page——即当前页码，分页内容可以根据页码呈现；单击最左边和最右边的箭头分别跳转到第一页和最后一页。监听页码变化，因为页码不同渲染的组件内容不同，所以需要监听页码变化，刷新组件内容；同时，当总数更新后，重新加载组件watch:{//监听页码变化->页码列表更新page(val){if(val<=3){this.pageList=[];变种我=1;做{this.pageList.push(i);我++；}while(i<=this.pageMax);this.pageList.length>5&&(this.pageList=this.pageList.slice(0,5));//最多显示5页}elseif(val===this.pageMax){this.pageList=[val-2,val-1,val];}elseif(val===this.pageMax-1){this.pageList=[val-2,val-1,val,val+1];}else{this.pageList=[val-2,val-1,val,val+1,val+2];}},//监听页码变化->更新总计total(val){this.initData();}}此时的效果是：组件根据页码和数量变化内容渲染不同的页面，至此分页组件的全部内容都展开了。可以将当前组件添加到元素和iview之类的组件中下拉框显示的页数也可以由父组件、子组件的样式布局、页码按钮的个数（本例中最大为5个）决定。.大体思路不变，即：1.子组件接收值，根据值改变渲染2.子组件追加事件回调父组件3.添加监听的完整代码为需要.page{padding:10px;背景色：#fff；&-block{显示：内联块；宽度：30px；高度：28px；填充：4px8px；字体大小：0.8em；行高：18px；边框：1px实心#ddd；右边界：无；框大小：边框框；边框左上角半径：4px；边框左下角半径：4px；}&:last-child{width:34px;border-right:1pxsolid#ddd;右半径：4px；border-bottom-right-radius:4px;}}}apiprops:属性描述类型默认值总内容TotalnumberNumber0limitnumberperpageNumber10page当前页码Number1events：事件名称描述返回值page-change页码变化回调，返回变化后的页码当前页码