vue分页器组件编写方法详解

使用某视频剪辑软件编写的分页器组件，支持输入页码跳转，效果如图：

1、点击前五页：

2、点击中间部分页面

3、点击第一页，上一页按钮失效，点击最后一页，下一页按钮失效

组件调用：

//html调用参数：页面大小（总页数);页码（当前页)寻呼机：页面大小='页面大小' v-model='页码' @ on-jump=' jump '/寻呼机/组件引入从""导入寻呼机././component/pager/pager.vue'//组件调用声明组件：{寻呼机}//参数data(){ return { pageSize: 30，pageNo: 2 }}//接收跳转事件方法： { jump(id){ console。日志(id)}，}组件编写

pager.vue:

模板div class=' pager-wrapper ' ref=' pager ' div class=' pager-box ' a class=' pager-prev ' : class=' { ' pager-disabled ' : prev disable } ' href=' JavaScript :'@click='jumpPrev()'上一页/a模板v-for='页面大小中的I ' span v-if=' I==页码' class=' pager-curr ' em class=' pager-em '/emem { { I } }/em/span a v-else-if='第5(I)6页' href=' JavaScript :'@ click=' jump(I)' { { I } }/a a v-else-if=' page size7 | | I==1 | | I==page size | |(page no-2=ii=page no 2)' href=' JavaScript :'@ click=' jump(I)' { { I } }/a模板v-else span v-if=' page no 5i=' 6 ' class=' pager-SPR '…/span span v-if=' page no=' 4i=' 7 ' class=' page no-SPR '…/span span v-if=' page no 4i=' page no-3 ' class=' page no-SPR '…/span v-if=' page no 4i=' page no 3 ' class=' page no-SPR '…/span/template/span @ click=' jump next()'下一页/a/div class=' pager-input ' input type=' text ' v-model=' jumpPage ' a class=' pager-BTN-go ' href=' JavaScript : @单击=' Go()' Go/a/div/div/templatescriptexport默认{ model:{ //通过v型传过来的参数prop: '页码，event: '跳转页}，props: {页面大小： {类型：数字，默认值： 1 },页码：{ //通过v型传过来的参数键入：数字，默认为： { 1 }，数据(){返回{跳转页面： ' '//避免操作小道具参数} }，计算： { previdisable : function(){//}上一页"按钮是否可点如果(这个。第1页){返回false}else{ return true } }，nextDisable: function(){ //"下一页"按钮是否可点如果(这个。不，这一页。这个页面大小。页面大小1){返回false} else { return true} }，}，methods : { jump prev : function(){//点击上一页如果(这个。页码==1){返回；}else{ this .$emit('jumpPage '，这个。第1页)；这个$emit('on-jump '，这个。第1页)；} }，jumpNext:函数(){ //点击下一页如果(这个。页码==这个。页面大小){ return}else{ this .$emit('jumpPage '，这个。页码。1);//修改当前页码这个$emit('on-jump '，这个。页码。1);//跳转} }，jump:函数(id){ //直接跳转如果(id这个。PageSize){ id=this。页面大小；} this.jumpPage=这个$emit('jumpPage '，id)；//修改当前页码这个$emit('on-jump '，id)；//跳转}，Go:函数(){ if(this.jumpPage==''){ //判空处理返回；}否则if(/^\d*$/.测试(parsent(this。jumppage)){//填写数字才能跳转这个。jump(ParSeint)(这个。跳转页面))；this . jump page=} else { this . jump page=返回；} } } }/脚本完整代码可下载：vue分页器组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。