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 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
JavaScript错误处理
Feb 03 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
教大家制作简单的php日历
2015/11/17 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python和Go语言的区别总结
2019/02/20 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
班组长的岗位职责
2013/12/09 职场文书
颁奖典礼主持词
2014/03/25 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
优秀班组申报材料
2014/12/25 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
分享7个 Python 实战项目练习
2022/03/03 Python