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


Posted in Javascript onJune 28, 2019

使用vue编写的分页器组件,支持输入页码跳转,效果如图:

1、点击前五页:

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

2、点击中间部分页面

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

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

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

组件调用:

//html调用 参数:pageSize(总页数);pageNo(当前页)
<pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager>

//组件引入
import pager from '../../component/pager/pager.vue'

//组件调用声明
components:{ pager}

//参数
data(){
 return {
  pageSize: 30,
  pageNo: 2
 }
}

//接收跳转事件
methods:{
 jump(id){
  console.log(id)
 },
}

组件编写

pager.vue:

<template>
 <div class="pager-wrapper" ref="pager">
  <div class="pager-box">
   <a class="pager-prev" :class="{'pager-disabled':prevDisable}" href="javascript:;" @click="jumpPrev()">上一页</a>
   <template v-for="i in pageSize">
    <span v-if="i==pageNo" class="pager-curr">
     <em class="pager-em"></em><em>{{i}}</em>
    </span>
    <a v-else-if="pageNo<5&&(i)<6" href="javascript:;" @click="jump(i)">
     {{i}}
    </a>
    <a v-else-if="pageSize<7||i==1||i==pageSize||(pageNo-2<=i&&i<=pageNo+2)" href="javascript:;" @click="jump(i)">
     {{i}}
    </a>
    <template v-else>
     <span v-if="pageNo<5&&i==6" class="pager-spr">…</span>
     <span v-if="pageNo==4&&i==7" class="pager-spr">…</span>
     <span v-if="pageNo>4&&i==pageNo-3" class="pager-spr">…</span>
     <span v-if="pageNo>4&&i==pageNo+3" class="pager-spr">…</span>
    </template>
   </template>
   <a class="pager-next" :class="{'pager-disabled':nextDisable}" href="javascript:;" @click="jumpNext()">下一页</a>
  </div>
  <div class="pager-input">
   <input type="text" v-model="jumpPage">
   <a class="pager-btn-go" href="javascript:;" @click="Go()">GO</a>
  </div>
 </div>
</template>
<script>
export default {
 model:{ //通过v-model传过来的参数
  prop: 'pageNo',
  event: 'jumpPage'
 },
 props:{
  pageSize:{
   type: Number,
   default: 1
  },
  pageNo:{ //通过v-model传过来的参数
   type: Number,
   default: 1
  }
 },
 data(){
  return {
   jumpPage:'' //避免操作props参数
  }
 },
 computed: {
  prevDisable: function(){ //“上一页”按钮是否可点
   if(this.pageNo > 1){
    return false;
   }else{
    return true
   }
  },
  nextDisable: function(){ //“下一页”按钮是否可点
   if(this.pageNo < this.pageSize && this.pageSize > 1){
    return false;
   }else{
    return true;
   }
  },
 },
 methods: {
  jumpPrev: function(){ //点击上一页
   if(this.pageNo == 1){
    return ;
   }else{
    this.$emit('jumpPage',this.pageNo-1);
    this.$emit('on-jump',this.pageNo-1);
   }
  },
  jumpNext: function(){ //点击下一页
   if(this.pageNo == this.pageSize){
    return ;
   }else{
    this.$emit('jumpPage',this.pageNo+1); //修改当前页码
    this.$emit('on-jump',this.pageNo+1); //跳转
   }
  },
  jump: function(id){ //直接跳转
   if(id>this.pageSize){ 
    id=this.pageSize;
   }
   this.jumpPage = '';
   this.$emit('jumpPage',id); //修改当前页码
   this.$emit('on-jump',id); //跳转
  },
  Go: function(){
   if(this.jumpPage==''){ //判空处理
    return ;
   }else if(/^\d*$/.test(parseInt(this.jumpPage))){ //填写数字才能跳转
    this.jump(parseInt(this.jumpPage));
    this.jumpPage = '';
   }else{
    this.jumpPage = '';
    return ;
   }
  }
 }
}
</script>

完整代码可下载:vue分页器组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
js实现简单计算器
Nov 22 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
Vue通过input筛选数据
Oct 26 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
微信小程序身份证验证方法实现详解
Jun 28 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
使用python编写监听端
2018/04/12 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
公证委托书
2014/08/01 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书